当前位置：首页 > VUE

vue实现本地目录树

2026-01-22 21:45:50VUE

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

在Vue中实现本地目录树通常需要结合文件系统API（如浏览器端的File API或Node.js的fs模块）和递归组件技术。以下是两种常见场景的实现方法：

浏览器端实现（基于用户选择的文件）

使用HTML5的File API和<input type="file">元素，结合webkitdirectory属性获取目录结构：

<template>
  <div>
    <input type="file" webkitdirectory @change="handleDirectoryChange"/>
    <directory-tree :nodes="treeData" v-if="treeData"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: null
    }
  },
  methods: {
    handleDirectoryChange(e) {
      const files = Array.from(e.target.files)
      this.treeData = this.buildTree(files)
    },
    buildTree(files) {
      const tree = {}
      files.forEach(file => {
        const path = file.webkitRelativePath
        const parts = path.split('/')
        let currentLevel = tree
        parts.forEach((part, index) => {
          if (!currentLevel[part]) {
            currentLevel[part] = index === parts.length - 1 
              ? { type: 'file', file }
              : { type: 'dir', children: {} }
          }
          currentLevel = currentLevel[part].children || {}
        })
      })
      return tree
    }
  }
}
</script>

递归组件实现

创建递归组件来渲染目录树结构：

<template>
  <ul>
    <li v-for="(node, name) in nodes" :key="name">
      <span @click="toggleExpand(name)">
        {{ name }} {{ node.type === 'dir' ? (expanded[name] ? '[-]' : '[+]') : '' }}
      </span>
      <directory-tree 
        v-if="node.type === 'dir' && expanded[name]" 
        :nodes="node.children"
        @file-selected="$emit('file-selected', $event)"
      />
      <span v-else-if="node.type === 'file'" @click="$emit('file-selected', node.file)">
        {{ name }}
      </span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'DirectoryTree',
  props: ['nodes'],
  data() {
    return {
      expanded: {}
    }
  },
  methods: {
    toggleExpand(name) {
      this.$set(this.expanded, name, !this.expanded[name])
    }
  }
}
</script>

Node.js环境实现

使用Electron或NW.js等桌面应用框架时，可以访问完整的文件系统：

const fs = require('fs')
const path = require('path')

methods: {
  async loadDirectory(dirPath) {
    const tree = {}
    const items = await fs.promises.readdir(dirPath)

    for (const item of items) {
      const fullPath = path.join(dirPath, item)
      const stat = await fs.promises.stat(fullPath)

      if (stat.isDirectory()) {
        tree[item] = {
          type: 'dir',
          children: await this.loadDirectory(fullPath)
        }
      } else {
        tree[item] = {
          type: 'file',
          path: fullPath
        }
      }
    }

    return tree
  }
}

样式优化建议

为目录树添加基础样式增强可读性：

ul {
  list-style-type: none;
  padding-left: 1em;
  line-height: 1.5em;
}

li span {
  cursor: pointer;
  user-select: none;
}

li span:hover {
  background-color: #f0f0f0;
}