vue实现菜单调用

Vue实现菜单调用的方法

基础菜单组件实现

使用Vue的组件化特性创建一个可复用的菜单组件，通过v-for指令动态渲染菜单项。示例代码：

<template>
  <div class="menu">
    <ul>
      <li v-for="item in menuItems" :key="item.id" @click="handleClick(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '首页', path: '/' },
        { id: 2, name: '产品', path: '/products' },
        { id: 3, name: '关于', path: '/about' }
      ]
    }
  },
  methods: {
    handleClick(item) {
      this.$router.push(item.path)
    }
  }
}
</script>

嵌套子菜单实现

通过递归组件实现多级菜单结构。创建MenuItem.vue组件处理嵌套逻辑：

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

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

状态管理集成

对于复杂应用，建议使用Vuex管理菜单状态：

// store/modules/menu.js
export default {
  state: {
    activeMenu: null,
    menuItems: [...]
  },
  mutations: {
    SET_ACTIVE_MENU(state, payload) {
      state.activeMenu = payload
    }
  },
  actions: {
    selectMenu({ commit }, menuId) {
      commit('SET_ACTIVE_MENU', menuId)
    }
  }
}

响应式设计处理

结合CSS媒体查询实现菜单在不同设备上的响应式表现：

.menu {
  display: flex;
}

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
    position: fixed;
    top: 0;
    left: -100%;
    transition: left 0.3s;
  }

  .menu.active {
    left: 0;
  }
}

动态权限菜单

根据用户权限动态生成菜单结构，可在路由守卫或API请求后处理：

// 过滤有权限的菜单项
function filterMenuItems(allItems, userPermissions) {
  return allItems.filter(item => {
    if (item.children) {
      item.children = filterMenuItems(item.children, userPermissions)
      return item.children.length > 0
    }
    return userPermissions.includes(item.permission)
  })
}

动画效果增强

使用Vue的过渡系统为菜单添加动画：

<transition name="slide">
  <div class="submenu" v-show="isOpen">
    <!-- 子菜单内容 -->
  </div>
</transition>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
</style>