左侧是侧边栏，可以点击按钮折叠隐藏左侧，可以鼠标拖拽调整宽度，拖拽时距离最左边很近的时候自动贴合。
效果：

代码：

<template>
  <div class="fold-left-box">
    <div
      class="fold-left-box-left"
      :style="{width: asideWidth + 'px'}"
      v-show="asideWidth > 0"
    >
      <slot name="left"></slot>
    </div>
    <div
      class="fold-left-box-line"
      :style="{cursor: asideWidth ===0 ? '' : 'col-resize'}"
      ref="drag"
    >
      <el-button
        :icon="asideWidth ===0 ? 'el-icon-arrow-right': 'el-icon-arrow-left'"
        size="mini"
        circle
        class="fold-left-box-line-button"
        @click="foldLeft"
      ></el-button>
    </div>
    <div class="fold-left-box-main">
      <slot name="main"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'FoldLeft',
  data () {
    return {
      asideWidth: 300,
    }
  },
  props: {

  },
  mounted () {
    this.bindDrop()
  },
  methods: {
    // 折叠事件
    foldLeft () {
      this.asideWidth = this.asideWidth === 0 ? 300 : 0
    },
    // 绑定鼠标点击事件
    bindDrop () {
      const _this = this
      const drag = this.$refs.drag
      drag.onmousedown = function (e) {
        document.onmousemove = function (e) {
          _this.asideWidth += e.movementX
          if (_this.asideWidth < 20) {
            document.onmouseup()
            _this.asideWidth = 0
          }
        };
        document.onmouseup = function () {
          document.onmousemove = null
          document.onmouseup = null
        }
        return false
      }
    },
  },
}
</script>

<style lang="less" scoped>
.fold-left-box {
  height: 100%;
  overflow: hidden;
  display: flex;
  &-left {
    height: 100%;
    overflow: hidden;
  }
  &-line {
    width: 4px;
    height: 100%;
    position: relative;
    border-left: 1px solid #e6e6e6;

    &-button {
      position: absolute;
      top: 50%;
      right: -10px;
    }
  }
  &-main {
    height: 100%;
    flex: 1;
    padding-left: 12px;
    overflow: hidden;
  }
}
</style>

主要方法就是鼠标点击后拖动的方法 bindDrop
调整宽度的是这个

_this.asideWidth += e.movementX

距离左边很近了自动贴合的是这个

if (_this.asideWidth < 20) {
   	document.onmouseup()
   _this.asideWidth = 0
}

其他小细节就是样式，折叠起来的时候去掉鼠标样式，折叠按钮箭头变换。

拖拽有其他的实现方法，drap那些，不过拖动的时候会有一个禁用的鼠标样式，不知道怎么去掉。

使用例子

<FoldLeft>
    <template v-slot:left>
      left123
    </template>
    <template v-slot:main>
      main456
    </template>
  </FoldLeft>