vue 拖拉改变盒子高度（mousedown、mousemove、mouseup）流畅不卡顿

 

 

 

需求：上下两个盒子之间添加可拖拽按钮，实现高度变化

　　html：

              <textarea
                :id="'mycode'+(index*1+1)"
                :ref="'mycode'+(index*1+1)"
                v-model="item.sqlContent"
                class="CodeMirror-hints"
                :class="'mycode'+(index*1+1)"
                placeholder="按Ctrl键进行代码提示"
              />
              <!-- 拖拽组件 -->
              <div class="resizeBtn"><span @mousedown="resizeDown" @mousemove="resizeMove" @mouseup="resizeUp">===</span></div>
              <el-tabs class="bottomTabsBox" style="height: 225px" size=mini v-model="activeSqlRes" type="card" @tab-click="handleSqlResClick"></el-tabs>          

　　css:

    .CodeMirror {
      flex: 1;
     }
    .resizeBtn {
      background: #143152;
      text-align: center;
      height: 10px;
      line-height: 7px;
      color: gray;
      font-weight: 900;
      span {
        cursor: n-resize;
      }
    }
    .bottomTabsBox {
      height: 30%;
      background: $--sqlBg-color;
      border-top: 1px solid rgba(255,255,255,.2);
      z-index: 1;
    }

 

出现问题的版本：

　　1 卡顿

　　2 不流畅

　　3 鼠标快速移动无法改变高度

　　4 mouseup无法释放

resizeBox: null,
resizeY: 0,
boxHeight: '225px', // 下部分盒子高度

    resizeDown(e, index) {
      this.resizeBox = document.getElementsByClassName('bottomTabsBox')
      this.boxHeight = parseFloat(this.resizeBox[index].style.height)
      this.resizeY = e.clientY
    },
    resizeMove(e) {
        if (!this.resizeBox) return false
        let change = this.boxHeight + (this.resizeY - e.clientY)
        if (change < 40) return false
        this.resizeBox[index].style.height = change+ 'px'  
    },
    resizeUp(e) {
        this.resizeBox = null
    }

 

优化后版本：超级丝滑~

html:

    <!-- 拖拽组件 -->
    <div class="resizeBtn"><span @mousedown="resizeDown($event, index)">===</span></div>

    resizeDown(e, index) {
      this.resizeBox = document.getElementsByClassName('bottomTabsBox')
      this.boxHeight = parseFloat(this.resizeBox[index].style.height)
      this.resizeY = e.clientY
      
      document.onmousemove = (e) => {
        if (!this.resizeBox) return false
        let change = this.boxHeight + (this.resizeY - e.clientY)
        if (change < 40) return false  // 设置最小高度
        this.resizeBox[index].style.height = change+ 'px'
      }

      document.onmouseup = () => {
        this.resizeBox = null
        document.onmousemove = null;
      }
    }