最近项目使用到前端生成二维码功能，使用到qrcodejs2插件来生成，这里将vue项目使用qrcodejs2生成二维码的过程做个总结：

1. 安装qrcodejs2模块

npm i qrcodejs2

2.所需页面导入qrcodejs2模块

import QRCode from 'qrcodejs2'

3.html元素添加容器盒子

<div ref="qrcodejs2" ></div>

4.页面渲染完成执行二维码渲染

data() {
  return {
    qrcode: null
  }
},
mounted() {
  this.initQrCode()
},
methods: {
  initQrCode() {
    this.qrcode = new QRCode(this.$refs.qrcodejs2, {
      text: '二维码扫描展示信息',
      width: 150,
      height: 150
    })
  }
}

配置项

• text：二维码扫描展示信息（默认：无）
• width：二维码宽度（默认：256）
• height：二维码高度（默认：256）
• colorDark：二维码颜色（默认：#000000）
• colorLight：二维码背景色（默认：#ffffff）
• correctLevel：二维码容错级别，可设置为：QRCode.CorrectLevel.L、QRCode.CorrectLevel.M、QRCode.CorrectLevel.Q、QRCode.CorrectLevel.H（默认：QRCode.CorrectLevel.L）
• clear()：二维码清除方法

注意：如果将生成二维码逻辑放到弹窗中，那么二维码在生成时弹窗元素还未完全渲染，此时会找不到渲染对象而生成失败，这种情况可以使用$nextTick()函数将二维码生成代码放到$nextTick()的回调函数里来解决。