深入了解Vue使用vue-qr生成二維碼的方法
更新時間：2021年12月08日 16:22:18 作者：假我和尚
這篇文章主要為大家介紹了Vue使用vue-qr生成二維碼的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
“二維碼”的英文是“QR Code”，“QR”是“Quick Response”的縮寫，反映出這種二維碼具有“超高速識讀”的特點?！癚uick Response Code”也就是“快速響應(yīng)碼”。
npm下載
npm install vue-qr --save
下載成功：
步驟
（1）導(dǎo)入
import VueQr from 'vue-qr'
（2）vue-qr參數(shù)
text二維碼，即掃描二維碼后跳轉(zhuǎn)的頁面size二維碼大小margin二維碼圖像的外邊距, 默認 20pxbgSrc嵌入的背景圖地址logoSrc嵌入至二維碼中心的 LOGO 地址logoScale中間圖的尺寸dotScale二維碼的點的大小colorDark實點的顏色（注意：和colorLight一起設(shè)置才有效）colorLight空白的顏色（注意：和colorDark一起設(shè)置才有效）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>
結(jié)果：
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
本篇文章主要介紹了VUE實現(xiàn)日歷組件功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
詳解vue2.0 資源文件assets和static的區(qū)別
這篇文章主要介紹了詳解vue2.0 資源文件assets和static的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Vue-DPlayer是一個易于使用、高性能的基于Vue.js的視頻播放器組件,本文給大家介紹Vue DPlayer詳細使用,本文將從四個方面對Vue-DPlayer進行詳細的闡述,感興趣的朋友一起看看吧2023-10-10
輕量級富文本編輯器wangEditor結(jié)合vue使用方法示例
在我們項目中，有些時候需要使用富文本編輯器。本文將以百度開發(fā)的Ueditor結(jié)合Vue.js介紹一下。非常具有實用價值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue3中vue-meta的使用方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了在vue中使用?jquery?的兩種方法小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue-cli history模式實現(xiàn)tomcat部署報404的解決方式
這篇文章主要介紹了vue-cli history模式實現(xiàn)tomcat部署報404的解決方式,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue.cli是vue中的項目構(gòu)造工具,是一個npm包,需要安裝node.js和 git才能用,下面這篇文章主要給大家介紹了關(guān)于利用vue-cli創(chuàng)建vue項目的詳細步驟,需要的朋友可以參考下2022-06-06
VUE?Element修改el-input和el-select長度的具體步驟
這篇文章主要給大家介紹了關(guān)于VUE?Element修改el-input和el-select長度的具體步驟,文中通過代碼介紹的非常詳細,對大家學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
Vue引用vee-validate插件表單驗證問題(cdn方式引用)
這篇文章主要介紹了Vue引用vee-validate插件表單驗證問題(cdn方式引用)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12