vue拖拽

<template>
  <div class="box" ref="box">
    <div class="left" :style="{width: leftOffsetPercent}">
      <button>success</button>
    </div>
    <div class="center" @mousedown="mouseDown" id="center" :style="{left: triggerLeft, width: `${triggerWidth}px`}"></div>
    <div class="right" :style="{left: leftOffsetPercent}"></div>
  </div>
</template>
<style>
  .box{
    width: 500px;
    height: 200px;
    background-color: pink;
    position: relative;
  }
  .left{
    width: 200px;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
  }
  .center{
    width: 8px;
    height: 100%;
    cursor: col-resize;
    position: absolute;
    top: 0;
    background-color: yellow;
    z-index: 1;
  }
  .right{
    position: absolute;
    height: 100%;
    background-color: blue;
    right: 0;
    bottom: 0;
  }
</style>
<script>
export default {
  props: {
    triggerWidth: {
      type: Number,
      default: 14
    },
    min: {
      type: Number,
      default: 0.1
    },
    max: {
      type: Number,
      default: 0.9
    }
  },
  data () {
    return {
      leftOffset: 0.3,
      canMove: true,
      initOffset: 0
    }
  },
  computed: {
    leftOffsetPercent () {
      return `${this.leftOffset*100}%`
    },
    triggerLeft () {
      return `calc(${this.leftOffset*100}% - ${this.triggerWidth/2}px)`
    }
  },
  methods : {
    mouseDown (e) {
      document.addEventListener('mousemove', this.move)
      document.addEventListener('mouseup', this.moveUp)
      this.initOffset = e.pageX - e.srcElement.getBoundingClientRect().left
      this.canMove = true
    },
    move (e) {
      console.log(this.canMove)
      if(!this.canMove) return
      const outerRect = this.$refs.box.getBoundingClientRect()
      // const offset = e.pageX - outerRect.left
      let leftOffset = (e.pageX - this.initOffset + this.triggerWidth /2 - outerRect.left) / outerRect.width
      if(leftOffset < this.min) {
        leftOffset = this.min
      }
      if(leftOffset > this.max) {
        leftOffset = this.max
      }
      this.leftOffset = leftOffset
    },
    moveUp () {
      this.canMove = false
    }
  }
}
</script>