VUE实现拖拽,vue滚动分页

　　本文主要详细介绍了vue对拖拽式滑动隔断面板的实现。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue实现拖拽滑动分屏的具体代码，供大家参考。具体内容如下

需求背景

　　左边是列表，右边是细节。要查看更大范围的详细信息，请拖放滑块以分割面板。

整体思路

　　在版式上，采用flex版式，单位采用百分比。Set flex: 1，让它自动拉伸滑块，计算滑动时滑块占整个页面的百分比，通过动态样式将百分比赋给列表页面的宽度并改变滑块的位置(也是百分比形式)。其次，使用vue中的鼠标事件

代码实现

　　。

　　在模板中写入事件

　　@mousedown.prevent=mousedown

　　在方法中编写方法

　　/**

　　*按下鼠标。

　　*/

　　mousedown() {

　　document . addevent listener( mousemove ，this.handleMouseMove，false)；

　　document . addevent listener( mouseup ，this.handleMouseUp，false)；

　　},

　　/**

　　*按下滑块并移动鼠标。

　　*/

　　handleMouseMove(e) {

　　/**

　　*计算集装箱的总宽度

　　*计算滑块到左侧的距离。

　　*计算偏移百分比：(滑块到左侧的距离/页面宽度)* 100

　　*传递移动百分比和离开左侧的距离。

　　*/

　　const clientRect=this。$ refs . main content . getboundingclientrect()；

　　const offset=e.pageX

　　const panel percent=(offset/client rect . width)* 100；

　　this . panel percent=panel percent；

　　this.mainContentWidth=offset

　　这个。$ refs . img move . style . left=panel percent“%”；

　　Console.log(拖动，this . panel percent)；

　　},

　　/**

　　*松开滑块。

　　*/

　　handleMouseUp () {

　　document . removeeventlistener( mousemove ，this.handleMouseMove，false)；

　　},

　　边界的处理

　　if (this.panelPercent this.min) {

　　this.panelPercent=this.min

　　}

　　if (this.panelPercent this.max) {

　　this.panelPercent=this.max

　　}

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。