vue 实现菜单下拉

Vue 实现菜单下拉的方法

使用 v-show 或 v-if 控制显示

通过 Vue 的指令 v-show 或 v-if 可以轻松控制下拉菜单的显示与隐藏。v-show 通过 CSS 的 display 属性切换，适合频繁切换的场景；v-if 会直接销毁或重建 DOM，适合不频繁切换的场景。

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <ul v-show="isMenuOpen">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</template>

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

使用 CSS 过渡动画

通过 Vue 的 <transition> 组件可以为下拉菜单添加平滑的动画效果，提升用户体验。

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <transition name="slide">
      <ul v-show="isMenuOpen">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </transition>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: max-height 0.3s ease;
}
.slide-enter-from, .slide-leave-to {
  max-height: 0;
  overflow: hidden;
}
.slide-enter-to, .slide-leave-from {
  max-height: 200px;
}
</style>

使用第三方组件库

如果需要更复杂的功能或样式，可以借助第三方组件库如 Element UI、Ant Design Vue 或 Vuetify，它们提供了现成的下拉菜单组件。

以 Element UI 为例：

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      Dropdown Menu<i class="el-icon-arrow-down"></i>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Item 1</el-dropdown-item>
        <el-dropdown-item>Item 2</el-dropdown-item>
        <el-dropdown-item>Item 3</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
export default {
  components: {
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem
  }
};
</script>

动态生成菜单数据

通过 Vue 的 v-for 指令可以动态生成下拉菜单项，适合菜单内容需要从后端获取的场景。

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <ul v-show="isMenuOpen">
      <li v-for="item in menuItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false,
      menuItems: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    }
  }
};
</script>

点击外部关闭菜单

通过监听全局点击事件，可以实现点击菜单外部区域时关闭下拉菜单的功能。

<template>
  <div ref="dropdown">
    <button @click="toggleMenu">Toggle Menu</button>
    <ul v-show="isMenuOpen">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false
    };
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    },
    closeMenu(event) {
      if (!this.$refs.dropdown.contains(event.target)) {
        this.isMenuOpen = false;
      }
    }
  },
  mounted() {
    document.addEventListener('click', this.closeMenu);
  },
  beforeUnmount() {
    document.removeEventListener('click', this.closeMenu);
  }
};
</script>