vue 动态生成二维码

前提

最近突然来了个需求 左边文字动态生成二维码的功能

如下图：

1.引入二维码生成模块

npm install qrcodejs2 --save

2.引入使用

import QRCode from 'qrcodejs2';

3.放置生成二维码图片的容器

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

4.js

   data() {
            return {
                printObj: {
                    id: "#qrCode",
                },
            }
        },
      methods: {
          qrcode(index) { //二维码大小 颜色
                return new QRCode(this.$refs.qrcode[index], {
                    width: 180,
                    height: 180,
                    colorDark: "#000",
                    colorLight: "#fff",
                })
            },
       }    
       调接口：
               initList() {
                managementlist().then(res => {
                    if (res.status.success) {
                        this.tableData = res.data;
                        this.$nextTick(() => {
                            this.tableData.map((v, i) => {
                                const qrcode = this.qrcode(i);
                                const content = [
                                    `加工单号:  ${v.workOrder}`,
                                    `物料编号:  ${v.materialCode}`,
                                    `物料名称:  ${v.materialName}`,
                                ].join('\n');
                                qrcode.makeCode(content)
                            })
                        })
                    }
                })
            },