vuejs中拖动改变元素宽度实现宽度自适应大小
时间:2019-06-12
本文章向大家介绍vuejs中拖动改变元素宽度实现宽度自适应大小,主要包括vuejs中拖动改变元素宽度实现宽度自适应大小使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求效果:
原理:拖动效果的实现基本都是dom操作来实现的,通过拖动分隔线,计算分隔线与浏览器边框的距离(left),来实现拖动之后的不同宽度的计算;当拖动分隔线1时,计算元素框left和mid;当拖动分隔线2时,计算元素框mid和right;同时设置元素框最小值以防止元素框拖没了(其实是被遮住了)。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。
在vuejs中使用,methods设置方法,mounted钩子挂载:
html部分代码:
<template> <div> <ul class="box" ref="box"> <li class="left" ref="left">西瓜</li> <li class="resize" ref="resize"></li> <li class="mid" ref="mid">备注2</li> <li class="resize2" ref="resize2"></li> <li class="right" ref="right">test</li> </ul> <ul class="box" ref="box"> <li class="left" ref="left">芒果</li> <li class="resize" ref="resize"></li> <li class="mid" ref="mid">备注</li> <li class="resize2" ref="resize2"></li> <li class="right" ref="right">test</li> </ul> </div> </template>
js部分代码
<script> export default { mounted () { this.dragControllerDiv(); }, methods: { dragControllerDiv: function () { var resize = document.getElementsByClassName('resize'); var resize2 = document.getElementsByClassName('resize2'); var left = document.getElementsByClassName('left'); var right = document.getElementsByClassName('right'); var mid = document.getElementsByClassName('mid'); var box = document.getElementsByClassName('box'); for (let i = 0; i < resize.length; i++) { resize[i].onmousedown = function (e) { var startX = e.clientX; resize[i].left = resize[i].offsetLeft; document.onmousemove = function (e) { var endX = e.clientX; var rightW = right[i].offsetWidth; var moveLen = resize[i].left + (endX - startX); var maxT = box[i].clientWidth - resize[i].offsetWidth; if (moveLen < 150) moveLen = 150; if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150; resize[i].style.left = moveLen; for (let j = 0; j < left.length; j++) { left[j].style.width = moveLen + 'px'; mid[j].style.width = (box[i].clientWidth - moveLen - rightW - 10) + 'px'; } } document.onmouseup = function (evt) { document.onmousemove = null; document.onmouseup = null; resize[i].releaseCapture && resize[i].releaseCapture(); } resize[i].setCapture && resize[i].setCapture(); return false; } } for (let i = 0; i < resize2.length; i++) { resize2[i].onmousedown = function (e) { var startX = e.clientX; resize2[i].left = resize2[i].offsetLeft; document.onmousemove = function (e) { var endX = e.clientX; var leftW = left[i].offsetWidth; var moveLen = resize2[i].left + (endX - startX) - leftW; var maxT = box[i].clientWidth - resize2[i].offsetWidth - 5; if (moveLen < 150) moveLen = 150; if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150; resize2[i].style.left = moveLen; for (let j = 0; j < right.length; j++) { mid[j].style.width = moveLen + 'px'; right[j].style.width = (box[i].clientWidth - moveLen - leftW - 10) + 'px'; } } document.onmouseup = function (evt) { document.onmousemove = null; document.onmouseup = null; resize2[i].releaseCapture && resize2[i].releaseCapture(); } resize2[i].setCapture && resize2[i].setCapture(); return false; } } } } } </script>
style部分
<style scoped> ul,li{ list-style: none; display: block; margin:0; padding:0; } .box{ width:800px; height:32px; overflow:hidden; } .left{ width:calc(30% - 10px); height:100%; background:skyblue; float:left; } .resize{ width:5px; height:100%; cursor: w-resize; float:left; } .resize2{ width:5px; height:100%; cursor: w-resize; float:left; } .right{ float:left; width:35%; height:100%; background:tomato; } .mid{ float:left; width:35%; height:100%; background:#f00; } </style>
原文地址:https://www.cnblogs.com/layaling/p/11009570.html
- AS3初学者容易迷糊的几个问题
- Spring Security笔记:自定义Login/Logout Filter、AuthenticationProvider、AuthenticationToken
- ASP.NET Web API 2.1支持Binary JSON(Bson)
- Spring Security笔记:自定义登录页
- 浅析 Linux 初始化 init 系统
- 如何提高Python运行效率 超实用的四种提速方法
- 如何让oracle的select强制走索引
- ActionScript3.0(AS3)中的泛型数组Vector
- 人民网评:“算法推荐”不能成为传播低俗信息的助推器
- 代码实现WordPress自动关键词keywords与描述description
- 基于Spring的简易SSO设计
- MS 的IOC容器(ObjectBuilder)?
- 自动驾驶五问
- 开放的即时通信协议Jabber
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 解决elasticsearch集群Unassigned Shards无法reroute的问题
- 一次系统扩容引起的elasticsearch故障及恢复
- WPF SharpDx 性能优化方法
- java中的reference(四): WeakReference的应用--ThreadLocal源码分析
- 聊聊dubbo-go的availableCluster
- 删除排序链表中重复元素的方法
- java异常体系及1.7中的try-with-resources
- JAVA中的静态代理、动态代理以及CGLIB动态代理分析
- 基于centos7 搭建storm1.2.3集群过程
- JAVA中的浅克隆和深克隆分析
- mysql表占用多少磁盘空间以及清理表空间
- 基于docker快速搭建hbase集群
- 在springboot中对kafka进行读写操作
- [883]python安装包出现Retrying
- 深入理解java虚拟机学习笔记(三)-虚拟机性能监控与故障处理工具