Vue中生成二维码组件——vue-qr——插件市场网站首页 技术教程

叶浩成520 2023-06-09 20:00:04

简介Vue中生成二维码组件——vue-qr——插件市场

最近在重构一个老系统，老系统用的是vue+elementUi的框架，现在要更新为vue+antdesign的框架模式。

下面记录一下用到的插件：

在这里插入图片描述

1.Vue中生成二维码组件——`vue-qr`

npm install vue-qr --save

// vue2.0
import VueQr from 'vue-qr'

// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
  components: {vueQr}
}

<vue-qr :text="pcbaUrl" :size="200" style="display: block; margin: auto"></vue-qr>

属性名	含义
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，背景图外将绘制白色边框
dotSize	数据区域点缩小比例，默认为0.35
autoColor	若为true,图像将被二值化处理，未指定阈值则使用默认值
binarizeThreshold	(0<threshold<255)二值化处理的阈值
callback	生成的二维码DataURI可以在回调中取得，第一个参数为二维码dataURL,第二个参数为props传过来的qid（因为二维码生成是异步的，所以加个id用于排序）
bindElement	指定是否需要自动将生成的二维码绑定到html，默认是true