Vue中將網址、動態網址轉為二維碼

1、 首先需要安裝相關的依賴包

npm install qrcodejs2 --save
或者
npm install qrcode2 --save

這里選擇第二種方式進行安裝，如圖：

 

 

2、template中往需要展示的地方寫入

<div id="qrcode" ref="qrcode"></div>

如圖： class是自定義樣式，不是必寫參數。

 

 

3、script的methods中寫入函數

qrcodeScan() { // 生成二維碼
      findShopInfo().then(res => {
      new QRCode(document.getElementById('qrcode'), {
          text: res.data.accessUrl, // 二維碼地址
          width: 100, // 二維碼寬度
          height: 100, // 二維碼高度
          correctLevel: QRCode.CorrectLevel.H // 二維碼容錯級別 H M L
        })
      })
    }

二維碼地址：res.data.accessUrl，是后台提供的。如果是定死的鏈接網址，可以將改text

text:'https://www.cnblogs.com', // 二維碼地址

 

4、在mounted中調用這個二維碼函數就完成了二維碼展示

mounted() {
    this.qrcodeScan()
  },

 

 

本人實現效果如下圖：

 

希望這篇文章可以幫到你！ 

 

本文參考博客鏈接：https://blog.csdn.net/liurong1028/article/details/84849813  、 https://blog.csdn.net/xuaner8786/article/details/82250830