深入了解Vue使用vue-qr生成二維碼的方法
更新時(shí)間：2021年12月08日 16:22:18 作者：假我和尚
這篇文章主要為大家介紹了Vue使用vue-qr生成二維碼的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
“二維碼”的英文是“QR Code”，“QR”是“Quick Response”的縮寫，反映出這種二維碼具有“超高速識讀”的特點(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)的頁面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é)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue實(shí)現(xiàn)的雙向數(shù)據(jù)綁定操作示例
這篇文章主要介紹了vue實(shí)現(xiàn)的雙向數(shù)據(jù)綁定操作,結(jié)合完整實(shí)例形式較為詳細(xì)的分析了vue.js進(jìn)行數(shù)據(jù)雙向綁定操作的常見實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了vue loadmore組件上拉加載更多功能示例代碼,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了vue-jsonp的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家詳細(xì)介紹了如何基于Vue實(shí)現(xiàn)簡單的消息提示功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
這篇文章主要為大家介紹了vue 使用vue-cropper裁剪圖片，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue實(shí)現(xiàn)文章內(nèi)容過長點(diǎn)擊閱讀全文功能的實(shí)例
下面小編就為大家分享一篇vue實(shí)現(xiàn)文章內(nèi)容過長點(diǎn)擊閱讀全文功能的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了Vue組件之 高德地圖地址選擇功能的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
這篇文章主要介紹了Vue-router路由該如何使用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
詳解從vue-loader源碼分析CSS Scoped的實(shí)現(xiàn)
這篇文章主要介紹了詳解從vue-loader源碼分析CSS Scoped的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
基于vue3開發(fā)mobile-table適用于移動端表格
這篇文章主要給大家介紹了關(guān)于如何基于vue3開發(fā)mobile-table適用于移動端表格的相關(guān)資料,需要的朋友可以參考下2024-03-03