动态创建二维码相关问题

1. 动态生成二维码

先在终端中安装

npm install qrcodejs2

然后在要生成二维码的页面中调用

import QRCode from 'qrcodejs2'

然后在要展示二维码的结构处，为结构添加class属性

<div class="qrcode" ref="qrCodeUrl"></div>

然后在script标签中添加方法

creatQrCode() { // 创建一个实例对象
	var  qrcode = new QRCode(this.$refs.qrCodeUrl, {
	text: 'https://www.qtshe.com',
	width: 100,height: 100,colorDark: '#000000',colorLight: '#ffffff',     
	correctLevel: QRCode.CorrectLevel.H 
    })
},  

到此为止，二维码的功能代码已经写完，但是最后一个方法是需要调用的，否则就没有效果。

如果是在页面点击进来就要显示的话，就去mounted(){}钩子里面调用一下this.creatQrCode();，

如果是点击某个按钮等触发事件出现二维码的，只要在触发事件中绑定该方法即可。

2.在二级弹窗中显示二维码

①如果使用对话框显示二维码，有时会由于html元素还没有创建，导致生成二维码时报对象不存在或者appenchild方法未定义的错误。这时可以使用nextTick来处理。

showQRCode(){      
    this.$nextTick(()=>{/* 使用了nextTick之后，会在生成DOM元素之后绑定*/  
        var qrcode = new QRCode(this.$refs.qrcodeContainer, {              
            text: 'https://wallimn.iteye.com',              
            width: 100,              
            height: 100,              
            colorDark: '#000000',              
            colorLight: '#ffffff',              
            correctLevel: QRCode.CorrectLevel.H          
        })      }  }  

②定义完方法后，只在点击出现对话框的时候，调用showQRCode的方法即可；可以不用在mounted里面进行调用。

③多次点击会出现多个二维码，这个时候要设置this.$refs.qrCodeUrl.innerHTML='';，保证每一次点击重新生成二维码之前，都已经将之前的清除了；

④在跳转前的页面设置的地址如下 text:"'/qrcode/' + id " , 到了跳转到的页面，可以通过this.$route.params.id 获取到url中的id值

动态创建二维码相关问题