vue 弹窗选择文件夹绝对路径

在 Vue 中，可以使用 `<input type="file" webkitdirectory>` 来选择文件夹，这样用户选择的就是一个文件夹的绝对路径。具体实现方法如下：

首先，在需要弹出选择文件夹的地方，添加一个按钮或者链接，点击后触发选择文件夹的操作。例如：

<template>
  <div>
    <button @click="selectFolder">选择文件夹</button>
  </div>
</template>

然后，在 `selectFolder` 方法中，使用 `input` 元素来实现选择文件夹的操作。具体实现如下：

<template>
  <div>
    <button @click="selectFolder">选择文件夹</button>
    <input type="file" webkitdirectory ref="folderInput" style="display:none;" @change="handleFolderSelect">
  </div>
</template>

<script>
export default {
  methods: {
    selectFolder() {
      // 弹出选择文件夹对话框
      this.$refs.folderInput.click();
    },
    handleFolderSelect(event) {
      // 用户选择文件夹后的回调函数
      const folderPath = event.target.files[0].path;
      console.log('用户选择的文件夹路径：', folderPath);
      // TODO: 处理用户选择的文件夹路径
    }
  }
}
</script>

这里使用了 `input` 元素来实现选择文件夹的操作，`type="file"` 表示选择文件，`webkitdirectory` 表示选择文件夹，`ref="folderInput"` 表示设置该元素的引用名为 `folderInput`，`@change` 表示选择文件夹后的回调函数。在 `selectFolder` 方法中，调用 `this.$refs.folderInput.click()` 来弹出选择文件夹对话框。在 `handleFolderSelect` 方法中，通过 `event.target.files[0].path` 获取用户选择的文件夹的绝对路径。