vue2 前端生成自定义二维码
文章目录
-
- 概要
- 安装
- 完整代码
- 小结
概要
提示：这里使用的是第三方 ：qrcodejs2
安装
npm install qrcodejs2
完整代码
v-for="(qrData, index) in dataList"
:key="index"
>
- {{ qrData.invBinId }}
- {{ qrData.invBinName }}
- {{ qrData.invPhysicId }}
- {{ qrData.invPhysicName }}
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中的数据生成对应的二维码，并将生成的二维码实例存储到数组中。
