利用vue实现div宽度拖拽效果的思路和代码是什么

来源：恒创科技编辑：恒创科技编辑部

2024-01-27 04:06:59

今天这篇我们来学习和了解“利用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>

实现效果