qrCode -- 生成二维码

下载依赖

	npm install qrcodejs2 --save-dev

实例：（这里只提供容纳二维码的容器，不用画布）

	<template>
		<div >
			<div class="displayCode2" id="qrcode" ref="qrcode" style="border:1px solid red" @click.stop="gen"></div>
		</div>
	</template>

点击这个容器的时候触发生成的动作

	gen(){
    console.log("生成")
	    let qrcode =  new QRCode('qrcode',{
		    width: 200, // 设置宽度，单位像素
		    height: 200, // 设置高度，单位像素
		    text: 'http://192.168.0.118:6080'// 设置二维码内容或跳转地址
	    })
    },	

效果：

还可以修改生成的二维码的颜色：

this.qrcode =  new QRCode('qrcode',{
    width: 200, // 设置宽度，单位像素
    height: 200, // 设置高度，单位像素
    colorDark : 'brown',
    colorLight : 'pink',
    text: 'http://192.168.0.118:6080'// 设置二维码内容或跳转地址
})

需要生成新的二维码内容的时候：

	//第一次点击执行的时候
	if(!this.qrcode){
		this.qrcode =  new QRCode('qrcode',{
	        width: 200, // 设置宽度，单位像素
	        height: 200, // 设置高度，单位像素
	        colorDark : 'brown',
	        colorLight : 'pink',
	        text: 'http://192.168.0.118:6080'// 设置二维码内容或跳转地址
	        //前景色与背景色的参数没怎么操作
	        background : "#ffffff",//背景颜色  
        	foreground : "#000000",//前景颜色
        	src : '../img/pm.jpg'  //二维码中间的图片
	    })
	}else{
		//第二次点击的时候执行
    	this.qrcode.makeCode('新的内容')
	}

反复生成就会这样：

所以如果有反复操作或者更新二维码的需求，需要先清除节点再进行生成：

	let qrcodeNode = document.getElementById('qrcode');
    if(qrcodeNode === undefined || qrcodeNode === null){return }
    var childs = qrcodeNode.childNodes; 
    for(var i = childs .length - 1; i >= 0; i--) {
        qrcodeNode.removeChild(childs[i]);
    }	

qrcode 提供了 clear的方法,但是限制如下：