最近在重构一个老系统，老系统用的是vue+elementUi的框架，现在要更新为vue+antdesign的框架模式。
下面记录一下用到的插件：
1.Vue中生成二维码组件——vue-qr
vue-qr官网链接：https://www.npmjs.com/package/vue-qr
1.1 安装vue-qr
npm install vue-qr --save
1.2 在页面上引入
// vue2.0
import VueQr from 'vue-qr'
// vue3.0 (support vite)
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
...
{
components: {
vueQr}
}
1.3 页面上使用
<vue-qr :text="pcbaUrl" :size="200" style="display: block; margin: auto"></vue-qr>
1.4 配置参数介绍
| 属性名 | 含义 |
|---|---|
| text | 编码内容 |
| correctLevel | 容错级别 |
| size | 尺寸，长宽一致，包含外边距 |
| margin | 二维码图像的外边距，默认20px |
| colorDark | 实点的颜色 |
| colorLight | 空白区的颜色 |
| bgSrc | 欲嵌入的背景图地址 |
| gifBgSrc | 欲嵌入的背景图gif地址，设置后普通的背景图将失效，设置此选项会影响性能 |
| backgroundColor | 背景色 |
| backgroundDimming | 叠加在背景图上的颜色，在解码有难度的时候有一定帮助 |
| logoSrc | 嵌入至二维码中心的LOGO地址 |
| logoScale | 用于计算LOGO大小的值，过大将导致解码失败，LOGO尺寸计算公式logoScale*(size-2*margin),默认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 |