vue 动态生成二维码并显示在页面上实时刷新

最新推荐文章于 2025-04-04 23:39:01 发布

置顶贺喜0

最新推荐文章于 2025-04-04 23:39:01 发布

阅读量4.8k

点赞数

分类专栏： vue 实时刷新页面 $nextTick 文章标签： vue.js css javascript html html5

本文链接：https://blog.csdn.net/hepengtao0001/article/details/108170914

版权

vue 同时被 3 个专栏收录

1 篇文章

订阅专栏

实时刷新页面

1 篇文章

订阅专栏

$nextTick

1 篇文章

订阅专栏

本文介绍如何使用qrcodejs2插件动态生成二维码，并将其显示在页面上。通过Vue.js实现数据变化后二维码的实时刷新，适用于产品信息批量转换为二维码的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态生成二维码并显示在页面上动态刷新

业务场景：后端传回来一组数据，数据内容是一个数组中有n个对象，对象的其中一个属性是一串字符串类型的数字，现在需要将这个数字都转为二维码，并显示在页面上。
效果：
在这里插入图片描述

字符串转二维码需要用到 qrcodejs2插件
1.安装插件 npm install qrcodejs2 --save
2.在javascript中引入 import QRCode from ‘qrcodejs2’`
3.Html中

<div class="box-card" v-for="(item,index) in data" :key="index" >
<!--展示二维码的容器-->
<div class="qrcode" :id="item.infoData.fBarCode"></div>
</div>

注：中间的div class=“qrcode” 是转换为二维码的div容器，Id必须跟下方的转换函数中对应，id是动态的所以用 :id
4.数据内容格式：

infoDataArr:[
            {
              infoData:{
                fProductName:'产品1',
                fProductModel:'型号1',
                fFinishedStatus:'未完工',
                fBarCode:'123456'
              }
              },
              {
                infoData:{
                  fProductName:'产品2',
                  fProductModel:'型号2',
                  fFinishedStatus:'未完工',
                  fBarCode:'123456677'
                }
              },
              {
                infoData:{
                  fProductName:'产品3',
                  fProductModel:'型号3',
                  fFinishedStatus:'未完工',
                  fBarCode:'123123'
                }
              }
          ],

5.调用生成图片函数
$nextTick()函数在修改数据之后使用这个方法，立即更新dom

mounted() {
       this.mutationCallBack()
    }
methods: {
      mutationCallBack(){
        let _this = this
         //nextTick函数将回调延迟到下次 DOM 更新循环之后执行
        _this.$nextTick(()=>{
              for(let i = 0;i<_this.infoDataArr.length;i++){
                _this.createQrCode(_this.infoDataArr[i].infoData.fBarCode)
              }
            })
      },
createQrCode(qrstr){
    //创建二维码
     let qrcodeElementArr = document.getElementsByClassName(qrstr)
     let qrcode = new QRCode(qrstr,{
          width:60,
          height:60,
          text:qrstr
        })
      }
}