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()
    })
}