vue实现本地目录树

实现本地目录树的基本思路

在Vue中实现本地目录树，通常需要结合文件系统API（如Electron的fs模块）或浏览器端的File API。核心是通过递归组件渲染层级结构，并处理文件/文件夹的交互逻辑。

基于Electron环境的实现（Node.js文件系统）

若项目基于Electron或类似环境，可使用fs模块读取本地文件：

// 组件模板
<template>
  <ul>
    <li v-for="item in treeData" :key="item.path">
      <span @click="toggleExpand(item)">{{ item.name }}</span>
      <directory-tree 
        v-if="item.expanded && item.children" 
        :data="item.children"
      />
    </li>
  </ul>
</template>

<script>
const fs = require('fs');
const path = require('path');

export default {
  name: 'DirectoryTree',
  props: ['data'],
  methods: {
    toggleExpand(item) {
      if (!item.children) {
        item.children = this.readDir(item.path);
      }
      item.expanded = !item.expanded;
    },
    readDir(dirPath) {
      return fs.readdirSync(dirPath).map(name => {
        const fullPath = path.join(dirPath, name);
        const isDir = fs.statSync(fullPath).isDirectory();
        return {
          name,
          path: fullPath,
          isDirectory: isDir,
          expanded: false
        };
      });
    }
  }
};
</script>

浏览器端实现（File API）

浏览器环境需用户主动选择目录：

<template>
  <input type="file" webkitdirectory @change="handleDirChange"/>
  <directory-tree :data="treeData"/>
</template>

<script>
export default {
  data() {
    return { treeData: [] }
  },
  methods: {
    handleDirChange(e) {
      const entries = Array.from(e.target.files);
      this.treeData = this.buildTree(entries);
    },
    buildTree(entries) {
      // 实现路径分割和树形结构构建逻辑
    }
  }
};
</script>

递归组件优化建议

1. 添加懒加载：只在展开时读取子目录
2. 增加图标区分文件类型：使用v-if结合item.isDirectory
3. 性能优化：对大目录使用虚拟滚动
4. 样式处理：通过CSS实现缩进和交互效果

ul {
  list-style: none;
  padding-left: 1em;
}
li span:hover {
  cursor: pointer;
  background: #eee;
}

注意事项

• 浏览器端文件访问受限，需用户主动触发
• Electron环境下需处理路径跨平台问题
• 对于大型目录结构，考虑添加加载状态和错误处理