vue生成二维码及注意事项

使用主要是两个点要注意，1是生成二维码的时机，2是避免在HTML中写{{data.userInfo.nickname}}这样的数据格式。
首先安装组件

npm install qrcodejs2 --save

然后页面引入

import QRCode from "qrcodejs2";

html部分：

<div id="qrCode" ref="qrCodeDiv"></div>

生成的时间根据自己需要来做，在接口请求完成，或者是页面截图生成之后等。

mounted() {
    this.BindQRCode();
  },

根据若是二维码内容是固定的则直接写死就好，若是变化的则根据具体需求来拼接text。

//生成二维码
    BindQRCode: function() {
      new QRCode(this.$refs.qrCodeDiv, {
        text: `http://localhost:8080/testUrl/myGrades?uid=${this.userInfo.uid}`,
        width: 60,
        height: 60,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
      });
    },

用这个需要注意的是不要在HTML里写userInfo.list.day这样的代码，不然会与二维码插件冲突报错，最好是把这个页面需要用到的数据在接口里定义好，比如

//接口返回res
res => {
          let allInfo = res;
          console.log(this.allInfo);
          this.nickname = allInfo.showInfo.nickname;
          this.sex = allInfo.user_info.parents_sex;
          this.today = allInfo.user_info.today;
          this.initimg();
        },

export default {
  data() {
    return {
      show: false,
      success: false,
      test: "",
      nickname: '',
      sex: '',
      dataURL: "",
      today: '',
      dataUrltext: ""
    };
  },
}

把需要用到的一些数据定义好放到data里，用的时候直接取nickname而不是this.allInfo.showInfo.nickname;