vue如何实现边框线拖拽效果

Vue如何实现边框线拖拽效果

闲话少说，先上效果图！

这里我多加了一个点击边框线后隐藏左侧内容，给主体区域创造更大空间，这个看大家个人需求了，需要就用上

下面说下实现原理，首先这个边框线是一个单独的组件，我把它单独放在了一个公用目录下可做全局的公用组件
我们只需通过几个简单的监听事件就可以实现以上效果，分别是mousedown（鼠标左键点击下去触发的事件），mouseup（松开鼠标左键触发的事件），mousemove（指定元素鼠标移动触发的事件）

那么清楚这些后，思路就非常清晰了，点击这条边框线组件后，子组件通过监听鼠标在横轴上移动的距离向父组件传递参数来动态改变左侧树形结构导航栏的宽度（当然这里也可以使用vuex，看个人需要），让右侧内容区域的宽度自适应，这样就达到了边框线的拖拽效果（其实主要是左侧区域的宽度的变化展示出的这个效果）。

下面上代码
首先是边框线组件的代码

<div class="x-handle" @mousedown="mouseDown" @click="showout" unselectable="on" onselectstart="return false" style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;"></div>

大家可以注意到为什么除了监听鼠标点击事件为还有这么几句话

unselectable="on"
onselectstart="return false"
style="-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none