vue中的可拖拽寬度div怎么實現

這篇文章主要介紹“vue中的可拖拽寬度div怎么實現”，在日常操作中，相信很多人在vue中的可拖拽寬度div怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue中的可拖拽寬度div怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

主要思路

• 在需要拖拽寬度的區域設置一個div，高度設為 100%，寬度盡量窄一些(也不要太窄，3～6px左右)

• 在此div上綁定當“鼠標按下”時，觸發document綁定“鼠標移動”方法和"鼠標抬起"方法

• 通過鼠標移動方法不斷獲取當前鼠標位置，設置需要變化大小div的寬高。

• 鼠標抬起時取消鼠標移動方法和鼠標抬起方法的綁定。

<template>
  <div class="container" id="content_box">
    <div class="tab">左側Tab</div>
    <div class="menu" ref="menu">
      左側菜單
      <div class="menu-resize" ref="menuResize"></div>
    </div>
    <div class="content">
      中心區域
      <div class="opera" ref="opera">
        <div class="opera-resize" ref="operaResize"></div>
        操作區域
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "dropWidth",
  mounted() {
    this.$nextTick(() => {
      this.dropSize();
    })
  },
  methods: {
    dropSize() {
      let that = this,
          menuWidth = 200,
          operaHeight = 200;
      this.$refs.menuResize.onmousedown = function () {
        document.onmousemove = function (e) {
          let clientX = e.clientX;
          // 最大寬度
          if(clientX>=330){
            clientX = 330;
          }
          // 最小寬度
          if(clientX<=230){
            clientX = 230;
          }
          // TODO 這里減的是最左側tab的寬度
          menuWidth = clientX - 30;
          that.$refs.menu.style.width = clientX - 30 +"px";
        }

        document.onmouseup = function () {
          console.log('當前寬度', menuWidth);
          document.onmousemove = null;
          document.onmouseup = null;
          that.releaseCapture && that.releaseCapture()
        }
      }

      this.$refs.operaResize.onmousedown = function () {
        document.onmousemove = function (e) {
          let clientY = e.clientY;
          console.log(clientY)
          // 最大寬度
          if(clientY<=100){
            clientY = 100;
          }
          // 最小寬度
          if(clientY>=300){
            clientY = 300;
          }
          operaHeight = clientY;
          // TODO 這里需要取反向
          that.$refs.opera.style.height = 400 - clientY +"px";
        }

        document.onmouseup = function () {
          console.log('當前寬度', operaHeight);
          document.onmousemove = null;
          document.onmouseup = null;
          that.releaseCapture && that.releaseCapture()
        }
      }
    }
  }
}
</script>

<style scoped>
.container {
  width: 1000px;
  height: 400px;
  border: 2px solid #dddddd;

  display: flex;
  justify-content: center;
}

.tab {
  width: 30px;
  height: 100%;
  background-color: #EC8C32;

  flex-shrink: 0;
  flex-grow: 0;
}

.menu {
  width: 200px;
  background-color: #AAB6E0;

  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
}

.content {
  width: 100%;
  position: relative;
}

.opera {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: 0;
  background-color: #F2BE25;
}

.menu-resize {
  width: 5px;
  height: 100%;

  position: absolute;
  top: 0;
  right: 0;
  cursor: col-resize;
}

.opera-resize {
  width: 100%;
  height: 5px;
  position: absolute;
  top: 0;
  left: 0;
  cursor: row-resize;
}
</style>

實現效果

到此，關于“vue中的可拖拽寬度div怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！