vue 点击按钮实现提示选择文件夹 下载

在Vue中实现点击按钮提示用户选择文件夹并下载文件的功能，可以通过结合HTML5的`<input>`元素以及JavaScript来完成。通常使用`type="file"`的`<input>`元素，并将其`accept`属性设置为`"directory"`来限制用户只能选择文件夹。然后，可以使用`FileReader` API或者直接通过`<a>`标签的`download`属性来实现文件的下载。以下是一个简单的示例：

1. 在Vue组件的模板中，添加一个按钮和一个隐藏的`<input>`元素用于文件夹选择：

<template>
  <div>
    <button @click="chooseFolder">选择文件夹下载</button>
    <input type="file" @change="downloadFolder" accept="directory" style="display: none;" />
  </div>
</template>

2. 在Vue组件的`<script>`部分，添加`chooseFolder`和`downloadFolder`方法：

<script>
export default {
  methods: {
    chooseFolder() {
      // 当点击按钮时触发选择文件夹的操作
      this.$refs.folderInput.click();
    },
    downloadFolder(e) {
      // 当选择文件夹后，获取文件夹路径并进行下载操作
      const folder = e.target.files[0];
      if (folder) {
        // 这里只是一个示例，实际上浏览器不支持直接下载文件夹
        // 你需要将文件夹内容压缩后提供下载链接或者使用其他技术手段
        alert('文件夹路径：' + folderwebkitRelativePath);
      }
    }
  }
};
</script>

3. 使用`ref`属性来引用隐藏的`<input>`元素：

<input type="file" ref="folderInput" @change="downloadFolder" accept="directory" style="display: none;" />

请注意，上述代码中`downloadFolder`方法中提到的直接下载文件夹是不可能的，因为浏览器不支持直接下载文件夹。通常，如果你需要下载文件夹内容，你需要将文件夹中的文件打包成一个压缩文件（如zip格式），然后提供下载链接。