elementplus实现左侧菜单栏收缩与展开

1.页面结构

Home.vue下包含aside.vue和menu.vue

 2.TAside.vue el-menu左侧菜单栏显示

注意：

1. 要使用收缩与展开，el-aside必须设置width="collapse"，否则收缩展开会出现收缩后，el-aside宽度不变窄
2. 需要使用动态改变展开收缩值 :collapse="isCollapse"
3. @open="handleOpen"展开后改变isCollapse的值（@close="handleClose"不生效也不影响效果）
4. :collapse-transition="false"关闭动画效果
5.  el-menu-item中的菜单项必须放在template中，且solt为title否则，展开收缩的会不包含菜单文字{{menu.authName}}
6. 必须设置.el-menu-vertical-demo:not(.el-menu--collapse)样式

3.TMain.vue中设置展开收缩按钮

    

      
      

        
          
        
      
      
      
....

4.TAside.vue和TMain.vue页面共享的isCollapse

isCollapse有两个页面的父级页面Home.vue通过provide注入响应式数据后 ，子页面inject获取，更改后也会具有响应性

import { provide, ref} from 'vue'
// 组合式API引入后可以直接使用，不需要再到components中引入
import TAside from '@/components/TAside.vue'
import TMain from '@/components/TMain.vue'
// 注入左侧菜单栏显示与否值
const isCollapse = ref(false);
provide("isCollapse", isCollapse);

5.效果