当前位置：首页 > VUE

vue侧边栏的实现

2026-01-12 01:26:58VUE

侧边栏基础实现

在Vue中实现侧边栏通常需要结合组件化思想和CSS布局。以下是一个基础实现方式：

创建Sidebar.vue组件：

<template>
  <div class="sidebar">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'Sidebar'
}
</script>

<style scoped>
.sidebar {
  width: 200px;
  height: 100vh;
  background: #2c3e50;
  position: fixed;
  left: 0;
  top: 0;
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.sidebar a {
  color: white;
  padding: 10px 0;
  text-decoration: none;
}
</style>

动态折叠侧边栏

实现可折叠的侧边栏需要添加状态管理：

vue侧边栏的实现

<template>
  <div class="sidebar" :class="{ 'collapsed': isCollapsed }">
    <button @click="toggleCollapse">切换</button>
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
  </div>
</template>

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

<style scoped>
.sidebar {
  width: 200px;
  transition: width 0.3s;
}
.sidebar.collapsed {
  width: 50px;
}
</style>

结合Vuex的状态管理

对于大型应用，建议使用Vuex管理侧边栏状态：

// store.js
export default new Vuex.Store({
  state: {
    sidebarOpen: true
  },
  mutations: {
    toggleSidebar(state) {
      state.sidebarOpen = !state.sidebarOpen
    }
  }
})

组件中使用：

vue侧边栏的实现

<template>
  <div class="sidebar" :class="{ 'collapsed': !$store.state.sidebarOpen }">
    <button @click="$store.commit('toggleSidebar')">切换</button>
  </div>
</template>

响应式侧边栏

添加响应式设计，在小屏幕设备上自动隐藏：

<script>
export default {
  computed: {
    isMobile() {
      return window.innerWidth < 768
    }
  },
  watch: {
    isMobile(newVal) {
      if (newVal) {
        this.$store.commit('closeSidebar')
      }
    }
  }
}
</script>

动画效果优化

为侧边栏添加平滑的动画效果：

.sidebar {
  transition: transform 0.3s ease;
}
.sidebar.collapsed {
  transform: translateX(-150px);
}

第三方组件库实现

使用Element UI等组件库快速实现：

<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical"
    :collapse="isCollapsed">
    <el-menu-item index="1">
      <i class="el-icon-menu"></i>
      <span slot="title">首页</span>
    </el-menu-item>
  </el-menu>
</template>