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. java中C3P0、Druid、HikariCP 、DBCP连接池的jar包下载与IDEA配置

    ## 一.什么是连接池连接池是应用程序与数据库之间的一个缓冲区,它存储了一定数量的空闲数据库连接,当应用程序需要连接数据库时,可以从连接池中获取一个可用连接,使用完毕后再将连接归还给连接池,从而避免了 ...

  2. 从零开始封装 vue 组件

    对于学习 Vue 的同学来说,封装 vue 组件是实现代码复用的重要一环.在 Vue 官网中非常详细地介绍了 vue 组件的相关知识,我这里简单摘取使用最频繁的几个知识点,带大家快速入门 vue 组件 ...

  3. create-vue和vue-cli创建项目的差异

    这里对比的是vue-cli和create-vue创建vue3项目的文件中的内容差异. 原来public中的index.html被移动到根目录:(原因见这里:) https://cn.vitejs.de ...

  4. 新报: 根据IP获取物理地址不需要调用接口啦

    一. 复制data文件夹到自己的项目当中 可以进行加载到这个文件即可 博主放入在项目的根目录当中 请移步Gitee pull 该文件 https://gitee.com/yangbuyi/ip_fil ...

  5. K8s和声明式编程

    转载:原文链接 认识k8s之后,他的操作模式对我来说是一种很不错的体验.他提供了更接近现实世界的面向对象接口. 什么是k8s? Kubernetes(K8s)是一种开源容器编排平台,用于自动化部署.扩 ...

  6. kubernetes之部署war项目(二)

    kubernetes之部署war项目(二) k8s系列 源自我工作上的实际场景,记录于此. 现在老项目是war包形式,需要基于tomcat部署,因此在打包镜像时将tomcat带上的. 假设我的war项 ...

  7. EDS从小白到专家丨打造你的专属“数据物流”系统

    "数据快递"如何支撑便捷就医?本期让我们来了解如何使用EDS打造专属的"数据物流"系统...... 本文分享自华为云社区<[EDS从小白到专家]第2期-E ...

  8. 高性能利器!华为云MRS ClickHouse重磅推出!

    摘要:华为智能数据湖MRS服务即将上线ClickHouse高性能引擎集群,用户只需要几分钟,就可以轻松方便地一键式完成集群部署搭建,快速拥有PB级数据的秒级交互查询分析能力,帮助用户带来极致的性能体验 ...

  9. 加快云原生技术转型, 智能调度登陆华为云DevOps: 增速,节源

    摘要:本文将探讨智能资源调度在华为云DevOps上的应用与实践. 本文分享自华为云社区<加快云原生技术转型, 智能调度登陆华为云DevOps: 增速,节源>,作者: DevAI. 1. 背 ...

  10. 一起玩转玩转LiteOS组件:Opus

    摘要:Opus编码器是一个开源的有损声音编码格式,适用于网络实时声音传输,标准格式为RFC 6716,相对于其他编码格式来说,保真性更好. 本文分享自华为云社区<LiteOS组件尝鲜-玩转Opu ...