Vue element-ui使用qrcodejs2生成二维码

安装二维码插件 qrcodejs2

npm install qrcodejs2

在vue文件中引入qrcodejs2插件

import QRCode from 'qrcodejs2'

创建二维码容器div

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

创建生成二维码的方法

createQRCode(url) {
  this.$nextTick(()=> {
  // 二维码清除
  this.$refs.qrCodeDiv.innerHTML = '';
  new QRCode(this.$refs.qrCodeDiv, {
      text: url,  // 二维码链接，参数是否添加看需求
      width: 160, // 二维码宽度
      height: 160,  // 二维码高度
      colorDark: "#333333", // 二维码颜色
      colorLight: "#ffffff",  // 二维码背景色
      correctLevel: QRCode.CorrectLevel.L // 容错率，L/M/Q/H
    });
  })
}

执行该方法，生成二维码

let qrCodeUrl = 'https://www.baidu.com'
this.createQRCode(qrCodeUrl)

生成二维码截图