1. 安裝二維碼模塊
? ? ? ? npm i QRCode --save?
2.安裝成功會(huì)在package.json中增加一下內(nèi)容
“qrcode”:"1.2.2"
3.當(dāng)前頁(yè)導(dǎo)入qrcode
import QRCode from "qrcode";
4.vue代碼
<template>
<div class="qrcode">
? ? ? ? ? <img :src="qrcode" alt="">? //這里的src的值就是上面生成的二維碼的地址
? ? ? ? ? <div><p>請(qǐng)長(zhǎng)按上方二維碼識(shí)別...</p></div> //這里的css樣式我就不寫(xiě)出來(lái)了
? ? ? </div>? ?
</template>
export default {
? ? name: "qrcode",
data(){
? ? ? ? return {
? ? ? ? url: "http://www.baidu.com"? //識(shí)別二維碼后跳轉(zhuǎn)的地址
? ? ? ? ? ? qrcode:'' //存儲(chǔ)二維碼地址
? ? ? ? }
? },
mounted(){
QRCode.toDataURL(this.url,{?
//這個(gè)this.url就是你掃碼后要跳轉(zhuǎn)的地址
//或者是長(zhǎng)按識(shí)別跳轉(zhuǎn)的地址（兩者是一樣的）视搏，這個(gè)url是全局變量
//這里也可以是文本內(nèi)容东亦，掃描后會(huì)彈出一個(gè)空白界面文本
? ? ? ? version: 7,? ? //這個(gè)是版本號(hào)旋廷，
? ? ? ? errorCorrectionLevel: 'Q', //這個(gè)是容錯(cuò)率,(建議選較低)更高的級(jí)別可以識(shí)別
? ? ? ? //更模糊的二維碼，但會(huì)降低二維碼的容量
? ? ? ? width: 280,? ? ? ?
? ? ? ? height: 280,? //設(shè)置二維碼圖片大小
? ? ? ? margin: 0,?
? ? ? })
? ? ? ? .then(url => {? /這個(gè)url是二維碼生成地址戏自，也就是相當(dāng)于圖片地址
? ? ? ? ? console.log(url);
? ? ? ? ? this.qrcode = url //這個(gè)是vue實(shí)例全局的變量爆侣，賦值給他熄云。后面會(huì)用在img的src屬性上
? ? ? ? })
? ? ? ? .catch(err => {
? ? ? ? console.error(err)? //這里看不懂的話去看一下Promise（then, catch）
? ? ? })
}
}
