13518219792
今天就跟大家聊聊有关使用vue怎么动态生成一个二维码，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、网站空间、营销软件、网站建设、茂名网站维护、网站推广。1.引入二维码生成模块
npm install qrcodejs2 --save
注意：此处安装qrcodejs2，安装依赖后可在main方法中进行全局引用设置，也可单独某个页面中进行引用设置。
2.引入使用
import QRCode from 'qrcodejs2';
备注：在main中设置全局可使用 Vue.prototype.qrCode
3.页面展示与配置
3.1 html代码
放置生成二维码图片的容器
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怎么动态生成一个二维码有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。
