vue中的可拖拽宽度div的实现示例


Posted in Vue.js onApril 08, 2022

主要思路

  • 在需要拖拽宽度的区域设置一个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的实现示例

到此这篇关于vue中的可拖拽宽度div的实现示例的文章就介绍到这了,更多相关vue 可拖拽宽度div内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
用vue设计一个日历表
Dec 03 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue vee-validate插件的简单使用
Jun 22 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 #Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 #Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 #Vue.js
vue实现列表拖拽排序的示例代码
vue实现可以快进后退的跑马灯组件
Apr 08 #Vue.js
Axios代理配置及封装响应拦截处理方式
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 #Vue.js
You might like
默默小谈PHP&amp;MYSQL分页原理及实现
2007/01/02 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php上传文件问题汇总
2015/01/30 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
javascript教程之不完整的继承(js原型链)
2014/01/13 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
SeaJS中use函数用法实例分析
2017/10/10 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
vue cli2.0单页面title修改方法
2018/06/07 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
vue项目中定义全局变量、函数的几种方法
2019/11/08 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
tensorflow 大于某个值为1,小于为0的实例
2020/06/30 Python
Django nginx配置实现过程详解
2020/09/10 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python
Golang 实现WebSockets
2022/04/24 Golang