vue实现对左边菜单的折叠与展开

在el-menu中使用以下两种属性

collapse

是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）

boolean

—

false

collapse-transition

是否开启折叠动画

boolean

—

true

具体实现代码

1.添加属性，并进行动态绑定即：，如果没有：则不识别。collapse-transition的存在是为了让折叠不卡顿。

<el-menu background-color="#333744" text-color="#fff"
active-text-color="#1495E7" unique-opened :collapse="isCollapse" :collapse-transition="false">

2.在datas中添加变量

//是否折叠
isCollapse: false

3.添加折叠点击事件

<div class="toggle-button" @click="toggleCollapse">|||</div>

// 点击按钮实现菜单的折叠与展开
toggleCollapse(){
  this.isCollapse = !this.isCollapse
}

4.实现菜单框跟随菜单动态收缩与展开

<el-aside :width="isCollapse ?'64px':'200px'">