vue： js通过后台返回的url制作二维码

1.首先在项目里面引入制作二维码的插件,我这里用的是QRCode
npm install qrcodejs2 -S
2.在页面中使用这个插件

<script>
import QRCode from "qrcodejs2"; //
</script>

3.在html中写好二维码存放位置

 <div id="qrcode" class="qrcode" ref="qrcode"></div>

4.js方法
因为我这里拿到的url是通过后台返回给我，但接口请求没有页面渲染快，所以造成了二维码显示为空，为了解决这个问题，我在拿到url的方法中写了一个Promise来解决，待接口请求完成在进入页面，代码如下：
接口请求封装函数：

  createCode(id) {
      let _this=this;   //另存this
      return new Promise(function(resolve,reject){
        GroupApi.getGroupQrCode({ groupNum: id })
          .then(res => {
            _this.qrCodePhoto = res.data.url;
            resolve(); 
          })
          .catch(err => {
            _this.$message.error(err.data || "网络异常");
          });
           
      })
    },

制作二位码
showqrcode() {
this.isShowqrcode = true;
let _this = this;

  _this.createCode(_this.groupNum).then(()=>{
    //防止进入弹窗后html还没显示出来
        _this.$nextTick(() => {
       //这一块生成二维码
      let qr = new QRCode(_this.$refs.qrcode, {
        width: 200,
        height: 200, // 高度
        text: _this.qrCodePhoto // 二维码内容
      });
      
    });
     })
},