接到需求,在一个管理系统上,需要将该条信息在点击相关操作的时候生成一个二维码并且扫描之后跳转相应地址
在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, 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 } },