vue引用QrCode生成二维码

需求：后台生成二维码链接和邀请码返回到前台，前台渲染生成二维码

1.安装

npm i qrcode

2.引入

import QRCode from "qrcode";

3.渲染二维码的标签

<canvas id="canvas" width="140" height="140" ref="canvas">

4.重点js

<script>

	//发送请求获取数据
	initUser() {
      userApi().then(res => {
        console.log(res);
        if (res.code == 200) {
          this.invite_code = res.data.invite_code;   //邀请码
          this.h5_url = res.data.h5_url;    //地址
          this.$nextTick(() => {
            this.useqrcode();   //调用生成二维码的方法
          });
        }
      });
    },
	useqrcode() {
      const { h5_url, invite_code } = this;   //data里面定义的数据
      
      var canvas = document.getElementById("canvas");   //获取元素
      
      var url = h5_url + "?invite_code=" + invite_code;   //拼接路径
      
      console.log(url);
      
      QRCode.toCanvas(canvas, url, error => {
        if (error) console.error(error);
        console.log("QRCode success!");
        //this.creatCodeUrl = url;
      });
    }
</script>