vue侧边栏怎么实现

实现Vue侧边栏的方法

使用Element UI的侧边栏组件

Element UI提供了现成的侧边栏组件，适合快速开发。安装Element UI后，可以直接使用el-menu组件实现侧边栏导航。

<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 #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>

自定义侧边栏组件

对于需要完全自定义的场景，可以手动创建侧边栏组件。通过Vue的响应式数据和事件绑定实现交互效果。

<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <div class="toggle-btn" @click="toggleSidebar">
      {{ isCollapsed ? '>' : '<' }}
    </div>
    <nav>
      <ul>
        <li v-for="item in menuItems" :key="item.path">
          <router-link :to="item.path">
            <i :class="item.icon"></i>
            <span v-if="!isCollapsed">{{ item.title }}</span>
          </router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
      menuItems: [
        { path: '/', title: '首页', icon: 'icon-home' },
        { path: '/about', title: '关于', icon: 'icon-info' }
      ]
    }
  },
  methods: {
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed
    }
  }
}
</script>

<style>
.sidebar {
  width: 250px;
  height: 100vh;
  background: #2c3e50;
  color: white;
  transition: width 0.3s ease;
}
.sidebar.collapsed {
  width: 60px;
}
.toggle-btn {
  padding: 10px;
  cursor: pointer;
  text-align: center;
}
nav ul {
  list-style: none;
  padding: 0;
}
nav li a {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
}
nav li a i {
  margin-right: 10px;
}
.sidebar.collapsed nav li a span {
  display: none;
}
</style>

结合Vue Router实现路由导航

侧边栏通常需要与路由系统配合使用。可以通过Vue Router的router-link组件实现导航功能。

<template>
  <div class="sidebar">
    <router-link
      v-for="route in routes"
      :key="route.path"
      :to="route.path"
      active-class="active"
      exact>
      {{ route.name }}
    </router-link>
  </div>
</template>

<script>
export default {
  computed: {
    routes() {
      return this.$router.options.routes.filter(route => route.meta?.showInSidebar)
    }
  }
}
</script>

<style>
.sidebar {
  width: 200px;
  background: #f0f0f0;
  padding: 20px;
}
.sidebar a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}
.sidebar a.active {
  background: #ddd;
}
</style>

响应式侧边栏实现

为了在不同屏幕尺寸下都能良好显示，可以结合CSS媒体查询实现响应式布局。

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 100;
  }
  .sidebar.open {
    transform: translateX(0);
  }
}

在Vue组件中添加控制逻辑：

<script>
export default {
  data() {
    return {
      isMobile: false,
      isSidebarOpen: false
    }
  },
  mounted() {
    this.checkScreenSize()
    window.addEventListener('resize', this.checkScreenSize)
  },
  methods: {
    checkScreenSize() {
      this.isMobile = window.innerWidth < 768
    },
    toggleSidebar() {
      this.isSidebarOpen = !this.isSidebarOpen
    }
  }
}
</script>