vue实现拖拽滑动分割面板
本文实例为大家分享了vue实现拖拽滑动分割面板的具体代码,供大家参考,具体内容如下
需求背景
左边是列表,右边是详情。 想更大范围的查看详情,所以要拖拽滑块,进行面板的分割
整体思路
- 在布局上,采用flex布局,单位采用百分比。设置flex:1,让其自动伸缩
- 滑动滑块,计算滑块在滑动过程中,占整个页面的百分比
- 将百分比,通过动态样式赋值给列表页的宽度
- 同时改变滑块的位置(也是百分比形式)
- 其次就是在vue里对鼠标事件的使用
代码实现
在template里 写事件
@mousedown.prevent="mousedown"
在methods里写方法
/** * 按下鼠标 */ mousedown() { document.addEventListener('mousemove', this.handleMouseMove, false); document.addEventListener('mouseup', this.handleMouseUp, false); }, /** * 按下滑动器,移动鼠标 */ handleMouseMove(e) { /** * 计算容器总宽度 * 计算滑块到左边的距离 * 计算偏移百分比: (滑块距离左边的距离 / 页面宽度) * 100 * 传递移动百分比和距左边的距离 */ const clientRect = this.$refs.mainContent.getBoundingClientRect(); const offset = e.pageX; const panelPercent = (offset / clientRect.width) * 100; this.panelPercent = panelPercent; this.mainContentWidth = offset; this.$refs.imgMove.style.left = panelPercent + '%'; console.log('拖动中', this.panelPercent); }, /** * 松开滑动器 */ 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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
详解elementui之el-image-viewer(图片查看器)
这篇文章主要介绍了详解elementui之el-image-viewer(图片查看器),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-08-08vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题
这篇文章主要介绍了vue3使用vue-cli引入windicss报错Can‘t resolve windi.css问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03vue报错Failed to execute 'appendChild&apos
这篇文章主要为大家介绍了vue报错Failed to execute 'appendChild' on 'Node'解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-11-11Vue项目打包(build)时,自动打以时间命名的压缩包方式
这篇文章主要介绍了Vue项目打包(build)时,自动打以时间命名的压缩包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10Vue3 封装 Element Plus Menu 无限级菜单组件功能的详细代码
本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus *el-menu* 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单,对Vue3 无限级菜单组件相关知识感兴趣的朋友一起看看吧2022-09-09vue,angular,avalon这三种MVVM框架优缺点
本文给大家具体分析了下vue,angular,avalon这三种MVVM框架优缺点,十分的细致全面,有需要的小伙伴可以参考下2016-04-04
最新评论