左侧拽动（vue2）

<template>
  <div class="sub-page-layout">
    <div
      class="sider-layout"
      :style="`width:${width}px;margin-left:-${subPageIsCollapse || fullScreen ? width + 20 : 0}px`"
      :class="{ collapse: subPageIsCollapse || fullScreen }"
    >
      <slot name="sider" />
      <div v-if="!fullScreen" class="collapse-hander" :class="{ active: isMousemove }" @mousedown.prevent="onMousedown">
        <div class="collapse-hander-button" @click="changeCollapse">
          <i
            :class="{
              'el-icon-arrow-left': !subPageIsCollapse,
              'el-icon-arrow-right': subPageIsCollapse,
            }"
          />
        </div>
      </div>
    </div>
    <div class="sub-page-content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'material',
  data() {
    return { width: 250, isMousemove: false }
  },
  mounted() {
    document.addEventListener('mousemove', this.onMousemove)
    document.addEventListener('mouseup', this.onMouseup)
    this.$once('hook:beforeDestroy', () => {
      document.removeEventListener('mousemove', this.onMousemove)
      document.removeEventListener('mouseup', this.onMouseup)
    })
  },
  methods: {
    changeCollapse() {
      this.TOGGLE_IS_COLLAPSE(!this.subPageIsCollapse)
    },
    onMousemove(e) {
      if (this.isMousemove) {
        document.body.style.cursor = 'col-resize'
        var endX = e.clientX
        var moveLen = endX - this.startX
        this.startX = endX
        let width = this.width
        width += moveLen
        if (width > 350) {
          this.width = 350
        } else if (width < 250) {
          this.width = 250
        } else {
          this.width = width
        }
      }
    },
    onMouseup() {
      if (this.isMousemove) {
        document.body.style.cursor = ''
        this.isMousemove = false
      }
    },
    onMousedown(e) {
      this.startX = e.clientX
      this.isMousemove = true
    },
  },
}
</script>
<style lang="scss" scoped>
.sub-page-layout {
  display: flex;
  height: 100%;
  background-color: #f9f9f9;
  .sider-layout {
    flex-shrink: 0;
    flex-grow: 0;
    background-color: #fff;
    position: relative;
    transition: margin 300ms ease-in-out;
    .collapse-hander {
      position: absolute;
      height: 100%;
      top: 0;
      right: -2px;
      width: 2px;
      cursor: col-resize;
      z-index: 2;
      &.active,
      &:hover {
        &::before {
          content: ' ';
          width: 100%;
          height: 100%;
          position: absolute;
          background-color: #2683ff;
          z-index: 5;
        }
      }
      .collapse-hander-button {
        text-align: center;
        cursor: pointer;
        position: absolute;
        top: 50%;
        left: 0;
        width: 20px;
        height: 40px;
        line-height: 40px;
        border-radius: 0px 3px 2px 0px;
        border: 1px solid #e1dbdb;
        &:hover {
          background-color: #2683ff;
          color: #fff;
          border-color: #2683ff;
        }
      }
    }
  }
  .sub-page-content {
    height: 100%;
    flex-grow: 1;
    overflow: hidden;
    margin-left: 20px;
    background-color: #fff;
  }
}
</style>