深入了解Vue使用vue-qr生成二維碼的方法
更新時間:2021年12月08日 16:22:18 作者:假我和尚
這篇文章主要為大家介紹了Vue使用vue-qr生成二維碼的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
“二維碼”的英文是“QR Code”,“QR”是“Quick Response”的縮寫,反映出這種二維碼具有“超高速識讀”的特點?!癚uick Response Code”也就是“快速響應碼”。
npm下載
npm install vue-qr --save
下載成功:
步驟
(1)導入
import VueQr from 'vue-qr'
(2)vue-qr參數(shù)
text
二維碼,即掃描二維碼后跳轉(zhuǎn)的頁面size
二維碼大小margin
二維碼圖像的外邊距, 默認 20pxbgSrc
嵌入的背景圖地址logoSrc
嵌入至二維碼中心的 LOGO 地址logoScale
中間圖的尺寸dotScale
二維碼的點的大小colorDark
實點的顏色(注意:和colorLight一起設置才有效)colorLight
空白的顏色(注意:和colorDark一起設置才有效)autoColor
若為 true, 背景圖的主要顏色將作為實點的顏色, 即 colorDark,默認 true
示例
<template> <div> <vue-qr :text="imgUrl" :size="250" :logoSrc="logo" :logoScale="0.2"> </vue-qr> </div> </template> <script> import VueQr from 'vue-qr' export default { name:'', components:{ VueQr, }, data() { return { imgUrl: 'https://baidu.com', logo: require('@/assets/tea_128.png'), } }, methods:{ }, } </script>
結果:
總結
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
詳解vue2.0 資源文件assets和static的區(qū)別
這篇文章主要介紹了詳解vue2.0 資源文件assets和static的區(qū)別,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2018-11-11輕量級富文本編輯器wangEditor結合vue使用方法示例
在我們項目中,有些時候需要使用富文本編輯器。本文將以百度開發(fā)的Ueditor結合Vue.js介紹一下。非常具有實用價值,需要的朋友可以參考下2018-10-10vue-cli history模式實現(xiàn)tomcat部署報404的解決方式
這篇文章主要介紹了vue-cli history模式實現(xiàn)tomcat部署報404的解決方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09VUE?Element修改el-input和el-select長度的具體步驟
這篇文章主要給大家介紹了關于VUE?Element修改el-input和el-select長度的具體步驟,文中通過代碼介紹的非常詳細,對大家學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12Vue引用vee-validate插件表單驗證問題(cdn方式引用)
這篇文章主要介紹了Vue引用vee-validate插件表單驗證問題(cdn方式引用),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12