sisweb/src/layout/aside.vue

<template>
  <el-menu
     @mouseenter.native="open_o"
     @mouseleave.native="close_s"
    default-active="1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="Boolean(isCollapse)"
    :collapse-transition="false"
    unique-opened="true"
    mode="vertical"
    background-color="#545c64"
    text-color="#fff"
  >
  <div>
    <el-menu-item index="0" @click="open">
      <i class="el-icon-s-operation"></i>
    </el-menu-item>

    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>

        <span slot="title">导航一</span>
      </template>

      <el-menu-item index="1-1-1">选项1-1</el-menu-item>

      <el-menu-item index="1-2-1">选项2-1</el-menu-item>

      <el-menu-item index="1-3-1">选项3-1</el-menu-item>
    </el-submenu>

    <el-submenu index="6" @click="open">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">导航一</span>
      </template>

      <el-submenu index="1-1">
        <span slot="title">选项1</span>
        <el-menu-item index="1-1-1">选项1-1</el-menu-item>
      </el-submenu>

      <el-submenu index="1-2">
        <span slot="title">选项2</span>
        <el-menu-item index="1-2-1">选项2-1</el-menu-item>
      </el-submenu>

      <el-submenu index="1-3">
        <span slot="title">选项3</span>
        <el-menu-item index="1-3-1">选项3-1</el-menu-item>
      </el-submenu>
    </el-submenu>
    </div>
  </el-menu>
</template>

<script>
import { mapMutations , mapGetters} from "vuex";
export default {
  data() {
    return {
      isCollapse: "asa",
    };
  },
  created() {},
  methods: {
    ...mapMutations(["changeZ","changeY"]),
    
    close_s(){
      console.log("ooooo")
      this.changeZ("width:1%");
      this.changeY("width:99%");
      this.isCollapse = "kik"
    },
    open_o(){
      this.changeZ("width:7%");
      this.changeY("width:93%");
      this.isCollapse = null
    },
    open() {
      if(this.isCollapse){
        console.log("opopop")
        this.changeZ("width:7%");
        this.changeY("width:93%");
        this.isCollapse = null

      }else{
        this.isCollapse = "lko"
        this.changeZ("width:1%");
        this.changeY("width:99%");
      }
    },
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
  },
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>