el-dialog里显示二维码

安装

cnpm install qrcodejs2

在main.js全局引用

import QRCode from 'qrcodejs2'
Vue.prototype.$QRCode = function()
{
  let qrcode = new QRCode('qrcode', {
    width: 232,  // 设置宽度
    height: 232, // 设置高度
    text: ‘12345’,
  });
};

生成二维码

new QRCode(document.getElementById("qrcode"), "http://www.xxxxx.com");  // 设置要生成二维码的链接

var qrcode = new QRCode("test", {
    text: "http://www.xxxxxx.com",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});

同样我们可以使用以下方法：

qrcode.clear(); // 清除代码
qrcode.makeCode("http://www.w3cschool.cc"); // 生成另外一个二维码

遇到的问题：el-dialog第一次打开的时候，二维码没用显示，查了网上的方法

dialog属性此处一定要添加 @opened=“ShowQRCode()”，opended是dialog动画打开完毕时候的回调，当页面加载完毕时才会加载ShowQRCode(),可以解决因dialog加载延时导致的二维码不显示问题。不过二维码显示会有一点点延时，半秒以内，不影响应用。

    showQrCode() {
      document.getElementById('qrcode').innerHTML = ''
      const qrcode = new QRCode('qrcode', {
        width: 150,
        height: 150,
        text: 'http://xxxxxxxx.com'
        colorDark: '#109dff',
        colorLight: '#d9d9d9'
      })
    }