在Vue中使用QRCode生成二維碼

首先安裝依賴包

npm/cnpm install --save qrcode

下面是qrcode.vue文件
在script標籤導入qrcode

import QRCode from "qrcode";

我一般是寫在mounted裏面，如果需要什麼條件除外

export default {
    name: "qrcode",
	data(){
        return {
        	url: "http://www.baidu.com"  //識別二維碼後跳轉的地址
            qrcode:'' //存儲二維碼地址
        }
   	 },
	mounted(){

		QRCode.toDataURL(this.url,{  
									 //這個this.url就是你掃碼後要跳轉的地址
									//或者是長按識別跳轉的地址（兩者是一樣的），這個url是全局變量
									//這裏也可以是文本內容，掃描後會彈出一個空白界面文本
        version: 7,    //這個是版本號，
        errorCorrectionLevel: 'Q', 	//這個是容錯率,(建議選較低)更高的級別可以識別
        							//更模糊的二維碼，但會降低二維碼的容量
        width: 280,        
        height: 280,   //設置二維碼圖片大小
        margin: 0,  
      })
        .then(url => {   /這個url是二維碼生成地址，也就是相當於圖片地址
          console.log(url);
          this.qrcode = url //這個是vue實例全局的變量，賦值給他。後面會用在img的src屬性上
        })
        .catch(err => {
        console.error(err)  //這裏看不懂的話去看一下Promise（then, catch）
      })
	}
}

接下來就是template模板了

<template>
 　　<div class="qrcode">
          <img :src="qrcode" alt="">  //這裏的src的值就是上面生成的二維碼的地址
          <div><p>請長按上方二維碼識別...</p></div> //這裏的css樣式我就不寫出來了
      </div>     
</template>

好了這樣就行了，下面效果圖

其他配置詳見官方文檔
QRCode

我是因爲踩了qrcodejs2的坑，後面改成用qrcode，qrcodejs2跟qrcode不一樣，qrcodejs2是直接生成img標籤二維碼圖片，不是src地址，生成的img標籤有一個屬性alt=“scan me”。這個alt屬性有一個bug，我用我手機測生成的二維碼界面沒問題，但是我同事測的就會有一個問題就是關於alt屬性。他的界面有二維碼，但是右邊還有一個不可見縮略的小圖片以及scan me 文字，最重要的是長按不會彈出識別二維碼。不排除是因爲網絡的原因。
如果想使用這種方式請參考
https://blog.csdn.net/qq_43138078/article/details/90510637