vue中实现左右拖拽自适应

<template>
  <div class="wrap">
    <div class="box" ref="wrapper">
      <div class="left" :style="{width: lwidth}" @click="handelChange">zuo</div>
      <div class="bar" :style="{left: bar_width}" @mousedown="handelMousedown" ref="bar"></div>
      <div class="right" :style="{left: lwidth}">you</div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  data() {
    return {
      left_width: 0.5,
      // 记录鼠标按下还是抬起
      isMousemouse: false,
      //鼠标距离bar容器左侧的距离
      initWidth: 0
    }
  },
  computed: {
    lwidth(){
      return (this.left_width * 100) + '%'
    },
    bar_width(){
      // 5 是bar的一半宽度
      return `calc(${this.left_width *100 }% - 5px)`
    }
  },
  methods: {
    handelChange(){
          this.left_width -= 0.05
          console.log(this.$refs.bar.offsetWidth / 2);
          
        },
        handelMousedown(event){
          this.isMousemouse = true

          this.initWidth = event.pageX - event.srcElement.getBoundingClientRect().left
          // console.log(this.initWidth);
          
          // 移动的时候给document绑定事件，在容器外也能移动
          document.addEventListener('mousemove',this.handelMousemove)
          // 在框外停下鼠标不能移动，也给document绑定事件
          document.addEventListener('mouseup',this.handelMouseup)
        },
        handelMousemove(event){
          if(this.isMousemouse){
            // event.pageX:鼠标指针相对于该网页的水平位置；getBoundingClientRect().left: 容器距离页面左侧距离
            // MBoffset: 鼠标距离盒子左侧的位置
            // initWidth：鼠标距离bar容器左侧的距离
            let MBoffsetPrec = (event.pageX - this.$refs.wrapper.getBoundingClientRect().left - this.initWidth + this.$refs.bar.offsetWidth / 2)/this.$refs.wrapper.getBoundingClientRect().width

            const min = (this.$refs.bar.offsetWidth / 2) /this.$refs.wrapper.getBoundingClientRect().width
            const max = (this.$refs.wrapper.getBoundingClientRect().width - (this.$refs.bar.offsetWidth / 2)) / this.$refs.wrapper.getBoundingClientRect().width

            if(MBoffsetPrec <  min){
              MBoffsetPrec = min
              return this.left_width = MBoffsetPrec

            }else if(MBoffsetPrec > max){
              return MBoffsetPrec = max
            }
            this.left_width = MBoffsetPrec
          }else{
            return
          }
        },
        handelMouseup(){
          this.isMousemouse = false
        }
  }
}
</script>
<style lang="scss">
.box{
      width: 500px;
      height: 300px;
      background-color: pink;
      position: relative;
      overflow: hidden;
    }
    .left{
      position: absolute;
      top: 0;
      background-color: skyblue;
      /* width: 30%; */
      height: 100%;
    }
    .bar{
      position: absolute;
      height: 100%;
      width: 10px;
      background-color: teal;
      z-index: 2;
      user-select: none;
    }
    .right{
      position: absolute;
      top: 0;
      /* left: 30%; */
      right: 0;
      bottom: 0;
      background-color: yellow;
      height: 100%;
    }
</style>