vue实现侧边菜单

Vue 侧边菜单实现方法

使用 Element UI 的 el-menu 组件

安装 Element UI：

npm install element-ui

在 main.js 中引入：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

组件代码示例：

<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span>导航二</span>
    </el-menu-item>
  </el-menu>
</template>

<style>
.el-menu-vertical {
  height: 100vh;
}
</style>

自定义侧边菜单实现

基础结构：

<template>
  <div class="sidebar">
    <div v-for="item in menuItems" :key="item.id" class="menu-item">
      <div @click="toggleSubmenu(item)">
        {{ item.title }}
        <span v-if="item.children">{{ item.isOpen ? '▼' : '▶' }}</span>
      </div>
      <div v-if="item.children && item.isOpen" class="submenu">
        <div v-for="child in item.children" :key="child.id" class="submenu-item">
          {{ child.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          id: 1,
          title: '首页',
          isOpen: false
        },
        {
          id: 2,
          title: '产品',
          isOpen: false,
          children: [
            { id: 21, title: '产品列表' },
            { id: 22, title: '产品分类' }
          ]
        }
      ]
    }
  },
  methods: {
    toggleSubmenu(item) {
      if (item.children) {
        item.isOpen = !item.isOpen
      }
    }
  }
}
</script>

<style>
.sidebar {
  width: 200px;
  background: #f5f5f5;
  height: 100vh;
}
.menu-item {
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}
.submenu {
  padding-left: 20px;
}
.submenu-item {
  padding: 8px 0;
}
</style>

响应式侧边菜单实现

添加响应式功能：

<template>
  <div>
    <button @click="toggleSidebar">☰</button>
    <div :class="['sidebar', { 'sidebar-collapsed': isCollapsed }]">
      <!-- 菜单内容 -->
    </div>
  </div>
</template>

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

<style>
.sidebar {
  width: 250px;
  transition: width 0.3s;
}
.sidebar-collapsed {
  width: 60px;
}
button {
  display: none;
}
@media (max-width: 768px) {
  button {
    display: block;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 100;
  }
  .sidebar-collapsed {
    transform: translateX(-100%);
  }
}
</style>

使用 Vue Router 集成

添加路由功能：

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

Vue.use(Router)

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

菜单组件更新：

<template>
  <el-menu
    router
    :default-active="$route.path"
    class="el-menu-vertical">
    <el-menu-item index="/">
      <i class="el-icon-menu"></i>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="/products">
      <i class="el-icon-document"></i>
      <span>产品</span>
    </el-menu-item>
  </el-menu>
</template>