vue-qr批量生成二维码并下载

可以使用以下步骤来批量生成二维码并下载：

1. 安装 vue-qr 依赖

使用 npm 命令进行安装：

npm install vue-qr --save

2. 编写组件

在 Vue 组件中引入 vue-qr，使用 v-for 循环生成多个二维码，并添加下载功能。

<template>
  <div>
    <div v-for="(item, index) in qrList" :key="index">
      <img :src="item" />
      <button @click="downloadQR(index)">下载二维码</button>
    </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr'

export default {
  data() {
    return {
      qrList: ['http://www.example.com/qr1', 'http://www.example.com/qr2', 'http://www.example.com/qr3']
    }
  },
  components: {
    VueQr
  },
  methods: {
    downloadQR(index) {
      const link = document.createElement('a')
      link.href = this.qrList[index]
      link.download = `qr-${index}.png`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>

3. 生成二维码

在组件中使用 VueQr 组件生成二维码：

<vue-qr :value="item"></vue-qr>

其中，`:value` 属性绑定的是二维码的内容。

4. 下载二维码

在下载按钮的点击事件中，使用 JavaScript 中的 download 属性来下载二维码。代码如下：

downloadQR(index) {
  const link = document.createElement('a')
  link.href = this.qrList[index]
  link.download = `qr-${index}.png`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

其中，`this.qrList[index]` 表示当前二维码的链接，`qr-${index}.png` 表示下载的文件名。