vue项目生成二维码（并避免重复生成）

最新推荐文章于 2024-09-02 11:37:00 发布

huang_jimei

最新推荐文章于 2024-09-02 11:37:00 发布

阅读量423

点赞数 3

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/huang_jimei/article/details/137860799

版权

一、需求，按连接（带参数）生成二维码
二、步骤
1、先安装插件

	npm install qrcodejs2 --save-dev

2、在需要用到二维码的页面引入

import QRCode from 'qrcodejs2';

3、主要代码

<div id="qrCode2" ref="qrCodeDiv" class="ma"></div>

       openMa() {
				// 每次生成前清空二维码，即移除已生成的图像和canvas，避免重复
				const cleardom = document.querySelectorAll('#qrCode2 canvas,#qrCode2 img')
				Array.from(cleardom).forEach((item) => {
					item.remove()
				})
				//下面是生成二维码的链接
				var urls = 'url?type=1' + '&id=' + this.myclaim.id;
				console.log('url+++', urls);
				//如果下面的settimeout不行，就用下面这一段
				// this.$nextTick(function() {
				// 	new QRCode('qrCode2', {
				// 		text: urls,
				// 		width: 128,
				// 		height: 128,
				// 		colorDark: "#333333", //二维码颜色
				// 		colorLight: "#ffffff", //二维码背景色
				// 		correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
				// 	})
				// })
				setTimeout(() => {
					let qrcode = new QRCode("qrCode2", {
						width: 180, // 二维码宽度，单位像素
						height: 180, // 二维码高度，单位像素
						colorDark: "#000000",
						colorLight: "#ffffff",
						correctLevel: 3,// 重点是这个值解
						text: urls // 生成二维码的链接
					});
				}, 200)


			},