安装
npm install vue-qr --save
引入
// vue2.0
import VueQr from 'vue-qr'
// vue3.0
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
new Vue({
components: {VueQr}
})
使用
<vue-qr :bgSrc='src' :logoSrc="src2" text="Hello world!" :size="200"></vue-qr>
<vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>
...
export default {
methods:{
test(dataUrl,id){
console.log(url, id)
}
}
}
相关配置属性
| 属性名 |
含义 |
| text |
编码内容 |
| correctLevel |
容错级别 |
| size |
尺寸, 长宽一致, 包含外边距 |
| margin |
二维码图像的外边距, 默认 20px |
| colorDark |
实点的颜色 |
| colorLight |
空白区的颜色 |
| bgSrc |
欲嵌入的背景图地址 |
| gifBgSrc |
欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能 |
| backgroundColor |
背景色 |
| backgroundDimming |
叠加在背景图上的颜色, 在解码有难度的时有一定帮助 |
| logoSrc |
嵌入至二维码中心的 LOGO 地址 |
| logoScale |
用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale(size-2margin), 默认 0.2 |
| logoMargin |
LOGO 标识周围的空白边框, 默认为0 |
| logoBackgroundColor |
Logo 背景色,需要设置 logo margin |
| logoCornerRadius |
LOGO 标识及其边框的圆角半径, 默认为0 |
| whiteMargin |
若设为 true, 背景图外将绘制白色边框 |
| dotScale |
数据区域点缩小比例,默认为0.35 |
| autoColor |
若为 true, 图像将被二值化处理, 未指定阈值则使用默认值 |
| binarizeThreshold |
(0 < threshold < 255) 二值化处理的阈值 |
| callback |
生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序) |
| bindElement |
指定是否需要自动将生成的二维码绑定到HTML上, 默认是TRUE |
