面板可调整大小resizable（基于vue）

最近在做vue项目中遇到需要通过拖动面板边缘，动态调整面板宽度的问题，最开始是打算找一个vue组件解决得了，后来想了一下应该也挺简单的就自己实现了。项目中是左右宽度调整，这里只介绍左右面板resizable，上下调整原理是一样的。

思路：

step1、在左右面板之间添加一个div，div样式如下：

.resizable-widget {position: absolute;top: 0;bottom: 0;left: 255px;right: 0;width: 5px;cursor: col-resize;
}

然后添加两个小竖线：

.resizable-widget::after {content: '';width: 1px;height: 12px;border-left: 2px solid #ccc;border-right: 2px solid #ccc;position: absolute;top: 50%;left: 1px;
}

step2: 给最外层div（或document）绑定mouseover和mouseup事件，添加prevent修饰符防止文本选中

<div class="layout-container" @mousemove.prevent="bindMouseover($event)" @mouseup.prevent="bindMouseup">

bindMouseover (e) {this.mouse_position_x = e.x   // 鼠标移动到的位置
},
bindMouseup () {clearInterval(this.timerId)   // 鼠标抬起，清除定时器
}

step3: 给resizable元素添加mousedown事件

<div class="resizable-widget" :style="[resizableLeftObj, resizableHeightObj]" @mousedown.prevent="resizableMousedown($event)"></div>

resizableMousedown () {if (!this.timerId) {clearInterval(this.timerId)}this.timerId = setInterval(() => {this.move_x = this.mouse_position_x - this.contentWidth   // 10ms计算一次移动的宽度，contentWidth初始值是250px}, 10)
}

最后，在computed属性中计算个面板的宽度值即可

面板可调整大小resizable（基于vue）相关推荐

vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽，代码生成工具。提升前端开发效率，或者集成至项目作为在线拖拽工具。（持续迭代升级中）...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...
基于vue的UI框架集锦(移动端+pc端)
1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档在线预览 2.vux 基于WeUI和Vu ...
基于vue 旅游网移动开发
文章目录前言开发前准备项目配置 vue.config.js 使用框架vant babel.config.js配置 main.js 引入路由 vuex环境 axios 1.创建axios实例 2. ...
干货|6个牛逼的基于Vue.js的后台控制面板，接私活必备
JavaEE擅长的就是企业级应用,作为一个Java程序员,如果想自己徒手撸一个ERP.WMS之类的系统还是有一点挑战的,不过今天松哥要给大家介绍几款牛逼的基于Vue.js的后台管理控制面板,掌握这几款 ...
基于 Vue 和 TS 的 Web 移动端项目实战心得
关注程序员成长指北,回复"1" 加入我们一起学习,天天进步作者:mcuking(杭州个推) 来源:https://juejin.im/post/5d759f706fb9a06a ...
基于 Vue.js+Springboot 的学院社团管理系统的设计与实现
在教育深化改革的背景下,我国除了优化教育体制,提升教育水平之外,还鼓励学生参与课外活动,促进学生全面发展.如何更好地让大学生加入适合自己的社团,在繁忙的学习之余,可以更好的参与到社团的活动,从中汲取新 ...
html5快速开发模板生成器,推荐一个基于Vue 的 H5 快速开发模板
本项目以基于 vue-cli4 和 Vant-ui 搭建的,进行移动端开发中的一些最佳实践方案模板地址动动你的小手点颗star 样式适配在移动端网页开发时,样式适配始终是一个绕不开的问题.对此目 ...
基于Vue的电商管理系统 (1)
正好这段时间在做一个电商管理系统的项目,借此总结一下.该项目主要是一个电商的后台管理系统,可实现管理用户账号,即登录.退出.用户管理.权限管理等,商品管理,即商品分类.分类参数.商品信息,订单信息等以 ...
html九图拼图游戏代码,基于Vue.js实现数字拼图游戏
先来看看效果图: 功能分析当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列 ...

面板可调整大小resizable（基于vue）

面板可调整大小resizable（基于vue）相关推荐

最新文章

热门文章