今天做项目遇到了一个需求,就是管理后台生成签到的二维码,app端扫码获取培训班、班级、课程等等,然后就想到了qrcode.
vue项目使用qrcodejs2生成二维码
1,导入第三方插件
npm install –save qrcode
2,在页面上引入
import QRCode from 'qrcodejs2'
3.dom
<div class="qrcode" ref="qrCodeUrl">二维码位置</div>
4.JavaScript
methods: {
// 展示二维码
payOrder () {
this.innerVisible = true
// 二维码内容,一般是由后台返回的跳转链接,这里是写死的一个链接
this.qrcode = 'www.baidu.com'
// 使用$nextTick确保dom渲染之后渲染二维码
this.$nextTick(() => {
this.crateQrcode()
})
},
// 生成二维码
crateQrcode () {
var qr = new QRCode('qrcode', { // eslint-disable-line no-unused-vars // 不写这个会报错
width: 150,
height: 150, // 高度
text: this.qrcode // 二维码内容
// render: 'canvas' // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
colorDark : '#000000',
colorLight : '#ffffff',
correctLevel : QRCode.CorrectLevel.H // 容错率 L/M/H
})
},
// 关闭弹框,清除已经生成的二维码
closeCode () {
this.$refs.qrcode.innerHTML = ''
}
}