vue实现目录列表

使用 Vue 实现目录列表

数据驱动渲染

通过 Vue 的 v-for 指令动态渲染目录结构，数据格式建议采用嵌套数组或树形结构。例如：

data() {
  return {
    menuItems: [
      { title: '首页', path: '/' },
      { 
        title: '产品', 
        children: [
          { title: '产品A', path: '/product/a' }
        ]
      }
    ]
  }
}

递归组件实现

对于多级目录，需创建递归组件。新建 MenuItem.vue 组件：

<template>
  <li>
    <router-link v-if="item.path" :to="item.path">{{ item.title }}</router-link>
    <span v-else>{{ item.title }}</span>
    <ul v-if="item.children">
      <menu-item 
        v-for="child in item.children" 
        :key="child.title" 
        :item="child" 
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'MenuItem',
  props: ['item']
}
</script>

样式优化

添加基础样式增强可读性：

ul {
  list-style-type: none;
  padding-left: 1em;
}
li {
  margin: 0.5em 0;
  position: relative;
}
a {
  text-decoration: none;
  color: #2c3e50;
}
a:hover {
  color: #42b983;
}

动态激活状态

结合 Vue Router 实现当前路由高亮：

computed: {
  isActive() {
    return this.$route.path === this.item.path
  }
}

模板中添加动态 class：

<router-link 
  :class="{ 'active': isActive }" 
  :to="item.path"
>
  {{ item.title }}
</router-link>

交互功能扩展

添加折叠/展开功能：

data() {
  return {
    isOpen: false
  }
},
methods: {
  toggle() {
    this.isOpen = !this.isOpen
  }
}

模板中绑定点击事件：

<span @click="toggle" v-if="item.children">
  {{ item.title }} {{ isOpen ? '▼' : '▶' }}
</span>