最近專案中有個裂變分享的需求，需要在頁面中根據分享人的身份動態生成二維碼圖片放置在頁面中，所以研究了一下這個功能的實現，同時把實現過程記錄如下：

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",//二維碼顏色
  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',//二維碼背景色
  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 動態生成二維碼內容請搜素我們以前的文章或下面相關文章，希望大家以後多多支援我們！