最近在重构一个老系统,老系统用的是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 |