vue使用js將鏈接轉換為二維碼

1、安裝qrcodejs2包

yarn add qrcodejs2 或 npm install qrcodejs2 --save

2、頁面中引入

import QRCode from 'qrcodejs2'

components:{
    QRCode
}

3、使用

<button @click="getQrcode">生成二維碼</button>

//必須在執行轉化之前渲染出此dom層元素，否則轉化時獲取不到元素會報錯：appendChild  null
<div id="qrcodeDom" ></div>


//鏈接生成二維碼 Api
transQrcode(){
    let qrcode=new QRCode('qrcodeDom',{
        width: 160,
        height:160,
        text: `https://m.demo.com/noticeGet/${this.roomid}`,  //需要轉換的鏈接
    // render: 'canvas' ,   // 設置渲染方式（有兩種方式 table和canvas，默認是canvas）
    // background: '#f0f',   // 背景色
    // foreground: '#ff0'    // 前景色
    })
},

//點擊開始進行轉化
getQrcode(){
    document.getElementById("qrcodeDom").innerHTML=''  //先清空之前生成的二維碼
    this.$nextTick(()=>{
        this.transQrcode()
    })
}