业务场景主要是因为在生成qr码的时候超过一定的字数后，扫码枪识别率偏低导致。在npm中寻找包时，大多数都是以qr为主。为了以后在遇到二维码的时候可以更快的去完成，记录起这次二维码生成的案例
用到的依赖是bwip-js，也有可能有更好的依赖，我只是粗略的找了一下，找到了能够满足我现状的依赖。
安装么就是常规的
npm i bwip-js
安装完之后，直接进项目文件
<template>
<div>
<canvas id="qrcode" ref="qrcode"></canvas>
</div>
</template>
<script>
import bwipjs from 'bwip-js';
export default {
created(){
let canvas = bwipjs.toCanvas(this.$refs.qrcode, {
bcid: 'datamatrix', // 码类型
text: JSON.stringify(this.content), // 码内容
scale: 3, // 缩放比例
height: 20, // 高
width: 20, // 宽
scaleX: 3, // x轴比例
scaleY: 3, // y轴比例
includetext: true, // 展示可读的文本
textxalign: 'center' // 文本位置
})
},
data(){
retrun {
content: '333554'
}
}
}
</script>
<style lang="scss" scoped>
</style>
选项值：
bcid ：码类型。
text ：要编码的文本。
scaleX：x轴缩放因子。必须是大于0的整数。默认值为2。
scaleY：y轴缩放因子。必须是大于0的整数scaleX。默认值为。
scale：同时设置x轴和y轴缩放比例。必须是大于0的整数。
rotate：允许将图像旋转到四个正交方向之一。字符串值。必须是以下之一：
'N'：正常（不旋转）。默认值。
'R' ：顺时针（右）旋转90度。
'L' ：逆时针（左）旋转90度。
'I' ：反转180度旋转。
padding：速记设置paddingtop，paddingleft，paddingright，和paddingbottom。
paddingwidth：设置paddingleft和的简写paddingright。
paddingheight：设置paddingtop和的简写paddingbottom。
paddingtop：设置条形码图像顶部的填充区域的高度（以磅为单位）。旋转并缩放图像。
paddingleft：设置条形码图像左侧填充区域的宽度（以磅为单位）。旋转并缩放图像。
paddingright：设置条形码图像右侧填充区域的宽度（以磅为单位）。旋转并缩放图像。
paddingbottom：设置条形码图像底部的填充区域的高度（以磅为单位）。旋转并缩放图像。
backgroundcolor：这实际上是BWIPP选项，但可以通过bwip-js绘图代码更好地处理。接受十六进制的RRGGBB或十六进制的CCMMYYKK字符串值。
更详细的可以直接参考bwipjs 配置项
东西比较菜，大佬轻轻虐，看不上眼的也别骂，毕竟只是给自己记录的
