前言

由于项目主页面数据较多，需要通屏展示，所以要将左侧导航做成可以折叠的效果。
效果如下（请忽略一下gif图的水印吧 T^T）：

鼠标移入左侧蓝色按钮，导航从左侧缓慢滑出，右面内容加遮罩层；点击右面遮罩层部分，遮罩层消失，导航向左缓慢滑出。

开始

上代码：

app.vue

<template>
  <div>
      <el-container>
        <span class="slideIcon" @mouseover="open">
          <img src="../../assets/img/icon/leftSlide.svg" alt="" >
        </span>
        <el-aside 
	          style="width:201px;position:absolute;z-index:9999;" 
	          :class="{'open':!isCollapse}" 
	          ref="leftAside">
          	<LEFT></LEFT>
        </el-aside>
        <div class="popContainer" 
        		ref="msk" 
        		v-if="!isCollapse"
        		@click="closeMenu($event)"></div>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
  </div>
</template>

<script>
import LEFT from './layout/left.vue' 
export default {
  name: 'app',
  data() {
    return {
      isCollapse:true
    };
  },
  methods:{
    open(){
      this.isCollapse = false;
    },
    closeMenu(ev){
      if (this.$refs.msk.contains(ev.target)) {
　　　　　　this.isCollapse = true;
　　　　}
    }
    
  },
  created(){

  },
  mounted(){
    
  },
  components: { LEFT }
};
</script>

<style scoped>
  .el-icon{
      position: absolute;
      top: 70px;
      font-size: 20px;
      left: 10px;
      cursor: pointer;
  }
  .el-main{
    height: 100%!important;
    padding:20px 100px;
  }
  .el-aside{
    left:-204px;
    transition:left .3s ease-in-out;
  }
  .open{
    left:0;
  }
  @media screen and (max-width:1440px){
    .el-main{
      padding:20px 50px;
    }
  }

  .popContainer{
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 998;
      background: rgba(0,0,0,0.2);
      transition: opacity 1s ease-in-out 1s;
  }
  .slideIcon{
    padding: 5px 3px;
    background-color: #dceffe;
    height: 30px;
    border-radius: 4px;
    position: absolute;
    top: 85px;
    left: 20px;
    border: 1px solid #3a629d;
    cursor: pointer;
  }
</style>

这样就能基本实现。

在此记录解决问题的过程，也给小伙伴们一些思路。如有不严谨的地方还请不吝赐教。