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基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 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防注入代码
2010/04/07 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php实现的mongodb操作类
2015/05/28 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
webpack打包优化的几个方法总结
2020/02/10 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python数据可视化之画图
2019/01/15 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
FILA斐乐中国官方商城:意大利运动品牌
2017/01/25 全球购物
linux下进程间通信的方式
2013/01/23 面试题
教师推荐信范文
2013/11/24 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
小学庆六一主持词
2015/06/30 职场文书
《浅水洼里的小鱼》教学反思
2016/02/16 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android