解决vue项目使用element的Dialog组件生成二维码的系列问题

本人在vue中需要使用到二维码模块，自己寻找资料编程的时候遇到一些问题

效果为点击按钮生成弹框显示二维码，这里使用element的Dialog组件??Dialog组件

二维码生成代码

script中的js代码

varqrcode=newQRCode('qrcode',{text:this.playUrl,//需要生成二维码的内容width:256,height:256,colorDark:'#000000',colorLight:'#ffffff',correctLevel:QRCode.CorrectLevel.H});

div标签中的代码

<divclass="qrcode"id="qrcode"></div>

以上的简单代码可实现二维码的生成，本人只浅学了一些基础，就不在过多阐述

详情可参考?QRcode官方文档

解决多次点击重复生成二维码问题

本人在多次点击按钮发现二维码重复生成到div标签上，类似下图效果

本人继续对代码进行了修改，增加了一个函数

//解决多次点击重复生成二维码问题showQRCodeDialog(){letqrcodeEL=document.getElementById("qrcode");letqrcode=newQRCode(qrcodeEL);document.getElementById("qrcode").innerHTML="";this.GetQRcode()},//生成二维码GetQRcode(){varqrcode=newQRCode('qrcode',{text:this.playUrl,//需要生成二维码的内容width:256,height:256,colorDark:'#000000',colorLight:'#ffffff',correctLevel:QRCode.CorrectLevel.H});}

核心代码是?????document.getElementById("qrcode").innerHTML="";

作用就是清空原先生成的二维码，从而防止二维码的叠加生成

解决第一次点击生成二维码失败，并且控制台报错问题

当再次进行测试之后发现新的问题，首次点击按钮无二维码生成，控制台报错如下

原因是使用Dialog组件默认显示状态为false，按钮点击后状态变为true

而显示二维码的div标签放在Dialog组件中，第一次点击获取不到该div的信息，所以报错

解决js报错代码使用this.$nextTickshowQRCodeDialog(){this.$nextTick(()=>{letqrcodeEL=document.getElementById("qrcode");letqrcode=newQRCode(qrcodeEL);document.getElementById("qrcode").innerHTML="";this.GetQRcode()})},

this.$nextTick的作用是，当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来

[]()修改后问题解决

附上修改后的函数代码以及Dialog中的代码

//解决多次点击重复生成二维码问题showQRCodeDialog(){this.QRcodeDialogVisible=truethis.$nextTick(()=>{letqrcodeEL=document.getElementById("qrcode");letqrcode=newQRCode(qrcodeEL);document.getElementById("qrcode").innerHTML="";this.GetQRcode()})},//生成二维码GetQRcode(){varqrcode=newQRCode('qrcode',{text:this.playUrl,//需要生成二维码的内容width:256,height:256,colorDark:'#000000',colorLight:'#ffffff',correctLevel:QRCode.CorrectLevel.H});}<el-dialogtitle="微信扫码进入直播间":visible.sync="QRcodeDialogVisible"width="30%"align="center"><divclass="qrcode"id="qrcode"></div></el-dialog>

本人是初入前端的小菜鸟，文章如有错误，恳请大家提出问题，本人不胜感激

文章对大家有帮助的话，大家也别忘了点个赞，未来一起努力???长路漫漫，道阻且长

原文：https://juejin.cn/post/7098337368075141150

您可能感兴趣问答

Collapsible

热门标签

热点问答