element UI 動態設置菜單欄的折疊與展開

1、操作按鈕

<el-container>
      <el-aside :width="isCollapse ? '64px' : '170px'">
        <div :class="toggleButton" @click="togleCollapse">
          <img src="../../assets/img/menu-toggle-line.png" style="top: 35%;position: relative;" />
        </div>
        <el-menu
          router
          unique-opened
          :default-active="$route.path"
          :collapse="isCollapse"
          :collapse-transition="false"
        >
          <el-menu-item :index="'/' + 'report/all'">
            <i class="el-icon-document"></i>
            <span slot="title">所有舉報</span>
          </el-menu-item>
          <el-menu-item :index="'/' + 'report/weChart'">
            <i class="el-icon-menu"></i>
            <span slot="title">微信舉報</span>
          </el-menu-item>
          <el-menu-item :index="'/' + 'report/net'">
            <i class="el-icon-document"></i>
            <span slot="title">網絡舉報</span>
          </el-menu-item>
          <el-menu-item :index="'/' + 'report/phone'">
            <i class="el-icon-setting"></i>
            <span slot="title">電話舉報</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-setting"></i>
            <span slot="title">其他方式</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-setting"></i>
            <span slot="title">電話咨詢</span>
          </el-menu-item>
          <el-menu-item index="7">
            <i class="el-icon-setting"></i>
            <span slot="title">草稿箱</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>

　

data() {
    return {
      // 默認不折疊
      isCollapse: false
    };
  },

　　點擊事件：

 // 菜單的折疊與展開
    togleCollapse() {
      this.isCollapse = !this.isCollapse;
    },

　　在計算屬性中 動態綁定class樣式，

computed: {
    toggleButton() {
      if (this.isCollapse) {
        return "minMargin";
      } else {
        return "maxMargin";
      }
    }
  }

　　css樣式：

.minMargin {
  width: 10px;
  height: 100%;
  position: absolute;
  cursor: pointer;
  margin-left: 64px;
}
.maxMargin {
  width: 10px;
  height: 100%;
  position: absolute;
  cursor: pointer;
  margin-left: 170px;
}