首页 > 其他分享 >vue用qrcodejs2生成二维码,解决多个二维码追加的问题

vue用qrcodejs2生成二维码,解决多个二维码追加的问题

时间:2023-05-22 13:44:40浏览次数:37  
标签:generateQRCode vue qrcodejs2 生成 二维码 twoImageId

vue使用qrcodejs2生成二维码

1、安装qrcodejs2

npm install qrcodejs2

 2、代码

//这个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",'这里是需要生成二维码的文本');

 

标签:generateQRCode,vue,qrcodejs2,生成,二维码,twoImageId
From: https://www.cnblogs.com/yclh/p/17420393.html

相关文章

  • Vue脚手架笔记备注
    笔记脚手架文件结构├──node_modules├──public│├──favicon.ico:页签图标│└──index.html:主页面├──src│├──assets:存放静态资源││└──logo.png││──component:存放组件││└──HelloWorld.vue│......
  • Vue脚手架1
    ##1.1说明1.Vue脚手架是Vue官方提供的标准化开发工具(开发平台)。2.最新的版本是4.x。3.文档:https://cli.vuejs.org/zh/ 1.2具体步骤第一步(仅第一次执行):全局安装@vue/cli。npminstall-g@vue/cli第二步:切换到你要创建项目的目录,然后使用命令创建项目vuecre......
  • Vue购物车实例练习
    功能介绍金额=单价*数量金额会自动根据数量的变化进行变化,我们可以点击按钮增加或减少商品的数量。合计金额:只有在序号列号勾选上才会被计入总金额中,金额总数会根据用户的操作自动更新数据。删除:如图我们勾选了第2个商品,当我们点击删除时,只会删除被选中的产品。全选:点击......
  • VUE npm run serve 提示error Mixed spaces and tabs no-mixed-spaces-and-tabs 解决
    解析:看这个错误提示意思就是“不允许代码中出现空格和tab键混合的情况”大多数代码约定要求使用空格或tab进行缩进,禁止使用空格和tab混合缩进。因此,一行代码同时混有tab缩进和空格缩进,通常是错误的。解决办法:原因找到了,解决办法就是找到spaces和tabs混合的地方,然后统一即可!......
  • vue项目结合vant,实现上拉加载更多,下拉刷新
    上拉加载思路:引入vant组件上拉list后端数据做了分页处理,获取接口数据,渲染到页面上,(此处只会显示一页的数据)设置属性去实现效果,loading,finished为vant组件中提供的每次滚动到底部后把页面数+1,发送一次请求获取新分页数据.获取完数据,将新获取的数据跟上一页获取的数据做......
  • java基于的springboot+vue4S店车辆管理系统,车辆销售管理系统,附源码+数据库+lw文档+PPT
    1、项目介绍首先介绍了4S店车辆管理的技术发展背景与发展现状,然后遵循软件常规开发流程,首先针对系统选取适用的语言和开发平台,根据需求分析制定模块并设计数据库结构,再根据系统总体功能模块的设计绘制系统的功能模块图,流程图以及E-R图。然后,设计框架并根据设计的框架编写代码以实......
  • vue实现卡片滚动效果
    vue实现卡片滚动左右切换效果HTML://最外层盒子<divclass="box_1"> //内层盒子 <divclass="box_2" :style="{transform:'translateX'+'('+currentOffset+'px'+')',}"> //中间放需要展示的div,样式......
  • java基于springboot+vue的土特产在线销售平台、特产在线销售商城,附源码+数据库+lw文档
    1、项目介绍考虑到实际生活中在藏区特产销售管理方面的需要以及对该系统认真的分析,将系统权限按管理员和用户这两类涉及用户划分。(1)管理员功能需求管理员登陆后,主要模块包括首页、个人中心、用户管理、特产信息管理、特产分类管理、特产分类管理、特产评分管理、系统管理、订单......
  • Vue进阶(九十八):Vue.set() 和 this.$set()
    (文章目录)一、应用场景有时候我们会看到如下代码:在我们使用vue进行开发的过程中,可能会遇到这样一种情况:当创建vue实例后,再次给对象赋值时,发现数据并不会自动更新到视图上去;当我们去阅读vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图......
  • vue中输入密码带图标可见不可见切换
    data(){return{userName:"",pswd:"",loginDisabled:false,labelPosition:"top",passwordType:'password',passwordIcon:require('@m/assets/images/bukejian.png')......