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>