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

vue+qrcode2批量生成二维码

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
              })
            })
        })       
      },

http://www.dtcms.com/a/40447.html

相关文章:

  • 【Python爬虫(74)】用Python爬虫解锁法律条文数据的宝库
  • C语言 --- 经典习题1
  • 使用 C# 以api的形式调用 DeepSeek
  • 千峰React:案例一
  • IDEA 使用codeGPT+deepseek
  • 绕过【information_schema】,【order by】过滤
  • git 国内源
  • Mobaxterm服务器常用命令(持续更新)
  • 001 Kafka入门及安装
  • 【快速入门 LVGL】-- 1、STM32 工程移植 LVGL
  • IO 和 NIO 有什么区别?
  • 网页无法加载的常见原因及解决方法
  • 如果更换ip地址会怎么样?网络ip地址怎么更换
  • Spring 源码硬核解析系列专题(八):Spring Security 的认证与授权源码解析
  • Unity3D 实现骨骼动画的 GPU Skinning 详解
  • 大连本地知识库的搭建--数据收集与预处理_01
  • 【Project】基于Prometheus监控docker平台
  • Vue组件:从使用到原理的深度解析
  • ubuntu:桌面版磁盘合并扩容
  • Nuxt.js 3【详解】服务器 Server
  • 异步fifo学习
  • 解决前端计算的浮点精度问题
  • lowagie(itext)老版本手绘PDF,包含页码、水印、图片、复选框、复杂行列合并、行高设置等。
  • express(node ORM) 使用 Winston 记录日志 及数据库保存日志
  • DeepSeek在金融银行的应用方案
  • Unity基础——资源导出分享为Unity Package
  • 腾讯 DeepSeek-R1 × Vue3 使用体验报告
  • 深入浅出Spring Boot框架:从入门到精通
  • MySQL——创建与管理视图
  • ffmpeg-rockchip RK3588 armbian小盒子上编译rk硬件加速