vue-qr批量生成二维码并打包

要批量生成二维码并打包，你可以使用以下步骤：

1. 安装 vue-qr 插件：在命令行中运行 `npm install vue-qr --save`，或者在项目目录下运行 `yarn add vue-qr`。

2. 创建一个二维码生成器组件：在 Vue 应用中创建一个新的组件，用于批量生成二维码。在组件中使用 vue-qr 插件来生成二维码。

3. 创建一个数据源：在组件中创建一个数据源，用于存储所有要生成二维码的数据。可以使用数组或对象存储数据。

4. 使用 v-for 指令循环生成二维码：在组件中使用 v-for 指令循环遍历数据源，使用 vue-qr 插件生成二维码，并将生成的二维码添加到页面中。

5. 打包生成的二维码：在组件中添加一个按钮，当用户点击按钮时，使用 jszip 插件将所有二维码打包成一个压缩文件，并将文件下载到本地。

以下是一个简单的示例代码：

<template>
  <div>
    <div v-for="(data, index) in dataSource" :key="index">
      <p>{{ data.name }}</p>
      <qrcode :value="data.code"></qrcode>
    </div>
    <button @click="handleDownload">Download</button>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
import JSZip from 'jszip'
import FileSaver from 'file-saver'

export default {
  components: {
    VueQr
  },
  data() {
    return {
      dataSource: [
        { name: 'Qrcode 1', code: 'https://www.example.com/1' },
        { name: 'Qrcode 2', code: 'https://www.example.com/2' },
        { name: 'Qrcode 3', code: 'https://www.example.com/3' }
      ]
    }
  },
  methods: {
    handleDownload() {
      const zip = new JSZip()

      this.dataSource.forEach((data, index) => {
        const imgData = this.$refs[`qrcode${index}`][0].$el.toDataURL()
        zip.file(`${data.name}.png`, imgData.substr(imgData.indexOf(',') + 1), { base64: true })
      })

      zip.generateAsync({ type: 'blob' }).then((content) => {
        FileSaver.saveAs(content, 'qrcodes.zip')
      })
    }
  }
}
</script>

在上述示例代码中，我们使用了 vue-qr 插件来生成二维码，使用 jszip 插件将所有二维码打包成一个压缩文件，并使用 file-saver 插件将文件下载到本地。注意，我们使用了 $refs 来获取每个二维码组件的实例，并将实例转换为图片数据进行打包。