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 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
Node.js笔记之process模块解读
2018/05/31 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
浅谈js闭包理解
2019/03/28 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
35个Python编程小技巧
2014/04/01 Python
简单实现Python爬取网络图片
2018/04/01 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
keras输出预测值和真实值方式
2020/06/27 Python
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
个人自我鉴定写法
2013/11/30 职场文书
学习标兵获奖感言
2014/02/20 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
污水处理保证书
2015/05/09 职场文书
小学见习报告
2015/06/23 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书