### Vue3
和 Element
Plus 实现 Aside 左侧导航栏可
折叠效果
以下是基于 Vue3
和 Element
Plus 的左侧导航栏可
折叠功能的实现方法：
#### 1. 安装依赖
首先需要安装 `
element
-plus` 库，可以通过 npm 或 yarn 进行安装。
```bash
npm install
element
-plus --save
```
或者
```bash
yarn add
element
-plus
```
#### 2. 配置项目引入
Element
Plus
在项目的入口文件（通常是 main.js 或 main.ts 中），全局注册
Element
Plus 并按需加载样式。
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import
Element
Plus from '
element
-plus';
import '
element
-plus/dist/index.css';
const app = createApp(App);
app.use(
Element
Plus);
app.mount('#app');
```
#### 3. 编写模板结构
创建一个包含左侧导航栏
和右侧主要内容区域的基础布局。通过绑定动态属性控制
菜单的展开/收起状态。
```html
<template>
<div class="container">
<!
-- 头部
-->
<header>Header</header>
<!
-- 主体部分
-->
<section class="main
-section">
<!
-- 左侧导航栏
-->
<aside :class="{
collapse: is
Collapse }">
<
el-menu
default
-active="1"
class="
el-menu-vertical
-demo"
@open="handleOpen"
@close="handleClose"
:
collapse="is
Collapse"
>
<
el-sub
menu index="1">
<template #title>
<i class="
el-icon
-location"></i>
<span>导航一</span>
</template>
<
el-menu-item
-group title="分组一">
<
el-menu-item index="1
-1">选项一</
el-menu-item>
<
el-menu-item index="1
-2">选项二</
el-menu-item>
</
el-menu-item
-group>
</
el-sub
menu>
<
el-menu-item index="2">
<i class="
el-icon
-menu"></i>
<template #title>导航二</template>
</
el-menu-item>
</
el-menu>
</aside>
<!
-- 右侧内容区
-->
<main>
<button @click="toggleSidebar">切换侧边栏</button>
Content Area
</main>
</section>
</div>
</template>
```
#### 4. 添加逻辑处理
定义数据模型用于存储当前
菜单的状态，并提供相应的方法来触发
菜单的
折叠或展开操作。
```javascript
<script>
export default {
data() {
return {
is
Collapse: false, // 控制
菜单是否
折叠，默认不
折叠
};
},
methods: {
handleOpen(key, keyPath) {
console.log('打开
菜单项:', key, keyPath); // 打印被打开的
菜单路径
},
handleClose(key, keyPath) {
console.log('关闭
菜单项:', key, keyPath); // 打印被关闭的
菜单路径
},
toggleSidebar() {
this.is
Collapse = !this.is
Collapse; // 切换
菜单折叠状态
},
},
};
</script>
```
#### 5. 设置样式调整视觉表现
为了使界面更加美观
和谐统一，在 CSS 文件中加入自定义样式规则。
```css
<style scoped>
.container {
display: flex;
flex
-direction: column;
}
.main
-section {
display: flex;
height: calc(100vh
- 60px); /* 减去头部高度 */
}
aside {
transition: width 0.3s ease
-in
-out;
overflow
-x: hidden;
white
-space: nowrap;
text
-overflow:
ellipsis;
}
.
collapse {
width: 64px !important;
}
.
el-menu-vertical
-demo:not(.
el-menu--collapse) {
width: 200px;
min
-height: 400px;
}
</style>
```
以上代码实现了左侧导航栏支持手动
折叠的功能[^1]，并提供了按钮交互以改变其
显示模式[^2]。
#### 注意事项
当设置 `
collapse` 属性为 true 后，子节点中的
文字会被隐藏掉仅保留
图标；如果希望即使处于
收缩状态下也能看到完整的标题，则可以考虑额外增加悬浮提示或其他形式补充说明信息[^3]。
---
扫一扫
6159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
