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生成二维码,解决多个二维码追加的问题的更多相关文章

  1. vue cli3项目中使用qrcodejs2生成二维码

    组件的形式创建 1.下载依赖 npm install qrcodejs2 2.创建一个.vue的组件放置代码(我创建的是qrcodejs2.vue) //template中的代码 <templa ...

  2. QRCode二维码生成方案及其在带LOGO型二维码中的应用(1)

    原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1) 提要:很多公司为商业宣传之需,常将企业LOGO加入二维码中,但如果LOGO遮挡区域足够地大,二维码就变得无法识别.那么,有没有一 ...

  3. java二维码生成-谷歌(Google.zxing)开源二维码生成学习及实例

    java二维码生成-谷歌(Google.zxing)开源二维码生成的实例及介绍   我们使用比特矩阵(位矩阵)的QR码编码在缓冲图片上画出二维码 实例有以下一个传入参数 OutputStream ou ...

  4. C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码

    本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...

  5. 【转】C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码

    本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...

  6. Java中使用google.zxing快捷生成二维码(附工具类源码)

    移动互联网时代,基于手机端的各种活动扫码和收付款码层出不穷:那我们如何在Java中生成自己想要的二维码呢?下面就来讲讲在Java开发中使用 google.zxing 生成二维码. 一般情况下,Java ...

  7. Swift3.0生成二维码、扫描二维码、相册读取二维码,兼容iOS7(结合ZXingObjC)

    二维码生成 //MARK: 传进去字符串,生成二维码图片(>=iOS7) text:要生成的二维码内容 WH:二维码高宽 private func creatQRCodeImage(text: ...

  8. QRCode二维码生成方案及其在带LOGO型二维码中的应用(2)

    原文:QRCode二维码生成方案及其在带LOGO型二维码中的应用(2) 续前:QRCode二维码生成方案及其在带LOGO型二维码中的应用(1)  http://blog.csdn.net/johnsu ...

  9. 免费生成二维码接口,可直接嵌入到web项目中,附带嵌入方法,任意颜色二维码,任意大小二维码!

    在线体验连接:http://www.zhaimaojun.top/qrcode/ 你是否在项目中寻找方便而且免费的可以直接嵌入到项目中的二维码生成工具呢?你找到了这里,说明你已经找到了!不要犹豫直接拿 ...

  10. Android项目实战(二十八):Zxing二维码实现及优化

    前言: 多年之前接触过zxing实现二维码,没想到今日项目中再此使用竟然使用的还是zxing,百度之,竟是如此牛的玩意. 当然,项目中我们也许只会用到二维码的扫描和生成两个功能,所以不必下载完整的ja ...

随机推荐

  1. Navicat远程连接Centos8.4服务器MySQL8.0数据库

    一.首先登陆服务器后台管理,使服务器开放3306策略 二.开启远程连接 1.登陆服务器的MySQL数据库 mysql -uroot -p 2.登录成功后,切换数据库 use mysql; 3.查看当前 ...

  2. Pipeline模式应用

    本文记录Pipeline设计模式在业务流程编排中的应用 前言 Pipeline模式意为管道模式,又称为流水线模式.旨在通过预先设定好的一系列阶段来处理输入的数据,每个阶段的输出即是下一阶段的输入. 本 ...

  3. [ABC310G] Takahashi And Pass-The-Ball Game

    Problem Statement There are $N$ Takahashi. The $i$-th Takahashi has an integer $A_i$ and $B_i$ balls ...

  4. 搭建前端项目时出现了.../dist/index.mjs:128 if (!require.cache) { ^ ReferenceError: require is not defined...

    具体报错如下: 修改node_modules/vite-plugin-mock/dist/index.mjs 加入如下内容 // 解决报错问题 import { createRequire } fro ...

  5. LeetCode:不用加号的加法(位运算)

    解题思路:位运算,只能用位运算符.a.b同号比较好处理.主要是异号的情况,考虑 a>0,b<0,因为 a,b的绝对值都不会超过2^32,因此取模数为2^32.根据同余方程可知 (a+b)% ...

  6. 测试member和coupon的远程调用

    测试member和coupon的远程调用 想要获取当前会员领取到的所有优惠券.先去注册中心找优惠券服务, 注册中心调一台优惠券服务器给会员,会员服务器发送请求给这台优 惠券服务器,然后对方响应. Fe ...

  7. ElasticSearch之Clone index API

    使用已有的索引,复制得到一个索引. 关闭testindex_001的写入操作,命令样例如下: curl -X PUT "https://localhost:9200/testindex_00 ...

  8. DVWA Cross Site Scripting (XSS) 跨站脚本攻击

    文章目录 DVWA_XSS(Stored) 存储性XSS 1.Low 2.Medium 3.High 4.Impossible XSS平台 DVWA_XSS(Stored) 存储性XSS 一句话概括: ...

  9. 基于FPGA的电子琴设计(按键和蜂鸣器)---第一版---郝旭帅电子设计团队

    本篇为各位朋友介绍基于FPGA的电子琴设计(按键和蜂鸣器)----第一版. 功能说明: 外部输入七个按键,分别对应音符的"1.2.3.4.5.6.7",唱作do.re.mi.fa. ...

  10. 面试官:请列举 Spring 的事务会失效的场景

    在日常工作中,如果对 Spring 的事务管理功能使用不当,则会造成 Spring 事务不生效的问题.而针对 Spring 事务不生效的问题,也是在跳槽面试中被问的比较频繁的一个问题. 今天,我们就一 ...