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);