vue实现左边侧边栏

实现左侧边栏的基本结构

在Vue中实现左侧边栏通常需要结合<template>、<script>和<style>三部分。以下是一个基础实现：

<template>
  <div class="layout">
    <div class="sidebar">
      <!-- 侧边栏内容 -->
      <ul>
        <li v-for="item in menuItems" :key="item.id">
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="main-content">
      <!-- 主内容区域 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, title: '首页' },
        { id: 2, title: '产品' },
        { id: 3, title: '关于我们' }
      ]
    }
  }
}
</script>

<style scoped>
.layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 250px;
  background-color: #f0f0f0;
  padding: 20px;
}

.main-content {
  flex: 1;
  padding: 20px;
}
</style>

使用Vue Router实现导航

如果侧边栏需要导航功能，可以集成Vue Router：

<template>
  <div class="sidebar">
    <router-link 
      v-for="item in menuItems" 
      :key="item.id" 
      :to="item.path"
      active-class="active"
    >
      {{ item.title }}
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, title: '首页', path: '/' },
        { id: 2, title: '产品', path: '/products' },
        { id: 3, title: '关于我们', path: '/about' }
      ]
    }
  }
}
</script>

<style scoped>
.sidebar {
  width: 250px;
}

.router-link-active {
  font-weight: bold;
  color: #42b983;
}
</style>

可折叠侧边栏实现

添加折叠功能可以通过控制CSS类来实现：

<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <button @click="toggleCollapse">
      {{ isCollapsed ? '展开' : '折叠' }}
    </button>
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

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

<style scoped>
.sidebar {
  width: 250px;
  transition: width 0.3s ease;
}

.sidebar.collapsed {
  width: 60px;
  overflow: hidden;
}
</style>

使用UI组件库

如果使用Element UI等组件库，可以简化实现：

<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :collapse="isCollapse"
  >
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span slot="title">首页</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-document"></i>
      <span slot="title">文档</span>
    </el-menu-item>
  </el-menu>
</template>

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

<style>
.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

响应式侧边栏

针对移动设备添加响应式设计：

<template>
  <div>
    <button class="mobile-toggle" @click="toggleSidebar">
      菜单
    </button>
    <div class="sidebar" :class="{ 'show': showSidebar }">
      <!-- 侧边栏内容 -->
    </div>
  </div>
</template>

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

<style>
.mobile-toggle {
  display: none;
}

@media (max-width: 768px) {
  .mobile-toggle {
    display: block;
  }
  .sidebar {
    position: fixed;
    left: -250px;
    transition: left 0.3s;
  }
  .sidebar.show {
    left: 0;
  }
}
</style>