vue项目用qrcodejs2生成多个二维码的实现
本文参考了这篇博客:vue项目使用qrcodejs2生成二维码 - 潇湘羽西 - 博客园大家好,我是南宫。最近我这边有这样一个需求:在PC端的web页面获取下载链接,同一个软件的下载的链接不止一个,其中PC端可以直接下载到电脑上,安卓和iOS的客户端需要扫码下载,所以需要把APP的下载地址转成二维码。简而言之,不确定有几个链接要转换成二维码,不确定要转换成二维码的链接是什么(换一个软件,地址就不同
本文参考了这篇博客: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 = true
switch (type) {
case 'cloudMonitor': {
this.downloadDialog.title = '云监控下载'
this.downloadLinks = this.cloudMonitorLinks
break
}
case 'cloudMonitorInstall': {
this.downloadDialog.title = '云监控装维下载'
this.downloadLinks = this.cloudMonitorInstallLinks
break
}
}
// 根据下载的链接有几个,动态计算对话框的宽度
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。
展示一下到这一步的成果吧:(二维码成功生成了,已打码处理)样式略丑,等会再来修整。
更多推荐
所有评论(0)