在vue项目中使用qrcodesjs2生成二维码

最近写项目遇到一个需求需要生成二维码，看了一下项目中生成二维码使用的都是qrcodesjs2，而且操作比较简单。在这里简单记录一下

安装

npm i qrcodejs2 -S

html

<!-- 放置二维码的容器,需要给一个ref -->
 <div v-for="(item,i) in qrcode" :key="i">
 	<div id="qrcode" :ref="qrcode[i]"></div>
 <div>

项目中需要打印多个二维码，而且这样更加通用无论打印单个还是多个都可以

js

// 生成二维码
   printTwoCode(width) {
       for (let j in this.qrcode) {
           let code = this.qrcode[j]; // 二维码内容
           new QRCode(this.$refs[`${this.qrcode[j]}`][0], {
               text: code,
               render: 'canvas',
               width: width,
               height: width,
               colorDark: '#000000',
               colorLight: '#ffffff'
           });
       }
   },

清除

for (let j in this.qrcode) {
       this.$refs.qrcode[j][0].innerHTML = ''
  }

使用

this.$nextTick(() => {
     this.printTwoCode(130);
 });