vue-qr是一个很棒的制作二维码开源库，github地址：https://github.com/Binaryify/vue-qr
1.安装vue-qr
npm install vue-qr --save
2.在需要用到的文件中引入
import vueqr from "vue-qr";
3.在script组件中加入vue-qr
components: {
vueqr,
},
4.在template中加入vue-qr组件
<vue-qr
:correctLevel="3"
:autoColor="false"
colorDark="#000000"
:text="qrText"//这个一个变量，需要在data中定义
:logoSrc="icon_url"//这个一个变量，需要在data中定义
:logoScale="0.28"
:size="300"
/>
参数说明
| 参数 | 说明 |
|---|---|
| text | 欲编码内容，也是扫描生成的二维码得到的文字或链接等 |
| correctLevel | 容错级别 ，范围：0-3 |
| size | 尺寸, 长宽一致, 包含外边距 |
| margin | 二维码图像的外边距, 默认 20px |
| colorDark | 二维码实点的颜色 |
| colorLight | 空白区的颜色 |
| bgSrc | 欲嵌入的背景图地址 |
| gifBgSrc | 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能 |
| backgroundColor | 背景色 |
| logoSrc | 嵌入至二维码中心的 logo 地址，这个参数可以自定义logo 图片 |
| logoMargin | logo 标识周围的空白边框, 默认为0 |
| logoScale | 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale(size-2margin), 默认 0.2 |
| logoBackgroundColor | logo 背景色,需要设置 logo margin |
| logoCornerRadius | logo 标识及其边框的圆角半径, 默认为0 |
| autoColor | 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true |
5.在script数据中加入text和logoSrc绑定的变量，可以生成logo图片，如下：
data() {
return {
qrText: "Hello",
icon_url:require("@/assets/logo.png")
}
}
qrText就是二维码的编码内容，图片可以放在assets文件夹下，这样就可以生成带logo的二维码。演示网址：https://www.1tool.site/#/qrcode?id=2
含有二维码的图片会被封禁，这里就不展示了。。。
