elementui sidebar

ElementUI Sidebar 基础使用

ElementUI 的 Sidebar 组件用于创建侧边栏导航，通常与 el-menu 结合使用。以下是一个基础示例：

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-document"></i>
          <span>文档</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>主内容区域</el-main>
  </el-container>
</template>

侧边栏折叠功能

实现侧边栏的折叠功能需要结合 el-menu 的 collapse 属性：

<template>
  <el-container>
    <el-aside :width="isCollapse ? '64px' : '200px'">
      <el-menu
        :collapse="isCollapse"
        default-active="1"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span>首页</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-button @click="isCollapse = !isCollapse">切换折叠</el-button>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false
    }
  }
}
</script>

嵌套菜单实现

对于多级菜单，可以使用 el-submenu 组件：

<el-menu
  default-active="1-1"
  class="el-menu-vertical-demo"
  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>

路由集成

将侧边栏与 Vue Router 集成：

<el-menu
  :router="true"
  default-active="/home"
  class="el-menu-vertical-demo">
  <el-menu-item index="/home">
    <i class="el-icon-menu"></i>
    <span>首页</span>
  </el-menu-item>
  <el-menu-item index="/about">
    <i class="el-icon-document"></i>
    <span>关于</span>
  </el-menu-item>
</el-menu>

自定义样式

通过 CSS 覆盖默认样式：

.el-menu-vertical-demo {
  height: 100%;
}

.el-menu-item {
  transition: all 0.3s;
}

.el-menu-item:hover {
  background-color: #434a50 !important;
}

响应式布局

结合媒体查询实现响应式：

@media screen and (max-width: 768px) {
  .el-aside {
    width: 64px !important;
  }
  .el-menu--collapse {
    width: 64px;
  }
}

这些方法涵盖了 ElementUI Sidebar 的常见使用场景，可以根据实际需求进行组合和扩展。