vue中使用qrcodejs2生成二维码生成二维码

1、页面中添加一个div

<div id="qrCode" ref="qrCodeDiv"></div>

2、在script中引用插件

import QRCode from 'qrcodejs2'

3、添加调用的方法qrcode

// 生成二维码
    qrcode (text) {
      this.qrCodeDialogVisible = true
      document.getElementById('qrCode').innerHTML = ''
      setTimeout(() => {
        // eslint-disable-next-line no-new
        new QRCode(this.$refs.qrCodeDiv, {
          text: text,
          width: 300,
          height: 300,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.H // 容错率L/M/H
        }, 100)
      })
    }

这样就可以了。

参考：https://www.cnblogs.com/cengjingdeshuige/p/10551629.html

 

注意：如果使用了el-dialog来包含二维码的div，则需要使用使用<div slot="footer">来包含div。原因是el-dialog是懒加载的。具体原因参考：https://blog.csdn.net/weixin_43361722/article/details/101207052

<!--二维码-->
    <el-dialog title="二维码" :visible.sync="qrCodeDialogVisible" width="340px">
      <div slot="footer" class="dialog-footer">
        <div id="qrCode" ref="qrCodeDiv"></div>
        <el-button type="warning" @click="123">保存二维码</el-button>
      </div>
    </el-dialog>