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

一、需求,按连接(带参数)生成二维码
二、步骤
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)


			},
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值