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