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 = 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。

展示一下到这一步的成果吧：（二维码成功生成了，已打码处理）样式略丑，等会再来修整。