vue中左侧菜单栏收缩折叠

完整代码如下：

      <div class="errMdCont">
          <div class="collapse-btn">
              <div v-show="errMdList" class="errMdList">
                123123
              </div>
              <i v-if="!collapse" class="el-icon-d-arrow-right" @click="collapseChage"></i>
              <i v-else class="el-icon-d-arrow-left" :style="[unfold1]" @click="collapseChage"></i>
          </div>
        </div>


   data() {
        return {
            collapse: true,
            errMdList:true,
            unfold1:{ 'margin-left': 49+'%'},
        }
    },

       // 侧边栏折叠
       collapseChage() {
          this.collapse = !this.collapse;
          if(this.collapse){
            this.errMdList = true
          }else{
             this.errMdList = false
          }
    },


.errMdCont{
    min-height: 60vh;
  }
  .errMdList{
    width: 50%;
    min-height: 50vh;
    border: 1px solid #ddd;
    position: absolute;
  }
  .collapse-btn {
      cursor: pointer;
  }
  .collapse-btn:hover {
      background: transparent;
  }
  .el-icon-d-arrow-left,.el-icon-d-arrow-right{
      font-size: 20px;
      color: #d9ebfe;
      position: absolute;
      top: 50%;
  }