菜单栏展开与折叠

菜单栏展开与折叠

1. 在页面菜单侧边栏上方加一个div。并添加点击事件

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

2. 侧边栏菜单启用collapse属性，是否水平折叠收起菜单，collapse-transition取消折叠动画，

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

3. collapse的值动态绑定，在data中定义isCollapse取反

 data() {
    return {
      // 左侧菜单数据
      menulist: [],
      // 是否折叠
      isCollapse: false,
    };
  },

4，点击事件：点击按钮切换菜单的折叠与展开。 在data中存入iscollapse布尔值，menu中加入 :collapse=“isCollapse”，属性点击时取反isCollapse，菜单栏就会收起

toggleCollapse() {
  this.isCollapse = !this.isCollapse;
},

5.菜单栏宽度跟随展开折叠变化

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