vue如何split_基于vue开发面板分割组件(Split)

基本效果：

效果比较粗糙，具体样式可以自己微调根据自己的实际业务需求.

实现思路：

1.无非就是分三个部分(左中右)

2.具体考虑什么的问题：什么时候需要面板分割，什么时候又是不需要的

可以先自己先把布局写出来，然后通过浏览器手动去调节一些宽度或者移动来实现面板分割，然后你就也有了思路。但是实际上在vue我们只需要去操作数据，而不是想js一样直接去操作dom，也不是会怎么，规范来讲vue的出现就是让程序员不需要去操作dom,而是关注数据层。

我的template代码：

这里要搞清楚的是我们希望能面板分割是当你点击了中间部分才能拖动，鼠标放开就不能拖动，并且还要注意就是可能你鼠标一直按但是跑到白部分也是能拖动的。这里说个方法getBoundingClientRect()是能够获取你返回元素的大小及其相对于视口的位置。

计算出你需要移动的像素(百分比)

这里是min，max是记录你窗口最小值和最大值。以上就是只有当你鼠标点击才会触发以及鼠标离开将mouseOver变为false即可。

就写到这吧，如果需要源码的可以看评论区