vue 表格左右拖拽调整列宽_使用Vue实现拖动改变元素宽度的方法

使用Vue实现拖动改变元素宽度的方法

发布时间：2020-11-05 17:06:52

来源：亿速云

阅读：127

使用Vue实现拖动改变元素宽度的方法？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

需求：

原理：

拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时，计算元素框mid和right；同时设置元素框最小值以防止元素框拖没了(其实是被遮住了)。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。

html部分代码：

• 西瓜
• 备注2
• test

• 芒果
• 备注
• test

js部分代码：

export default {