vue使用qrcode插件

一、只展示一张图的效果

一、效果图：

二、具体代码：

1、安装

npm i qrcodejs2 --save

2、在页面使用

2.1.html

<div id="qrcode" class="erweima" ref="qrcode"></div>

2.2.js

<script type="text/javascript">
	//vue使用qrcode插件将后端返回的二维码字符串生成二维码
	import QRCode from 'qrcodejs2'
	export default {
		data() {
			return {
				qrcode : '',
				qr: '',
			}
		},
		mounted() {
			this.MyCode()
		},
		methods: {
			// 我的数据码
			MyCode() {
				this.$api.POSTTwo(this.$url.MyCode + localStorage.getItem('token'), '', (res) => {
					this.password = res.Data;
					// this.qrcode = res.Data;
					//具体代码
					this.qr = new QRCode('qrcode', {
						text: 'userCode=' + this.password,
						width: 160,
						height: 160,
						colorDark: "#000000",
						colorLight: "#ffffff",
						correctLevel : QRCode.CorrectLevel.H
					})
				})
			},
		}
	}
</script>

二、列表循环展示的二维码（每条数据下都有一个二维码）

1.效果图

2.具体代码

①安装：

npm i qrcodejs2 --save

②页面引入

//vue使用qrcode插件将后端返回的二维码字符串生成二维码
import QRCode from 'qrcodejs2'

③template 中的展示

<el-form-item label="二维码:" v-if="dialogStatus == 'seeDetail'">
	<div id="qrcode" class="qrcode" ref="qrCodeUrl"></div>
	<!--下载功能-->
	<el-button style="margin-top: 20px;" size="mini"
	    @click="downloadQRCode(temp.LabelName,temp.EndTime)">二维码下载</el-button>
	    
</el-form-item>

④js代码：

// 点击用户详情时
seeDetail(row) {
	this.dialogStatus = 'seeDetail'
	console.log('打印row下的二维码字符串', row.LabelCode)

	//防止生成多个。（每次生成之前，把上一次的DOM节点的二维码删除掉，然后再添加新生成的二维码）
	this.$nextTick(function() {
		let dom = document.getElementById("qrcode");
		while (dom.firstChild) {
			dom.removeChild(dom.firstChild);
		}
		//调用字符串生成二维码的方法
		this.creatQrCode(row.LabelCode)
	});
},

//字符串生成二维码的方法
creatQrCode(LabelCode) {
	console.log('获取到的code', LabelCode)
	var qrcode = new QRCode(this.$refs.qrCodeUrl, {
		text: LabelCode, // 需要转换为二维码的内容
		width: 100,
		height: 100,
		colorDark: '#000000',
		colorLight: '#ffffff',
		correctLevel: QRCode.CorrectLevel.H
	})
},

//下载二维码图片
downloadQRCode(LabelName, EndTime) {
	let myCanvas = document.getElementById("qrcode").getElementsByTagName("canvas");
	let a = document.createElement("a");
	a.href = myCanvas[0].toDataURL("image/png");
	a.download = LabelName+'--'+EndTime; //图片名（自动匹配标签名称+标签截止时间）
	a.click();
	// console.log('打印下载', LabelName, EndTime)
},