一、动态生成二维码
1. 先在终端中安装
npm install qrcodejs2
2. 在需要二维码的页面中调用
import QRCode from 'qrcodejs2'
3. 在要展示二维码的容器上添加 class 属性
<div class="qrcode" ref="qrCodeRef"></div>
4. 在script中添加方法
createQrCode () {
var qrcode = new QRCode(this.$refs.qrCodeRef, {
text: 'https://www.qtshe.com',
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
}
5. 调用方法，比如在mounted钩子里调用this.createQrCode();
二、在二级弹窗中显示二维码
1. 如果使用对话框显示二维码，有时会由于HTML元素还没创建，导致生成二维码时对象不存在。这时可以使用$nextTick来处理。
showQRCode () {
// 使用了 nextTick 之后，会在生成的 DOM 元素之后绑定
this.$nextTick(() => {
var qrcode = new QRCode(this.$refs.qrCodeRef, {
text: 'https://www.qtshe.com',
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
})
})
}