vue项目中使用qrcodesjs2生成二维码简单示例

npm i qrcodejs2 -S

<!-- 放置二维码的容器,需要给一个ref -->
 <div v-for="(item,i) in qrcode" :key="i">
 	<div id="qrcode" :ref="qrcode[i]"></div>
 <div>

// 生成二维码
   printTwoCode(width) {
       for (let j in this.qrcode) {
           let code = this.qrcode[j]; // 二维码内容
           new QRCode(this.$refs[`${this.qrcode[j]}`][0], {
               text: code,
               render: 'canvas',
               width: width,
               height: width,
               colorDark: '#000000',
               colorLight: '#ffffff'
           });
       }
   },

for (let j in this.qrcode) {
       this.$refs.qrcode[j][0].innerHTML = ''
  }

this.$nextTick(() => {
     this.printTwoCode(130);
 });

<div class="box">
    <div v-for="(item, index) in list" class="boxscod" :key="index">
      <div :id="`code${item.id}`" :ref="`code${item.id}`" class="qrcode">
      </div>
      <div class="abc">
          <span class="cargo-wrap">{{ item.id }}</span>
          <span class="cargo-cardNo">{{ item.idCard }}</span>
        </div>
    </div>
  </div>
return {
      list: [
        { id: '01', idCard: 15336 },
        { id: '02', idCard: 18528 },
        { id: '03', idCard: 78542 },
        { id: '04', idCard: 46824 },  
      ],
    };
mounted() {
    this.showCode();
  },
  methods: {
    creatQrCode(id, code) {
      console.log(code);
      console.log(typeof code);
      var qrcode = new QRCode(id, {
        text: encodeURI(code), // 需要转换为二维码的内容
        width: 70,
        height: 70,
        colorDark: "#000000",
        colorLight: "#ffffff",
        // correctLevel: QRCode.CorrectLevel.H,
      });
      console.log(qrcode);
    },
    // 展示二维码
    showCode() {
      //   this.closeCode()
      this.$nextTick(() => {
        this.list.forEach((item) => {
          //   if (item.type === 1 || item.type === 2) {
          this.creatQrCode("code" + item.id, item.idCard);
          //   }
        });
      });
    },
  },