深入瞭解Vue使用vue-qr生成二維碼的方法
阿新 • • 發佈:2021-12-10
目錄
- npm下載
- 步驟
- (1)匯入
- (2)-qr引數
- 示例
- 總結
“二維碼”的英文是“QR Code”,“QR”是“Quick Response”的縮寫,反映出這種二維碼具有“超高速識讀”的特點。“Quick Response Code”也就是“快速響應碼”。
npm下載
npm install vue-qr --save
下載成功:
步驟
(1)匯入
import VueQr from 'vue-qr'
(2)vue-qr引數
text
二維碼,即掃描二維碼後跳轉的頁面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>
結果:
總結
本篇文章就到這裡了,希望能夠給你帶來幫助,也希望ZrXVXweC您能夠多多關注我們的更多內容!