vue - element-admin 生成二维码

1.npm 引入包

npm install --save qrcode

2.对应页面引入

<canvas ref="qrcode_ban"></canvas>

import QRCode from 'qrcode';

// 生成二维码 url是生成二维码的链接
useqrcode(name, url) {
            let that = this;
            let canvas = that.$refs[name];
            // 去掉qrcode的边框（建议留1px；否则浏览器识别有些困难）
            QRCode.toCanvas(canvas, url, { width: 180, height: 180, margin: 1 }, function (error) {
                if (error) console.error(error);
                that.$forceUpdate();
            });
 }
  

//因为是弹窗中使用的二维码。绑定值和页面找到对应canvas有时间差，所以用了一个1秒的定时器
//弹窗先打开，否则生成二维码找不到canvas
              let that = this;
              this.dialogVisiable = true;//打开弹窗
              setTimeout(() => {
                  that.useqrcode('qrcode_ban', qrcode_ban);//生成二维码
                  that.dialogLoading = false;//关闭弹窗loading
               }, 1000);