vue.js实现菜单

Vue.js 实现菜单的方法

使用 Vue Router 实现导航菜单

在 Vue.js 中，可以利用 Vue Router 创建动态导航菜单。通过定义路由并在组件中渲染菜单项，可以实现页面间的无缝切换。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/about', name: 'about', component: About }
  ]
})

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

创建可折叠的侧边栏菜单

通过 Vue 的数据绑定和条件渲染，可以实现可折叠的侧边栏菜单。

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

<script>
export default {
  data() {
    return {
      isMenuOpen: false,
      menuItems: [
        { id: 1, text: 'Home', link: '/' },
        { id: 2, text: 'Products', link: '/products' },
        { id: 3, text: 'Contact', link: '/contact' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

使用 Vuex 管理菜单状态

对于大型应用，可以使用 Vuex 集中管理菜单的状态，实现跨组件共享。

// store/modules/menu.js
export default {
  state: {
    isCollapsed: false
  },
  mutations: {
    toggleCollapse(state) {
      state.isCollapsed = !state.isCollapsed
    }
  },
  actions: {
    toggleMenu({ commit }) {
      commit('toggleCollapse')
    }
  }
}

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <div :class="{ 'menu-collapsed': isCollapsed }">
      <!-- 菜单内容 -->
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('menu', ['isCollapsed'])
  },
  methods: {
    ...mapActions('menu', ['toggleMenu'])
  }
}
</script>

响应式菜单设计

结合 CSS 媒体查询和 Vue 的响应式特性，可以创建适应不同屏幕尺寸的菜单。

<template>
  <div class="menu-container">
    <div class="desktop-menu" v-if="!isMobile">
      <!-- 桌面版菜单 -->
    </div>
    <button class="mobile-menu-button" v-else @click="showMobileMenu = !showMobileMenu">
      ☰
    </button>
    <div class="mobile-menu" v-if="isMobile && showMobileMenu">
      <!-- 移动版菜单 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMobileMenu: false,
      isMobile: window.innerWidth < 768
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.isMobile = window.innerWidth < 768
    }
  }
}
</script>

动态权限菜单实现

根据用户权限动态生成菜单项，实现权限控制。

<template>
  <ul>
    <li v-for="item in filteredMenu" :key="item.id">
      <router-link :to="item.path">{{ item.name }}</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    filteredMenu() {
      return this.allMenuItems.filter(item => {
        return this.userPermissions.includes(item.permission)
      })
    }
  },
  data() {
    return {
      userPermissions: ['view_dashboard', 'manage_users'],
      allMenuItems: [
        { id: 1, name: 'Dashboard', path: '/dashboard', permission: 'view_dashboard' },
        { id: 2, name: 'Users', path: '/users', permission: 'manage_users' },
        { id: 3, name: 'Settings', path: '/settings', permission: 'admin_access' }
      ]
    }
  }
}
</script>

菜单动画效果

为菜单添加过渡动画，提升用户体验。

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <transition name="slide">
      <div class="menu" v-if="showMenu">
        <!-- 菜单内容 -->
      </div>
    </transition>
  </div>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.3s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
}
</style>

这些方法涵盖了 Vue.js 中实现菜单的各种常见需求，包括基本导航、响应式设计、状态管理和权限控制等。根据具体项目需求，可以选择适合的方案或组合使用多种方法。