vue2 前端生成自定义二维码

文章目录

• • 概要
  • 安装
  • 完整代码
  • 小结

概要

提示：这里使用的是第三方 ：qrcodejs2

安装

npm install qrcodejs2  

完整代码

 

<div>

      <div

        style="display: flex; justify-content: space-around"

        v-for="(qrData, index) in dataList"

        :key="index"

      >

        <div>

          <li>{{ qrData.invBinId }}</li>

          <li>{{ qrData.invBinName }}</li>

          <li>{{ qrData.invPhysicId }}</li>

          <li>{{ qrData.invPhysicName }}</li>

        </div>

        <div ref="qrCodeDiv" :id="'qrCode' + index"></div>

      </div>

    </div>

import QRCode from "qrcodejs2";  // 引入第三方 qrcodejs2 

 qrCodeData: ["时间1", "时间2", "时间3"], // 包含每个二维码要展示的内容的数组

 qrCodes: [], // 存储生成的二维码实例的数

dataList: [

        {

          invBinId: "ZK01BC00",

          invBinName: "ZK01BC00综合储位",

          invPhysicId: "ZK01BC",

          invPhysicName: "包材库",

        },

        {

          invBinId: "ZK01BC001",

          invBinName: "ZK01BC00综合储位2",

          invPhysicId: "ZK01BC3",

          invPhysicName: "包材库4",

        },

      ],

  bindQRCode() {

      this.$nextTick(() => {

        this.dataList.forEach((item, index) => {

          const qrCodeDiv = this.$refs["qrCodeDiv"][index];

          const qrCode = new QRCode(qrCodeDiv, {

          // text ：要插入的二维码内容

            text: `invBinId: ${item.invBinId}, invBinName: ${item.invBinName},

                   invPhysicId: ${item.invPhysicId}, invPhysicName: ${item.invPhysicName}`,

            width: 60,

            height: 60,

            colorDark: "#333333",

            colorLight: "#ffffff",

            correctLevel: QRCode.CorrectLevel.L,

          });

          this.qrCodes.push(qrCode); // 将生成的二维码实例存储到数组中

        });

      });

    },

小结

这段代码是一个名为bindQRCode的方法，它使用箭头函数来定义。在这个方法中，首先通过this.\$nextTick()确保在下一个DOM更新周期中执行代码。然后对this.dataList中的每个元素执行一个操作，操作包括获取对应的DOM元素（通过this.\$refs["qrCodeDiv"][index]），然后使用QRCode库生成一个二维码实例，并将其存储到this.qrCodes数组中。整体来说，这段代码的作用是根据this.dataList中的数据生成对应的二维码，并将生成的二维码实例存储到数组中。