项目要求在WEB端放置扫码可下载APP的二维码,在查询了相关的资料后,发现两个比较好用的二维码组件
一、vue-qart
1) 安装 vue-qart
npm install vue-qart --save
2) 页面中引入
import VueQArt from 'vue-qart'
components: {VueQArt}
3) 配置
downloadButton:false,
config: {
value: 'https://baidu.com',
imagePath: '/static/logo/ydLogo.png',
filter: 'color'
}
4) 页面填充
:config="config" :downloadButton="downloadButton">
npm install qrcodejs2 --save
/*
@ 这里注意安装 qrcodejs2 不要安装 qrcode ,装了也没用 会报错
*/
2) 页面中引入
import QRCode from 'qrcodejs2'
components: {QRCode}
3) 页面填充
<div id="qrcode" ref="qrcode">div>
4) 页面调用
qrcode () {
let qrcode = new QRCode('qrcode', {
width: 232, // 设置宽度
height: 232, // 设置高度
text: 'https://baidu.com'
})
},
/*
@ 在需要调用的地方 这样必须这样调用 否则会出现 appendChild null 就是id为qrcode的dom获取不到 返回结果为null
*/
this.$nextTick (function () {
this.qrcode();
})