vue实现下拉层级

Vue 实现下拉层级菜单

使用 Vue 实现下拉层级菜单可以通过递归组件或动态渲染的方式完成。以下是两种常见实现方法：

递归组件实现

递归组件适合处理嵌套层级不确定的数据结构，例如树形菜单。

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      <span @click="toggle(item)">{{ item.name }}</span>
      <tree-menu 
        v-if="item.children && item.expanded" 
        :menu-data="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: ['menuData'],
  methods: {
    toggle(item) {
      item.expanded = !item.expanded;
    }
  }
}
</script>

动态渲染实现

通过 v-for 和条件判断动态渲染层级菜单，适合层级固定的场景。

<template>
  <div class="dropdown">
    <button @click="toggleMenu">主菜单</button>
    <ul v-if="isOpen">
      <li v-for="item in menuItems" :key="item.id">
        <a href="#" @click.prevent="handleClick(item)">
          {{ item.text }}
        </a>
        <ul v-if="item.children && item.expanded">
          <li v-for="child in item.children" :key="child.id">
            <a href="#">{{ child.text }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false,
      menuItems: [
        {
          id: 1,
          text: '菜单1',
          expanded: false,
          children: [
            { id: 11, text: '子菜单1-1' },
            { id: 12, text: '子菜单1-2' }
          ]
        },
        {
          id: 2,
          text: '菜单2',
          expanded: false,
          children: [
            { id: 21, text: '子菜单2-1' },
            { id: 22, text: '子菜单2-2' }
          ]
        }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isOpen = !this.isOpen;
    },
    handleClick(item) {
      item.expanded = !item.expanded;
    }
  }
}
</script>

使用第三方组件库

对于更复杂的需求，可以使用现成的 UI 组件库：

1. Element UI 的 el-menu 组件

   

   <el-menu>
   <el-submenu index="1">
    <template slot="title">一级菜单</template>
    <el-menu-item index="1-1">二级菜单</el-menu-item>
   </el-submenu>
   </el-menu>

2. Ant Design Vue 的 a-menu 组件

   <a-menu>
   <a-sub-menu key="sub1">
    <span slot="title">一级菜单</span>
    <a-menu-item key="1">二级菜单1</a-menu-item>
   </a-sub-menu>
   </a-menu>

样式处理要点

1. 为下拉菜单添加过渡动画

   .dropdown-enter-active, .dropdown-leave-active {
   transition: all 0.3s;
   }
   .dropdown-enter, .dropdown-leave-to {
   opacity: 0;
   transform: translateY(-10px);
   }

2. 处理菜单层级样式

   ul {
   list-style: none;
   padding: 0;
   }
   li {
   position: relative;
   }
   ul ul {
   position: absolute;
   left: 100%;
   top: 0;
   background: #fff;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   }