vue.js中使用qrcode生成二维码

一、安装包
npm install qrcodejs2 --save

二、应用

<!--写在vue对应的元素里-->
<div class="qrcode" ref="qrcodeContainer"></div>

<script>
import QRCode from 'qrcodejs2'
// vue对象的一个method
showQRCode(){
	var qrcode = new QRCode(this.$refs.qrcodeContainer, {
	    text: 'https://wallimn.iteye.com',
	    width: 100,
	    height: 100,
	    colorDark: '#000000',
	    colorLight: '#ffffff',
	    correctLevel: QRCode.CorrectLevel.H
	});
}
</script>

三、注意
如果使用对话框显示二维码，有时会由于html元素还没有创建，导致生成二维码时报对象不存在的错误。这时可以使用nextTick来处理。

showQRCode(){
	this.$nextTick(()=>{
		var qrcode = new QRCode(this.$refs.qrcodeContainer, {
		    text: 'https://wallimn.iteye.com',
		    width: 100,
		    height: 100,
		    colorDark: '#000000',
		    colorLight: '#ffffff',
		    correctLevel: QRCode.CorrectLevel.H
		})
	}
}