适用于Awesome-qr.js的Vue 2.x组件 - vue-qr

适用于Awesome-qr.js的Vue 2.x组件 - vue-qr
插件名称 vue-qr
发布时间 2020年10月8日
插件作者 Binaryify

SumiMakito的Awesome-qr.js的Vue 2.x组件 是一个很棒的QR代码生成器。

变更日志:

v2.3.0(10/05/2020)

  • 支持SSR

安装和下载:

npm install vue-qr --save

用法

在模板中

<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正确的等级0-3容错等级0-3
size 输出QR码的宽度和高度包括边距。尺寸,长宽一致,包含外边距
margin 添加QR码的边距,默认20px。二维码图像的外边距,默认20px
colorDark “真实”块的颜色。仅当同时设置了colorDark和colorLight时才有效。(BYTE_DTA,BYTE_POS,BYTE_AGN,BYTE_TMG)实点的颜色
colorLight空格的颜色或“假”块。仅当同时设置了colorDark和colorLight时才有效。(BYTE_EPT)空白区的颜色
bgSrc要嵌入QR码的背景网址。欲嵌入的背景图地址
gifBgSrc要嵌入QR码中的Gif背景网址,如果设置了gifBackground,则backgroundImage将被忽略。此选项将影响性能。欲嵌入的背景图gif地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor 背景色
backgroundDimming 在背景图像上方添加的颜色蒙版。解码时有帮助。叠加在背景图上的颜色,在解码有缺陷的时有一定帮助
logoSrc徽标URL嵌入到生成的QR码的中心嵌入到二维码中心的LOGO地址
logoScale用于缩放徽标图像的值。较大的值可能会导致解码失败。徽标的大小等于logoScale*(size-2*margin)。默认值为0.2。用于计算LOGO大小的值,过大将导致解码失败,LOGO尺寸计算公式logoScale*(size-2*margin),默认为0.2
logo边距徽标图像周围出现白色边距。默认值为0。LOGO标识周围的空白边框,默认为0
logoBackgroundColor徽标背景颜色,需要设置徽标边距。徽标背景色,需要设置徽标边距
logoCornerRadius徽标角的半径。默认为0 LOGO徽标及其边框的圆角边缘,默认为0
whiteMargin如果设置为true,则背景图像周围将出现白色边框。默认为true。若设为true,背景图外将纳入白色边框
dotScale 用于缩小数据点大小的值。(0 <比例<1.0)默认0.35数据区域点缩小比例,默认为0.35
autoColor如果设置为true,backgroundImage的主色将用作colorDark。默认为true。若为true,背景图的主要颜色将作为实点的颜色,即colorDark,则为true
binarize 如果设置为true,则整个图像将使用给定的阈值或默认阈值(如果未指定)进行二值化。默认为false。若为true,图像将被二值化处理,未指定阈值则使用替换值
binarizeThreshold用于将整个图像二值化的阈值。默认值为128。(0 <threshold <255)二值化处理的阈值
callback 生成的QR码的数据URI将在此处可用。生成的二维码数据URI可以在某些中取得,第一个参数为二维码数据URL,第二个参数为props传过来的qid(因为二维码生成是异步的,所以加个id用于排序)
bindElement如果设置为true,则生成的QR将自动绑定到HTML元素。默认值为TRUE。指定是否需要自动将生成的二维码绑定到HTML上,默认是TRUE