使用vue怎么动态生成一个二维码-创新互联

npm install qrcodejs2 --save

import QRCode from 'qrcodejs2';

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怎么动态生成一个二维码有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注创新互联行业资讯频道，感谢大家的支持。