vue中使用qrcodejs2生成二维码

1.装包

npm i qrcodejs2 -S

2.在script中引入

import QRCode from 'qrcodejs2'

3.使用

项目中是通过弹出框的形式显示二维码的
HTML部分

<a-button type="primary" icon="qrcode" v-has="'document:qrcode'" @click="showModal">二维码</a-button>
二维码弹出框
<a-modal v-model="codeVisible" title="打印二维码" @ok="handleCode" width="350px">
   //准备显示二维码的容器
      <div id="qrcode"></div>
</a-modal>

JS部分

显示二维码弹出框
    showModal() {
        this.codeVisible = false
    // 使用$nextTick确保数据渲染
            this.$nextTick(() => {
              this.createQR()
            }）
    },
生成二维码
createQR() {
      //清空div中的二维码
      document.getElementById('qrcode').innerHTML = ''
　    //设置二维码的显示内容
      let text = "http://www.runoob.com"
      var qrcode = new QRCode('qrcode', {
     //控制二维码的大小
        width: 230,
        height: 230,
     //控制二维码的容错率
        correctLevel: QRCode.CorrectLevel.Q
      })
      qrcode.makeCode(text)
    },

4.显示效果