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. DataGtip的永久激活方法(Windows2021-2023版本均可)

    一.打开DataGrip 出现以下界面即显示需要激活,否则无法使用,这里打开后点击Exit退出 二.下载激活包 1.下载激活包准备激活 下载链接: 链接:https://pan.baidu.com/s ...

  2. [ABC280F] Pay or Receive

    Problem Statement There are $N$ towns numbered $1,\ldots,N$ and $M$ roads numbered $1,\ldots,M$. Roa ...

  3. C# 常量 结构体 委托

    常量 const double PI = 3.1415926; 常量名命名一般使用大写字母 枚举类型 开发一个游戏,游戏角色有法师(Mage).射手(Archer).刺客(Assassin).坦克(T ...

  4. docker开启或关闭<开机自启容器>

    启动容器时设置 docker run --restart=always 启动完成也可以修改 docker update --restart=always <容器ID> 想取消容器自启 do ...

  5. .NET Conf China 2023 活动纪实 抢先看

    ​ 今天2023年12月16日.NET Conf China 2023举办的日子,北京昨天上午还在飘起雪花,到今天早上的天气就有了极大的改观,大清早就能看到外面徐徐升起的朝阳,这也预示着今天将是一个大 ...

  6. 一文读懂遗传算法(附python)

    几天前,我着手解决一个实际问题--大型超市销售问题.在使用了几个简单模型做了一些特征工程之后,我在排行榜上名列第 219 名. 虽然结果不错,但是我还是想做得更好.于是,我开始研究可以提高分数的优化方 ...

  7. 【Python】【OpenCV】凸轮廓和Douglas-Peucker算法

    针对遇到的各种复杂形状的主体,大多情况下,我们可以求得一个近似的多边形来简化视觉图像处理,因为多边形是由直线组成的,这样就可以准确的划分区域来便捷后续的操作. cv2.arcLength() Meth ...

  8. java,类、实例化、构造方法、this关键字、方法重载

    编写类的步骤: 1.定义类名 2.编写类的属性 3.编写类的方法 public  访问修饰符,表示在整个项目中都可以调用,也可以用其他词 使用class关键字来定义类,如下,定义一个Cat类 给了属性 ...

  9. Codeforce Round 916(div3)

    Codeforces Round 916(div3) [Problem - A - Codeforces]:Problemsolving Log A.题 直接看样例进行分析,发现每一次出现的字符代表着 ...

  10. Visual Studio 2022版本17.8中的实用功能

    前言 今天介绍一下Visual Studio 2022版本17.8这一发行版中的4个比较实用功能. 保留大小写查找和替换 这个功能之前就有,不过我觉得对于日常搜索.替换而言还是比较实用的.在执行查找. ...