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 22 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
vue特效之翻牌动画
Apr 20 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教程孙仲岳主讲
2008/01/07 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
Python 爬虫的工具列表大全
2016/01/31 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
Python的logging模块基本用法
2020/12/24 Python
canvas线条的属性详解
2018/03/27 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
编辑求职信样本
2013/12/16 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
文秘个人求职信范文
2014/04/22 职场文书
工作评语大全
2014/04/26 职场文书
学校募捐倡议书
2014/05/14 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
大二学年个人总结
2015/03/03 职场文书