vue用qrcodejs2生成二维码,解决多个二维码追加的问题
vue使用qrcodejs2生成二维码
1、安装qrcodejs2
npm install qrcodejs2
2、代码
//导入组件
import QRCode from 'qrcodejs2' //这个div用来展现二维码
<div id="twoImageId"></div> //生成二维码的方法
generateQRCode(classId, value) {
new QRCode(document.querySelector(classId), {
text: value,
width: 180,
height: 180,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
})
}, this.generateQRCode("#twoImageId",'这是需要生成二维码的文本');
这样就能生成二维码,但是窗口关闭在打开,重新生成的二维码,会追加到之前生成的二维码并没有覆盖如下图:
3、解决问题
网上搜了一些解决办法如下两个都不行,一旦这样清空,后面生成二维码的代码就无法正常生成二维码了
$('#twoImageId').html("");
$('#twoImageId').empty()
最终解决办法:
<div ref="twoImageRef" id="twoImageId"></div> //清空之前的二维码 否则会生成多个
this.$refs.twoImageRef.innerHTML = ''; this.generateQRCode("#twoImageId",'这里是需要生成二维码的文本');
vue用qrcodejs2生成二维码,解决多个二维码追加的问题的更多相关文章
- vue cli3项目中使用qrcodejs2生成二维码
组件的形式创建 1.下载依赖 npm install qrcodejs2 2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue) //template中的代码 <templa ...
- QRCode二维码生成方案及其在带LOGO型二维码中的应用(1)
原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1) 提要:很多公司为商业宣传之需,常将企业LOGO加入二维码中,但如果LOGO遮挡区域足够地大,二维码就变得无法识别.那么,有没有一 ...
- java二维码生成-谷歌(Google.zxing)开源二维码生成学习及实例
java二维码生成-谷歌(Google.zxing)开源二维码生成的实例及介绍 我们使用比特矩阵(位矩阵)的QR码编码在缓冲图片上画出二维码 实例有以下一个传入参数 OutputStream ou ...
- C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码
本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...
- 【转】C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码
本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...
- Java中使用google.zxing快捷生成二维码(附工具类源码)
移动互联网时代,基于手机端的各种活动扫码和收付款码层出不穷:那我们如何在Java中生成自己想要的二维码呢?下面就来讲讲在Java开发中使用 google.zxing 生成二维码. 一般情况下,Java ...
- Swift3.0生成二维码、扫描二维码、相册读取二维码,兼容iOS7(结合ZXingObjC)
二维码生成 //MARK: 传进去字符串,生成二维码图片(>=iOS7) text:要生成的二维码内容 WH:二维码高宽 private func creatQRCodeImage(text: ...
- QRCode二维码生成方案及其在带LOGO型二维码中的应用(2)
原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(2) 续前:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1) http://blog.csdn.net/johnsu ...
- 免费生成二维码接口,可直接嵌入到web项目中,附带嵌入方法,任意颜色二维码,任意大小二维码!
在线体验连接:http://www.zhaimaojun.top/qrcode/ 你是否在项目中寻找方便而且免费的可以直接嵌入到项目中的二维码生成工具呢?你找到了这里,说明你已经找到了!不要犹豫直接拿 ...
- Android项目实战(二十八):Zxing二维码实现及优化
前言: 多年之前接触过zxing实现二维码,没想到今日项目中再此使用竟然使用的还是zxing,百度之,竟是如此牛的玩意. 当然,项目中我们也许只会用到二维码的扫描和生成两个功能,所以不必下载完整的ja ...
随机推荐
- [GDOIpj221B] 数列游戏
第二题 数列游戏 提交文件: sequence.cpp 输入文件: sequence.in 输出文件: sequence.out 时间空间限制: 1 秒, 256 MB 有一个长度为 \(n\) 的序 ...
- C++学习笔记二:变量与数据类型(整型)
1.int(整型数据): 1.1 进制的表示:十进制,八进制,16进制,二进制 int number1 = 15; // Decimal int number2 = 017; // Octal int ...
- Feign远程调用超时问题
1.问题概述 上图的场景,每次重启项目后openFeign都会报一个超时异常,异常信息如下 2.为什么会产生这个异常? 当项目刚启动时,数据库连接池的中的连接并不会创建;第一次请求的时候才会初始化各种 ...
- 深入 K8s 网络原理(二)- Service iptables 模式分析
目录 1. 概述 2. 准备 Service 和 Pods 资源 3. K8s 里 Service 的实现原理 3.1 kube-proxy 组件 3.2 iptables 简介 3.3 iptabl ...
- ElasticSearch之Node query cache settings
对于filter查询,ElasticSearch提供了缓存查询结果的特性,当缓存中存在满足查询条件要求的数据时,直接从缓存中提取查询结果. 对于ElasticSearch节点,该节点上的所有shard ...
- Linux 多路复用(多路转接)
出现原因 如果需要从一个文件描述符中读取数据,然后将数据写入到另一个文件描述符时,可以按照如下的阻塞 IO : while ((n = read(STDIN_FILENO, buf, BUFFER_S ...
- 文心一言 VS 讯飞星火 VS chatgpt (46)-- 算法导论6.1 4题
四.假设一个最大堆的所有元素都不相同,那么该堆的最小元素应该位于哪里? 文心一言: 最大堆的最小元素位于堆的根结点.由于最大堆的性质,根结点是堆中所有元素的最大值,因此它也是堆中所有元素的最小值. 讯 ...
- 作为所有类的顶层父类,没想到Object的魔力如此之大!
写在开头 在上一篇博文中我们提到了Java面向对象的四大特性,其中谈及"抽象"特性时做了一个引子,引出今天的主人公Object,作为所有类的顶级父类,Object被视为是James ...
- MySQL进阶篇:详解存储引擎InnoDB
本篇基础环境是使用navicat 12和Mysql8.0 MySQL进阶篇:第一章_一.二_存储引擎特点_InnoDB 1.1 存储引擎特点 1.1.1 InnoDB 1). 介绍 InnoDB是一种 ...
- IoT技术的最后决战!百万大奖究竟花落谁家?
2022年5月25日华为云IoT创新应用开发大赛决赛路演正式打响! 华为云IoT创新应用开发大赛是华为云面向IoT产业领域的重量级精品赛事,自去年11月上线以来,受到了物联网协会.生态伙伴.产业基地等 ...