vue项目生成二维码(并避免重复生成)

一、需求,按连接(带参数)生成二维码

二、步骤

1、先安装插件

javascript 复制代码
	npm install qrcodejs2 --save-dev

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

javascript 复制代码
import QRCode from 'qrcodejs2';

3、主要代码

javascript 复制代码
<div id="qrCode2" ref="qrCodeDiv" class="ma"></div>
javascript 复制代码
       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)


			},
相关推荐
Jagger_3 分钟前
敏捷开发流程-精简版
前端·后端
FIN666834 分钟前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing35 分钟前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女12735 分钟前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿37 分钟前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN666838 分钟前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy38 分钟前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴1 小时前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc1 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构
Queen_sy1 小时前
vue3 el-date-picker 日期选择器校验规则-选择日期范围不能超过七天
javascript·vue.js·elementui