vue中实现动态生成二维码的方法
更新时间：2020年02月21日 09:47:07 作者：猫吃素
这篇文章主要介绍了vue中实现动态生成二维码的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
最近项目中有个裂变分享的需求，需要在页面中根据分享人的身份动态生成二维码图片放置在页面中，所以研究了一下这个功能的实现，同时把实现过程记录如下：
1.引入二维码生成模块
npm install qrcodejs2 --save
注意：此处安装qrcodejs2，安装依赖后可在main方法中进行全局引用设置，也可单独某个页面中进行引用设置。
2.引入使用
import QRCode from 'qrcodejs2';
备注：在main中设置全局可使用 Vue.prototype.qrCode
3.页面展示与配置
3.1 html代码
放置生成二维码图片的容器
<div id="qrCode" ref="qrCodeDiv"></div>
3.2 js代码
js代码有三种放入位置
第一种：放置在mounted生命周期函数中
mounted() {
new QRCode(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() {
new QRCode(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 () {
new QRCode(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 动态生成二维码内容请搜素脚本之家以前的文章或下面相关文章，希望大家以后多多支持脚本之家！
相关文章
vue如何解决sass-loader的版本过高导致的编译错误
这篇文章主要介绍了vue如何解决sass-loader的版本过高导致的编译错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
PDF文件在线预览的功能相信大家都是有遇到过的,下面这篇文章主要给大家介绍了关于vue3如何实现PDF文件在线预览功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了vue项目打包:修改dist文件名方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了vue router带参数页面刷新或回退参数消失的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
解决vue.js出现Vue.js not detected错误的问题
这篇文章主要介绍了解决vue.js出现Vue.js not detected错误的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了Vue动态设置img的src不生效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
在 Vue 页面中实现文字朗读（Text-to-Speech,TTS）可以通过浏览器的 Web Speech API 实现,下面小编就来和大家简单讲讲具体实现步骤吧2025-02-02
本篇文章主要介绍了解决Vue2.0自带浏览器里无法打开的原因（兼容处理），非常具有实用价值，需要的朋友可以参考下2017-07-07
本文主要介绍了Vue实现侧边导航栏于Tab页关联的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。这篇文章主要介绍了Vue Router去掉url中默认的锚点#,需要的朋友可以参考下2018-08-08
最新评论