vue项目绘制二维码

import QRCode from 'qrcode'

<div class="center column">
     <div>
          <img src="../../assets/icon/yiCity.png" style="height:364px;width:340px" alt />
          <canvas id="canvas" style="width: 350px;height: 350px;"></canvas>
     </div>
     <div style="font-size:12px;margin-top:30px;">请顾客使用微信扫一扫关注（易城市APP）完成绑定</div>
</div>

//  在获取到数据的回调中去调生成二维码的方法   必须加上定时器，否则会报错
setTimeout( () => {
     this.useqrcode(res.data.qrCode)  // 此为绘画canvas的方法调用
}, 0)

useqrcode(qrCodeUrl){ 
      //生成的二维码内容，可以添加变量
　　　 this.QueryDetail= qrCodeUrl
　　　 // this.QueryDetail = "http://192.168.1.103:8084" + "/shopMemberCard/" + this.shopMemberCardIds + '.html';  携带参数的写法
      console.log(this.QueryDetail)
      var canvas = document.getElementById("canvas")
      QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
        if (error) console.error(error)
        console.log("success");
      })
    }

#canvas{
  width: 50%!important;
  height: auto!important;
  position: absolute;
  left: 127px;
  top: 237px;
}

效果如下