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 ...
随机推荐
- C++ 邮件槽ShellCode跨进程传输
在计算机安全领域,进程间通信(IPC)一直是一个备受关注的话题.在本文中,我们将探讨如何使用Windows邮件槽(Mailslot)实现ShellCode的跨进程传输.邮件槽提供了一种简单而有效的单向 ...
- 初次认识 Git (v2.x)
什么是版本控制? 版本控制,也称为源代码控制,是一种跟踪和管理软件代码变更的实践.版本控制系统是软件工具,可帮助软件团队管理源代码随时间推移而发生的变更.随着开发环境的加速,版本控制系统可以帮助软件团 ...
- 华企盾DSC邮件服务器测试连接提示Bad login or password(账号密码错误)
解决方法:出现该提示说明账号和密码有一个填错了,注意:这里的密码不是邮箱本身的密码,是授权码,具体可以在邮箱设置中查看,而且必须开启smtp服务才能正常使用.
- Rabbit加密算法
一.引言 随着信息技术的快速发展,数据安全已成为越来越受到重视的领域.加密算法作为保障数据安全的重要技术手段,在通信.存储等领域得到了广泛应用.Rabbit加密算法作为一种新型的加密算法,凭借其简单易 ...
- 珍藏网站-关于路由器、WIFI协议等
路由器详解:为什么不要买AX3000路由器 https://zhuanlan.zhihu.com/p/403855533 包含以下专业名词和相关话题: RX/TX和MU-MIMO 20MHz/40MH ...
- NoClassDefFoundError: javax/el/ELManager
Caused by: java.lang.NoClassDefFoundError: javax/el/ELManager at org.hibernate.validator.messageinte ...
- 如何开发一个ORM数据库框架
如何开发一个ORM框架 ORM(Object Relational Mapping)对象关系映射,ORM的数据库框架有hibernate,mybatis.我该如何开发一个类似这样的框架呢? 为什么会有 ...
- Windows中开启自动dump的方法
@echo off echo 正在启用Dump... reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Windows Error ...
- .NET开源免费功能最全的商城项目
前言 今天给大家推荐一个功能丰富.免费.灵活且可定制的开源电子商务解决方案:nopCommerce.大家假如有商城需求可以直接使用该项目进行二次开发,省时省力. 项目介绍 nopCommerce在.N ...
- 你的JoinHint为什么不生效
本文分享自华为云社区<你的JoinHint为什么不生效[绽放吧!GaussDB(DWS)云原生数仓]>,作者:你是猴子请来的救兵吗 . 引言 提起数据库的Hint,几乎每个DBA都知道这一 ...