vue 实现侧边栏

实现侧边栏的基本结构

使用 Vue 的模板语法定义侧边栏的基础结构。侧边栏通常包含导航菜单和可折叠的子菜单。

<template>
  <div class="sidebar">
    <div class="sidebar-header">侧边栏标题</div>
    <ul class="sidebar-menu">
      <li v-for="item in menuItems" :key="item.id">
        <a href="#" @click="toggleSubMenu(item)">
          {{ item.title }}
          <span v-if="item.children">{{ item.expanded ? '−' : '+' }}</span>
        </a>
        <ul v-if="item.children && item.expanded">
          <li v-for="child in item.children" :key="child.id">
            <a href="#">{{ child.title }}</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

定义菜单数据与状态管理

在 Vue 的 data 或 setup 中定义菜单数据，并通过方法控制子菜单的展开与折叠。

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          id: 1,
          title: '首页',
          expanded: false,
          children: null
        },
        {
          id: 2,
          title: '产品',
          expanded: false,
          children: [
            { id: 21, title: '产品列表' },
            { id: 22, title: '产品详情' }
          ]
        }
      ]
    }
  },
  methods: {
    toggleSubMenu(item) {
      if (item.children) {
        item.expanded = !item.expanded;
      }
    }
  }
}
</script>

添加样式增强交互

使用 CSS 为侧边栏添加基础样式，包括背景色、悬停效果和子菜单缩进。

<style scoped>
.sidebar {
  width: 250px;
  background-color: #2c3e50;
  color: white;
  height: 100vh;
  padding: 20px 0;
}

.sidebar-header {
  padding: 10px 20px;
  font-size: 1.2em;
  border-bottom: 1px solid #34495e;
}

.sidebar-menu li {
  list-style: none;
}

.sidebar-menu a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

.sidebar-menu a:hover {
  background-color: #34495e;
}

.sidebar-menu ul ul {
  padding-left: 20px;
  background-color: #1a252f;
}
</style>

结合 Vue Router 实现路由跳转

如果侧边栏需要跳转页面，可以集成 Vue Router，将 <a> 替换为 <router-link>。

<li v-for="item in menuItems" :key="item.id">
  <router-link v-if="!item.children" :to="item.path">
    {{ item.title }}
  </router-link>
  <template v-else>
    <a @click="toggleSubMenu(item)">
      {{ item.title }}
      <span>{{ item.expanded ? '−' : '+' }}</span>
    </a>
    <ul v-if="item.expanded">
      <li v-for="child in item.children" :key="child.id">
        <router-link :to="child.path">{{ child.title }}</router-link>
      </li>
    </ul>
  </template>
</li>

响应式侧边栏（可选）

通过 Vue 的响应式数据和媒体查询实现侧边栏的折叠与展开功能，适合移动端适配。

data() {
  return {
    isCollapsed: false
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 60px;
    overflow: hidden;
  }
  .sidebar-header, .sidebar-menu a span {
    display: none;
  }
}

使用第三方库（如 Element UI）

如果需要快速实现，可以借助 UI 库如 Element UI 的 el-menu 组件。

<template>
  <el-menu
    default-active="1"
    class="sidebar"
    background-color="#2c3e50"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-submenu index="1">
      <template #title>
        <span>产品</span>
      </template>
      <el-menu-item index="1-1">产品列表</el-menu-item>
      <el-menu-item index="1-2">产品详情</el-menu-item>
    </el-submenu>
  </el-menu>
</template>