当前位置：首页 > news >正文

vue+qrcode2批量生成二维码

news 来源：原创 2025/5/23 15:58:28

1、安装qrcodejs2
npm install --save qrcodejs2
2、引用
import QRCode from "qrcodejs2";
3、html代码

<div  v-for="item in list" :key="item.id" class="itemDiv">
    <p class="qrCode-img">
      <span class="img" :id="'qrCode'+item.id" ref="qrCodeDiv"></span>
       <span>{{item.code}}</span>
     </p>
</div>

4、JS代码

      bindQRCode: function () {
        const that = this
        this.$nextTick(function () {
            this.printList.forEach((item,index)=>{
              that.$refs.qrCodeDiv[index].innerHTML="";//这一步是防止重复生成二维码
              let qrcode = new QRCode(that.$refs.qrCodeDiv[index], {
                text: item.code,
                width: 90,
                height: 90,
                colorDark: "#333333", //二维码颜色
                colorLight: "#ffffff", //二维码背景色
                correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
              })
            })
        })       
      },