vue项目用qrcodejs2生成多个二维码的实现
本文参考了这篇博客:vue项目使用qrcodejs2生成二维码 - 潇湘羽西 - 博客园
大家好,我是南宫。最近我这边有这样一个需求:在PC端的web页面获取下载链接,同一个软件的下载的链接不止一个,其中PC端可以直接下载到电脑上,安卓和iOS的客户端需要扫码下载,所以需要把APP的下载地址转成二维码。
简而言之,不确定有几个链接要转换成二维码,不确定要转换成二维码的链接是什么(换一个软件,地址就不同)
之前我没有做过类似的场景,所以我现在来记录一下。
其他博主写的博客,基本就是针对于需要在固定区域生成一个二维码的需求,而我做的这个不确定二维码的个数,所以我对此做一些补充。
1.首先,简单介绍一下基本的使用。安装该库:npm install qrcodejs2 --save,在组件里使用它:import QRCode from 'qrcodejs2'。
生成二维码,使用的代码是:
new QRCode('qrcode',{width: 200, // 设置宽度,单位像素height: 200, // 设置高度,单位像素text: 'https://www.baidu.com' // 设置二维码内容或跳转地址
})
我查了好几篇博客,才弄明白,new 调用QRCode时,第一个参数是要摆放二维码的容器的id,第二个参数是个对象,可以控制要渲染出来的二维码的宽高,而text这是对应的下载链接。
2.我是通过调用接口,获取到下载链接的,然后我把下载链接以对象数组的形式保存了,这些对象里面自带独一无二的标识id。没错,可以用v-for遍历数组,在里面放置二维码容器,并且通过独一无二的id来动态拼凑出对应容器的id。
<!-- 下载弹窗 --><el-dialog:title="downloadDialog.title":visible.sync="downloadDialog.visible":width="downloadDialog.width":append-to-body="true"><!-- 把下载的链接放进去 --><div class="flex download-parent"><!-- 展示每一个下载链接 --><div v-for="(item, index) in downloadLinks" :key="index" class="download-link-box"><!-- 二维码 --><div v-if="item.type === 1 || item.type === 2"><div:id="`code${item.id}`":ref="`code${item.id}`"class="code"></div></div><!-- 展示按钮 --><div v-else>这个是PC端的下载地址,将要展示一个图片</div></div></div></el-dialog>
3. 点击按钮,下载链接的弹窗显示以后,就要动态绘制出二维码图案。关闭弹窗,则要清除已经生成的二维码。
所以我准备了显示二维码、生成二维码、清除二维码3个方法。
// 点击下载的按钮,打开下拉链接弹窗toDownload(type) {this.downloadDialog.visible = trueswitch (type) {case 'cloudMonitor': {this.downloadDialog.title = '云监控下载'this.downloadLinks = this.cloudMonitorLinksbreak}case 'cloudMonitorInstall': {this.downloadDialog.title = '云监控装维下载'this.downloadLinks = this.cloudMonitorInstallLinksbreak}}// 根据下载的链接有几个,动态计算对话框的宽度this.downloadDialog.width = this.downloadLinks.length * 240 + 'px'// 展示二维码this.showCode()}, // 生成二维码的方法(id和内容动态传入,因为二维码不止一个)createQrcode(id, code) {this.qr = new QRCode(id, {width: 140, // 设置宽度,单位像素height: 140, // 设置高度,单位像素text: code // 设置二维码内容或跳转地址})},// 展示二维码showCode() {this.closeCode()this.$nextTick(() => {// 从当前要下载的东西里面找到安卓和iOS的链接,生成所有的二维码this.downloadLinks.forEach((item) => {if (item.type === 1 || item.type === 2) {this.createQrcode('code' + item.id, item.url)}})})},// 关闭二维码弹窗closeCode() {// 这里是清空每一个二维码框的内容const codeList = document.querySelectorAll('.code')for (let i = 0; i < codeList.length; i++) {codeList[i].innerHTML = ''}},
现在我来解释一下上面的代码:
首先,点击按钮,显示弹窗,并且确定当前的下载链接使用的是哪个数组里的数据,弹窗标题是什么。根据下拉链接有几个,来动态计算下载弹窗的宽度。
然后,显示二维码。显示的时候先看看要生成几个,然后传入id和url,一一进行生成。生成二维码的方法我给封装成动态传入id和text的了。
最后,写一个关闭二维码弹窗的方法。其他博主是根据id找到元素,清空里面的innerHTML,而我这边id不确定,所以我给加上了统一的class,通过class的名字来找到这些div,清空它们的innerHTML。
展示一下到这一步的成果吧:(二维码成功生成了,已打码处理)样式略丑,等会再来修整。
vue项目用qrcodejs2生成多个二维码的实现相关推荐
- vue引用qrcodejs2生成、下载二维码、复制到剪贴板
使用的vue2.x版本,UI框架为ant design vue 1.X版本 1.场景:页面需要展示二维码并且需要下载二维码的功能 效果图: 引用插件: yarn add qrcodejs2@0.0.2 ...
- vue:实现前端生成并下载二维码(使用qrcodejs2插件)
需求 点击按钮下载二维码,并命名为"奶绿走糖-二维码". HTML <button @click="getPersonCode()">下载二维码&l ...
- vue实现根据链接生成带logo二维码,并下载
第一步,下载插件 npm install vue-qr --save 第二步,页面中使用 <template><vue-qrref='Qrcode':logo-src="l ...
- Vue3项目生成并下载二维码,关于vue-qr.vue与qrcode.vue插件之间的区别
1.vue-qr.vue与qrcode.vue大致区别 vue-qr.vue:体积较大,大概4M左右,可以给二维码添加中心logo,生成二维码为img标签,可下载 qrcode.vue:体积较小,不能 ...
- vue + 生成 下载 成 二维码
二维码 <div class='box' v-for="(item,index) in this.num" :key="item.key "> ...
- 用qrcode生成微信支付二维码
项目场景: 用qrcode生成微信支付二维码 问题描述 根据后台返回的路径动态生成微信二维码 在这里我们用的是qrcodejs2,它有官网文档 npm i qrcodejs2 导入: import Q ...
- vue 中使用 QRCode.js 链接转二维码带中间图片
前言 项目中需要一个链接转二维码的功能,找了一下 决定使用QRCode.js(很久以前的插件了) 下载引入1. <div id="qrcode" ref="qrco ...
- 微信小程序如何生成当前页面二维码
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. 在微信小程序的开发中,很多的业务场景下都会有生成二维码,然后通过扫码二维码,进入指定页面的需求. 我之前也没 ...
- Java分别使用zxing及qrcode-plugin生成各种样式二维码
二维码 二维条形码能够在横向和纵向两个方位同时表达信息,因此能在很小的面积内表达大量的信息. 二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个近几年来移动 ...
- Java实现生成和解析二维码
Java实现生成和解析二维码 文章目录 Java实现生成和解析二维码 一.建立项目 二.创建工具类 三.创建启动类 一.建立项目 首先需要创建一个普通的 Maven 项目,在这里我用的是 google ...
最新文章
- 使用TWebBrowser组件保存网页为html和mht文件 收藏
- Why expand does not work for complex note
- python文件可以包括任何数据内容_python 文件数据合并(数据行不对应)?
- Eclipse日常踩坑记录——导入文件时遇到的几个问题
- 《HTML5游戏编程核心技术与实战》——2.3 图像API
- 区块链与java的应用开发_用 Java 开发一个区块链
- java就业培训教程 笔记
- hp服务器系统如何用u盘恢复,软硬件技巧 篇三:HP战66之恢复U盘制作,以及恢复系统之体验感想...
- Winform/C#入门编程之第三部分容器(四:缩放控件SplitContainer)
- MPUSH消息推送服务器搭建
- 主成分分析法(PCA方法)计算OBB包围盒
- 定制Hexo-NexT的个性化博客
- mysql 锁机制与原理详解
- vue3 中使用antd UI组件
- [stanford NLP] 原理小结
- Postman发送带cookie的http请求
- 计算机教子好考吗,考进985的孩子:父母都是这样教育孩子,这些方法比刷题管用...
- RMM Level -- 对于REST的层级划分模型
- java v_java -v报错 java -version正确
- html5什么网站知乎,老司机秒懂的5个资源网站,知乎超过10万人推荐,竟被我挖掘到了...
热门文章
- 自定义向PE启动映像WIM中添加驱动方法
- 数据库中的 “行式存储”和“列式存储”
- 微信视频号视频保存,微信视频号视频下载的方法
- 水仙花数徐静春c语言,今日冬至|不疾不徐,静候春来!
- 本地存储-系统和保留-系统文件占用存储空间过大的解决方式
- Java大学生特训营 疫情地图项目实战课
- 后台得到ajax传来的参数,几种ajax传参数到后台获取的方法
- 电脑桌面便签怎么修改便签字体颜色?
- AlphaTensor横空出世!打破矩阵乘法计算速度50年纪录,DeepMind新研究再刷Nature封面,详细算法已开源...
- 2022CTFSHOW菜狗杯部分MISC(一)