vue实现菜单展开收起

实现菜单展开收起功能

在Vue中实现菜单的展开收起功能，可以通过以下方法完成：

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

<template>
  <div>
    <button @click="toggleMenu">切换菜单</button>
    <div v-show="isMenuOpen">
      <!-- 菜单内容 -->
      <ul>
        <li>菜单项1</li>
        <li>菜单项2</li>
        <li>菜单项3</li>
      </ul>
    </div>
  </div>
</template>

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

添加过渡动画效果

<template>
  <div>
    <button @click="toggleMenu">切换菜单</button>
    <transition name="slide">
      <div v-show="isMenuOpen" class="menu">
        <!-- 菜单内容 -->
      </div>
    </transition>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}
.menu {
  background: #f5f5f5;
  padding: 10px;
}
</style>

使用Vuex管理状态（适用于大型应用）

// store.js
export default new Vuex.Store({
  state: {
    isMenuOpen: false
  },
  mutations: {
    toggleMenu(state) {
      state.isMenuOpen = !state.isMenuOpen
    }
  }
})

<template>
  <div>
    <button @click="$store.commit('toggleMenu')">切换菜单</button>
    <div v-show="$store.state.isMenuOpen">
      <!-- 菜单内容 -->
    </div>
  </div>
</template>

递归菜单组件实现多级展开收起

<template>
  <div>
    <menu-item 
      v-for="item in menuItems" 
      :key="item.id" 
      :item="item"
    />
  </div>
</template>

<script>
import MenuItem from './MenuItem.vue'

export default {
  components: {
    MenuItem
  },
  data() {
    return {
      menuItems: [
        {
          id: 1,
          name: '菜单1',
          children: [
            { id: 11, name: '子菜单1' },
            { id: 12, name: '子菜单2' }
          ]
        },
        {
          id: 2,
          name: '菜单2',
          children: []
        }
      ]
    }
  }
}
</script>

<!-- MenuItem.vue -->
<template>
  <div>
    <div @click="toggle">
      {{ item.name }}
      <span v-if="hasChildren">{{ isOpen ? '-' : '+' }}</span>
    </div>
    <div v-show="isOpen && hasChildren">
      <menu-item
        v-for="child in item.children"
        :key="child.id"
        :item="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    item: Object
  },
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    hasChildren() {
      return this.item.children && this.item.children.length
    }
  },
  methods: {
    toggle() {
      if (this.hasChildren) {
        this.isOpen = !this.isOpen
      }
    }
  }
}
</script>

响应式设计考虑

/* 移动端适配 */
@media (max-width: 768px) {
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 80%;
    height: 100vh;
    z-index: 100;
  }
  .menu-toggle {
    display: block;
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 101;
  }
}

以上方法可以根据实际需求选择使用，从简单显示隐藏到复杂多级菜单都能实现，同时考虑了动画效果和响应式设计。