vue3侧边栏的展开和收起
时间: 2025-01-08 10:09:33 浏览: 11
### 实现 Vue3 项目中的侧边栏展开与折叠
为了实现在 Vue3 中的侧边栏(sidebar)展开与折叠的效果,可以采用 `vue-sidebar-menu` 组件来简化开发过程[^1]。此组件提供了丰富的配置选项用于自定义菜单样式和行为。
对于更细粒度控制的需求,比如关闭折叠时的动画效果以及动态切换菜单的状态,则可以根据需求调整相应的属性设置。具体来说,在模板部分通过绑定`:collapse-transition="false"` 来禁用默认的过渡动画,确保文字不会逐个消失;而 `:collapse="isCollapse"` 属性则决定了当前菜单是否处于折叠状态[^2]。
另外,默认情况下可以让某些子菜单保持打开状态,这有助于提升用户体验,特别是当用户初次访问页面时希望看到更多导航项。此时可利用 `default-openeds` 属性指定哪些顶级菜单应该被自动展开[^3]。
下面是基于上述描述的一个简单实例:
```html
<template>
<div id="app">
<!-- 使用 el-button 控制 isCollapse 的布尔值 -->
<el-button @click="toggleSidebar">Toggle</el-button>
<!-- 菜单区域 -->
<aside :class="{ 'menu-expanded': !isCollapse }">
<vue-sidebar-menu
:collapsed="isCollapse"
:show-one-child="true"
width="200px"
collapsed-width="50px"
:defaultOpeneds="['1']"
>
<template v-slot:item="{ item }">
{{item.title}}
</template>
</vue-sidebar-menu>
</aside>
<!-- 主要内容区 -->
<main>Main Content Area</main>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const isCollapse = ref(false);
function toggleSidebar() {
isCollapse.value = !isCollapse.value;
}
</script>
<style scoped>
.menu-expanded {
transition: all .3s ease-in-out;
}
aside {
height: 100vh;
overflow-y: auto;
}
</style>
```
在这个例子中,点击按钮会触发 `toggleSidebar()` 方法改变 `isCollapse` 变量的值,从而影响到 `<vue-sidebar-menu>` 组件的行为,达到显示或隐藏左侧菜单的目的。同时设置了 `width` 和 `collapsed-width` 参数来自定义完全展示和收缩后的宽度尺寸,并指定了第一个顶层节点(`'1'`)作为初始状态下应始终保持开放的对象列表之一。
阅读全文