vue自己实现下拉导航

实现下拉导航的基本思路

在Vue中实现下拉导航可以通过组合使用v-show或v-if指令控制显示状态，结合CSS过渡效果实现平滑动画。核心逻辑是通过数据驱动导航的展开与收起。

基础实现代码示例

<template>
  <div class="dropdown">
    <button @click="toggleDropdown">导航菜单</button>
    <ul v-show="isOpen" class="dropdown-menu">
      <li><a href="#">选项1</a></li>
      <li><a href="#">选项2</a></li>
      <li><a href="#">选项3</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 120px;
}

.dropdown-menu li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

.dropdown-menu li a:hover {
  background: #f5f5f5;
}
</style>

添加过渡动画效果

使用Vue的<transition>组件为下拉菜单添加动画：

<template>
  <transition name="slide-fade">
    <ul v-show="isOpen" class="dropdown-menu">
      <!-- 菜单内容 -->
    </ul>
  </transition>
</template>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
</style>

点击外部区域关闭菜单

通过监听文档点击事件实现点击外部关闭菜单：

mounted() {
  document.addEventListener('click', this.handleClickOutside)
},
beforeUnmount() {
  document.removeEventListener('click', this.handleClickOutside)
},
methods: {
  handleClickOutside(event) {
    if (!this.$el.contains(event.target)) {
      this.isOpen = false
    }
  }
}

多级下拉菜单实现

对于多级嵌套菜单，可以使用递归组件：

<template>
  <ul class="nested-menu">
    <li v-for="item in menuItems" :key="item.id">
      <a href="#" @click.prevent="toggleSubMenu(item)">
        {{ item.title }}
        <span v-if="item.children">›</span>
      </a>
      <dropdown-menu 
        v-if="item.children" 
        :items="item.children" 
        v-show="item.isOpen"
      />
    </li>
  </ul>
</template>

<script>
export default {
  props: ['items'],
  data() {
    return {
      menuItems: this.items.map(item => ({
        ...item,
        isOpen: false
      }))
    }
  },
  methods: {
    toggleSubMenu(item) {
      if (item.children) {
        item.isOpen = !item.isOpen
      }
    }
  }
}
</script>

响应式设计考虑

添加媒体查询确保在不同设备上正常显示：

@media (max-width: 768px) {
  .dropdown-menu {
    position: static;
    width: 100%;
  }
}

以上实现方案涵盖了基础下拉菜单、动画效果、多级菜单等常见需求，可根据实际项目需要进行调整和扩展。