vue 项目生成二维码

1 下载安装

npm install qrcodejs2

2 将qrcodejs2依赖注册

import QRCode from 'qrcodejs2'

3 使用
html:

<el-dialog class="dialogStyle payDialogStyle" v-dialogDrag title="扫码支付" :visible.sync="dialogVisiblePay" :before-close="closeDialogPay" center width="400px">
      <div class="content">
        <div ref="qrcode"></div>
      </div>
    </el-dialog>

js:

// 打开充值模态框
    recharge () {
      console.log('充值')
      this.dialogVisiblePay = true
      this.$nextTick(() => { // 直接调用会报错，因为必须在生成div之后再生成二维码
        this.qrcodedraw()
      })
    },
    // 生成二维码
    qrcodedraw () {
      this.qrcode = new QRCode(this.$refs.qrcode, {
        width: 100, // 二维码宽度
        height: 100, // 二维码高度
        text: '123',
        background: '#ffffff', // 二维码的后景色
        foreground: '#000000', // 二维码的前景色
        src: require('../assets/image/user_icon.jpg'), // 二维码中间的图片
        correctLevel: QRCode.CorrectLevel.H
      })
      console.log(this.qrcode)
    },
    // 关闭重置模态框
    closeDialogPay () {
      this.dialogVisiblePay = false
      this.qrcode.clear()
      this.$refs.qrcode.innerHTML = '' // 清掉二维码，不然会累积
    }

效果图：