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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vuex的使用步骤
Jan 06 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
如何封装Vue Element的table表格组件
Feb 06 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 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 current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
JQuery实现图片轮播效果
2015/09/15 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
javascript编写简易计算器
2017/05/06 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
web.py获取上传文件名的正确方法
2014/08/26 Python
python 远程统计文件代码分享
2015/05/14 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python分布式环境下的限流器的示例
2017/10/26 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
节约用电标语
2014/06/17 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
村党建工作汇报材料
2014/11/02 职场文书
通知书大全
2015/04/27 职场文书
城南旧事观后感
2015/06/11 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书