vue 頁面實現拖拽調整元素寬度

方法可分為兩種 第一種 使用iviewUI 的split 面板分割組件  第二種就是自己寫一個監聽鼠標點擊移動位置

一. 使用iview 的split 面板分割組件 

　　這里是說明鏈接 https://www.cnblogs.com/wjian0916/p/16227825.html

二. 監聽鼠標

1.展示效果

 

2.頁面代碼

<div class="box" ref="box">
  <index-left class='left' ref="indexLeft" @refreshIndex="leftChange"></index-left>
  <div class="resize" title="收縮側邊欄"></div>
  <index-right class='right' ref="indexRight" @refreshIndex="rightChange"></index-right>
</div>

 

3.js 代碼

 mounted () {
    this.dragControllerDiv();
  },

 

dragControllerDiv: function () {
      var resize = document.getElementsByClassName('resize')
      var left = document.getElementsByClassName('left')
      var right = document.getElementsByClassName('right')
      var box = document.getElementsByClassName('box')
      for (let i = 0; i < resize.length; i++) {
        // 鼠標按下事件
        resize[i].onmousedown = function (e) {
          var startX = e.clientX // 基於瀏覽器位置這里與邊框還有40的距離
          // 鼠標拖動事件
          document.onmousemove = function (e) {
            resize[i].left = startX - 40
            var endX = e.clientX
            var moveLen = resize[i].left + (endX - startX) // （endx-startx）=移動的距離。resize[i].left+移動的距離=左邊區域最后的寬度
            var maxT = box[i].clientWidth - resize[i].offsetWidth // 容器寬度 - 左邊區域的寬度 = 右邊區域的寬度
            if (moveLen < 32) moveLen = 32 // 左邊區域的最小寬度為32px
            if (moveLen > maxT - 150) moveLen = maxT - 150 // 右邊區域最小寬度為150px
            resize[i].style.left = moveLen // 設置左側區域的寬度
            for (let j = 0; j < left.length; j++) {
              // left[j].style.width = (moveLen / box[i].clientWidth) * 100 + '%'
              left[j].style.width = moveLen + 'px'
              right[j].style.left = left[j].style.width
              resize[i].style.left = left[j].style.width
              // right[j].style.width = ((box[i].clientWidth - moveLen) / box[i].clientWidth) * 100 + '%'
              right[j].style.width = (box[i].clientWidth - moveLen) + 'px'
            }
          }
          // 鼠標松開事件
          document.onmouseup = function (evt) {
            document.onmousemove = null
            document.onmouseup = null
            resize[i].releaseCapture && resize[i].releaseCapture() // 當你不在需要繼續獲得鼠標消息就要應該調用ReleaseCapture()釋放掉
          }
          resize[i].setCapture && resize[i].setCapture() // 該函數在屬於當前線程的指定窗口里設置鼠標捕獲
          return false
        }
      }
    }

4. 樣式代碼

.left {
    position: absolute;
    left: 0;
    width: calc(15%);
    height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    float: left;
  }
  .resize {
    position: absolute;
    left: 15%;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 100;
    background-color: transparent;
    border-left: 1px solid #ececec;
  }
  .right {
    position: absolute;
    left: 15%;
    width: 85%;
    height: 100%;
    float: left;
  }
  .box {
    width: 100%;
    height: 663px;
  }