vue+QRCode生成二维码+el-dialog弹出显示

最新推荐文章于 2025-04-23 11:34:29 发布

蟹老板学编程

最新推荐文章于 2025-04-23 11:34:29 发布

阅读量1.0k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_50917325/article/details/133039139

版权

文章介绍了如何在Vue项目中安装并使用qrcode插件创建二维码，以及遇到的初次加载bug和重复生成问题的解决方案，通过$nextTick和清除上一个二维码实现正确显示。

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

1.首先，安装qrcode插件，前端控制台中输入：

cnpm install qrcodejs2 --save
//或者
npm install qrcodejs2 --save

2.js中导入包

import QRCode from 'qrcodejs2'

3.js中添加方法creatQrCode，可自己命名

creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: '', // 需要转换为二维码的内容，这里自己设置
            width: 220,
            height: 220,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
    },

4.定义弹窗判定字段

 data(){
    return{

      qrcodeShow: false,

    }
  },

5.el-dialog中添加上存放图片的容器

    <el-dialog v-model = "qrcodeShow" width="270px" title="二维码" center>
      <div class="qrcode" ref="qrCodeUrl"></div>
    </el-dialog>

6.建立一个button，点击button显示弹窗

 <el-button @click="creatQrCode()" style="width:63px;">获取二维码</el-button>

问题：此时点击button就可以弹出二维码了，但是测试发现，第一次点击会出现个bug，没有二维码生成这是因为dialog的qrcodeShow初始状态为false，点击后变为true，而显示二位吗的div使放在Dialog组件中的，第一次点击获取不到div的信息，所以就报了个错。

并且，重复点击会出现多个二维码排列下来，这个是因为上一个二维码没有清除的原因。

这里我使用$nextTick来解决上面的bug问题，并且在获取新的二维码之前清除一下上一个二维码，这里我使用document.getElementById("qrcode").innerHTML = "" 来解决；上代码

showDialog() {
      this.qrcodeShow = true;
        this.$nextTick(()=>{
            let qrcodeI = document.getElementById("qrcode");
            let qrcode = new QRCode(qrcodeI);  
            document.getElementById("qrcode").innerHTML = "";
            this.creatQrCode()
        })  
    },

此时，bug都全部解决啦！

本人小白一个，希望能帮助到大家！