vue 前端生成二维码

npm下载

npm install vue-qr --save

 

//导入vue-qrcode

import VueQr from 'vue-qr';

 

vuejs注册vue-qr组件

 components: {
    VueQr,
  }

 

 

组件参数说明：

属性名称	属性说明
text	二维码内容
correctLevel	容错级别 0-3
size	二维码宽度和高度,比如120
margin	二维码内容距离边距的大小
colorDark	二维码数据点的颜色，如#3089dc，autoColor为true时无效
colorLight	空白区域的颜色，autoColor为true时无效
bgSrc	二维码背景图，通常和dotScale搭配使用
gifBgSrc	gif作为背景图，设置gifBgSrc后bgSrc无效
backgroundColor	背景颜色
backgroundDimming	.叠加在背景图上的颜色, 解码难时有帮助
logoSrc	二维码中间的logo的url地址
logoScale	计算logo大小的值,太大将导致解码失败, 计算公式 logoScale*(size-2*margin), 默认为 0.2
logoMargin	logo距离周边的位置，默认为0
logoBackgroundColor	当logoMargin不为0时，空白区域的颜色
logoCornerRadius	logo的圆角大小，默认为0
whiteMargin	如设置为true将会绘制白边
dotScale	二维码数据点的缩小比例，默认为0.35，如果背景图片不清晰可以缩小这个值
autoColor	是否把背景图片的主色作为数据点的颜色
binarize	若为 true, 图像将被二值化处理,
binarizeThreshold	默认 128. (0 < threshold < 255) 二值化处理的阈值
callback	生成成功的回调函数，第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid，因为是异步生成，所以需要用到qid
bindElement	默认true,否需要自动将生成的二维码绑定到HTML上。

 

使用：

<vue-qr
            class="vue-qr"
            :text="erweima"
            :logoScale="50"
            :size="300"
          ></vue-qr>