vue中实现动态生成二维码的方法
最近项目中有个裂变分享的需求，需要在页面中根据分享人的身份动态生成二维码图片放置在页面中，所以研究了一下这个功能的实现，同时把实现过程记录如下：
1.引入二维码生成模块
npminstallqrcodejs2--save
注意：此处安装qrcodejs2，安装依赖后可在main方法中进行全局引用设置，也可单独某个页面中进行引用设置。
2.引入使用
importQRCodefrom'qrcodejs2';
备注：在main中设置全局可使用Vue.prototype.qrCode
3.页面展示与配置
3.1html代码
放置生成二维码图片的容器
3.2js代码
js代码有三种放入位置
第一种：放置在mounted生命周期函数中
mounted(){
newQRCode(this.$refs.qrCodeDiv,{
text:"https://www.baidu.com",
width:200,
height:200,
colorDark:"#333333",//二维码颜色
colorLight:"#ffffff",//二维码背景色
correctLevel:QRCode.CorrectLevel.L//容错率，L/M/H
});
}
第二种：放置在created生命周期函数中，但是注意一定要放在this.$nextTick的回掉函数中
created(){
this.$nextTick(function(){
newQRCode(this.$refs.qrCodeDiv,{
text:"https://www.baidu.com",
width:200,
height:200,
colorDark:"#333333",//二维码颜色
colorLight:"#ffffff",//二维码背景色
correctLevel:QRCode.CorrectLevel.L//容错率，L/M/H
});
});
},
第三种方式：放置在methods属性中的指定方法中，并且在mouted生命周期函数中调用这个方法（最好也把这个方法的调用放置在this.$nextTick的回掉函数中）
mounted:function(){
this.$nextTick(function(){
this.bindQRCode();
})
},
methods:{
bindQRCode:function(){
newQRCode(this.$refs.qrCodeDiv,{
text:'https://www.baidu.com',
width:200,
height:200,
colorDark:"#333333",//二维码颜色
colorLight:"#ffffff",//二维码背景色
correctLevel:QRCode.CorrectLevel.L//容错率，L/M/H
})
}
}
4.注意点
1.显示内容(text所指向内容)必须是UTF-8编码格式。
2.生成二维码js必须在this.$nextTick(function(){调用})或setTimeout(()=>{调用},100)，是为了确保二维码容器DOM已经存在。
3.为了防止重复生成二维码，使用置空进行控制：document.getElementById("qrcode").innerHTML="";
到此这篇关于vue中实现动态生成二维码的方法的文章就介绍到这了,更多相关vue动态生成二维码内容请搜素毛票票以前的文章或下面相关文章，希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。