快捷導(dǎo)航

vue中實現(xiàn)動態(tài)生成二維碼的方法

更新時間：2020年02月21日 09:47:07 作者：貓吃素

這篇文章主要介紹了vue中實現(xiàn)動態(tài)生成二維碼的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

1.引入二維碼生成模塊

npm install qrcodejs2 --save

注意：此處安裝qrcodejs2，安裝依賴后可在main方法中進(jìn)行全局引用設(shè)置，也可單獨(dú)某個頁面中進(jìn)行引用設(shè)置。

2.引入使用

import QRCode from 'qrcodejs2';

備注：在main中設(shè)置全局可使用 Vue.prototype.qrCode

3.頁面展示與配置

3.1 html代碼

放置生成二維碼圖片的容器

<div id="qrCode" ref="qrCodeDiv"></div>

3.2 js代碼

js代碼有三種放入位置

第一種：放置在mounted生命周期函數(shù)中

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生命周期函數(shù)中，但是注意一定要放在this.$nextTick的回掉函數(shù)中

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生命周期函數(shù)中調(diào)用這個方法（最好也把這個方法的調(diào)用放置在this.$nextTick的回掉函數(shù)中）

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.顯示內(nèi)容(text所指向內(nèi)容)必須是UTF-8編碼格式。

2.生成二維碼js必須在 this.$nextTick(function(){調(diào)用})或setTimeout(() => { 調(diào)用 }, 100)，是為了確保二維碼容器DOM已經(jīng)存在。

3.為了防止重復(fù)生成二維碼，使用置空進(jìn)行控制：document.getElementById("qrcode").innerHTML = "";

到此這篇關(guān)于vue中實現(xiàn)動態(tài)生成二維碼的方法的文章就介紹到這了,更多相關(guān)vue 動態(tài)生成二維碼內(nèi)容請搜素腳本之家以前的文章或下面相關(guān)文章，希望大家以后多多支持腳本之家！

您可能感興趣的文章: