VUE/jQuery生成二維碼掃描跳轉地址

接到需求，在一個管理系統上，需要將該條信息在點擊相關操作的時候生成一個二維碼並且掃描之后跳轉相應地址

在vue中的話，首先需要利用npm命令下載一個插件到package.json中，命令：npm install --save qrcode

"qrcode": "^1.4.4",

"qrcodejs2": "0.0.2",

就是這個東西，然后引入到頁面：import QRCode from 'qrcodejs2'

在界面上的數據

  <div class="special" v-show="key" >  
       <div id="qrCode" ref="qrCodeDiv"></div>
    </div>

注意，如果控制二維碼的顯示隱藏一定要是v-show，如果是v-if那么在進行new創建的時候，由於沒有頁面結構，項目會報錯

js代碼

 look(index,row){
            console.log(row.jcgId)
            if(this.key==false){
              this.key=true
              
            if(this.testa!=null){//清除new的圖示
              this.testa.clear()
            }else{
            this.testa = new QRCode(this.$refs.qrCodeDiv, {
                text: 'http://yun.51quyd.com/addPlote.html?jcgId='+row.jcgId,
                width: 200,
                height: 200,
                colorDark: "#333333", //二維碼顏色
                colorLight: "#ffffff", //二維碼背景色
                correctLevel: QRCode.CorrectLevel.L//容錯率，L/M/H
                   })
            }
              this.testa.clear() //清除二維碼 
              this.testa.makeCode('http://yun.51quyd.com/addPlote.html?jcgId='+row.jcgId) //生成另一個新的二維碼
            }else{
              this.key=false
            }
    },