用vue-qr生成二维码

使用背景

生成二维码

实现内容

1. 使用vue-qr生成二维码

实现步骤

1. 安装vue-qr插件

npm install vue-qr --save

2. 引入插件（这样就不用在每个页面使用的时候单独引用了，或者也可以每个页面单独引用）

import vueQr from 'vue-qr'
new Vue({
    components: {VueQr}
})

3. 在HTML页面中使用

 <vue-qr :text="item.QRCode" :size="100" :logo-scale="0.2"></vue-qr>

vue-qr配置属性

1. text：二维码内容(个人测试可以为数字、字母、键盘上常见的符号、汉字；内容越多像素点越多，同样个数，汉字像素点最多)。如：:text=“QRCode1”
   

2. size：二维码宽高大小，包含外边距（二维码周围白色那圈），数值越大二维码越大。如：:size=“150”

3. margin：二维码图像的外边距, 默认 20px。如：:margin=“0”

4. colorDark：像素点的颜色。如：color-dark=“red”

5. colorLight：空白地方的颜色。如：color-light=“blue”

详情请跳转到vur-qr组件使用