vue实现拖拽滑动分割面板

@mousedown.prevent="mousedown"

      mousedown() {
        document.addEventListener('mousemove', this.handleMouseMove, false);
        document.addEventListener('mouseup', this.handleMouseUp, false);
    },
    
    handleMouseMove(e) {
      
      const clientRect = this.$refs.mainContent.getBoundinGClientRect();
      const offset = e.pageX;
      const panelPercent = (offset / clientRect.width) * 100;
      this.panelPercent = panelPercent;
      this.mainContentWidth = offset;
      this.$refs.imgMove.style.left = panelPercent + '%';
      console.log('拖动中', this.panelPercent);
    },
    
    handleMouseUp () {
      document.removeEventListener('mousemove', this.handleMouseMove, false);
    },

if (this.panelPercent < this.min) {
        this.panelPercent = this.min
      }
      if (this.panelPercent > this.max) {
        this.panelPercent = this.max
}