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 ...
随机推荐
- CON2 工单重估 效率提升
CON2 工单重估 效率提升 业务背景:月结CON2 每次只能允许一个进程操作 集团公司较多的话,很影响月结效率. SAP提供了专家模式程序 RKAZCON2 ,可以选平行运行 平行处理 需要选服 ...
- [JVM] 应用诊断工具之Fastthread(在线诊断)
0 序言 背景 近期生产系统遇到了一个线程方面的问题,目前根因已定位到.现将fastthread这一诊断工具做一小结,便于以后快速使用 博主我遇到的线程问题:java.lang.OutOfMemory ...
- macOS 苹果电脑双面打印单面打印PDF设置
苹果的打印服务分为两个部分,一个是应用层另一个是系统层. 其中双面打印或单面打印统一在系统层面设置,下面我分别截图示意wps pdf和福昕pdf两款软件设置双面打印. 1.WPS PDF 在完成方式中 ...
- 使用 PyTorch FSDP 微调 Llama 2 70B
引言 通过本文,你将了解如何使用 PyTorch FSDP 及相关最佳实践微调 Llama 2 70B.在此过程中,我们主要会用到 Hugging Face Transformers.Accelera ...
- free内存参数介绍
第一部分Mem行: total 内存总数: 15.7G used 已经使用的内存数: 15.6G free 空闲的内存数: 93M shared 当前已经废弃不用,总是0 buffers Buffer ...
- Cocos2d-js 游戏切后台和返回游戏,系统监听事件
在日常游戏开发中,我们会发现,实时类操作的游戏,在模拟器中切后台,然后切回游戏,会出现很多异常. 很幸运,Cocos官方已经为我们预留了接口 1 LogicGame.addSystemListener ...
- Jenkins 系列:Jenkins 安装(Windows、Mac、Centos)和简介
目录 简介 发展历史 应用场景 Jenkins 安装部署 先决条件 硬件要求 软件包下载 war 包部署 linux 系统部署 mac 系统部署 windows 系统部署 安装后基本配置 解锁 自定义 ...
- 文件不落地上线sliver
接着二开sliver,给他添加一个生成powershell payload上线的功能,生成并复制到剪切板. 准备 首先,先开启监听,不多说直接mtls默认的就行,sliver可以生成配置文件来实现 ...
- 【OpenCV】在MacOS上源码编译OpenCV
前言 在做视觉任务时,我们经常会用到开源视觉库OpenCV,OpenCV是一个基于Apache2.0许可(开源)发行的跨平台计算机视觉和机器学习软件库,它具有C++,Python,Java和MATLA ...
- BlockCanary原理解析
一.背景 为了解决应卡顿,分析耗时. 二.原理 Looper中的loop方法: public static void loop() { ... for (;;) { ... // This must ...