好资源导航 » 文章资讯 » VUE实现Studio管理后台之鼠标拖放改变窗口大小

VUE实现Studio管理后台之鼠标拖放改变窗口大小

2023-07-29 19:39:04 197

近期改版RXEditor，把改版过程，用到的技术点，记录下来。昨天完成了静态页面的制作，制作过程并未详细记录，后期已经不愿再补了，有些遗憾。不过工作成果完整保留在github上，地址：https://github.com/vularsoft/studio-ui

这个项目下面的html-demo.html，便是静态文件。

话不多说，今天就把昨天的HTML转化成VUE。

先看效果：

布局原理

页面采用纯弹性盒子flexbox布局，无floatpostion等，页面分成如下几个区域：

细实线描述的是各个DIV之间的嵌套关系，粗黑线是独立的DIV，我称它们为把手（HADLE），主要用来接受鼠标拖动事件，以完成拖动操作。handle非为两种，横向x-handle，纵向y-handle，css中定义x-handle宽度为3px，高度为100%，y-handle高度为3px，宽度为100%，鼠标光标也相应设置一下：

.vular-studio.x-handle{
width:3px;
cursor:w-resize;
z-index:10;
}

.vular-studio.y-handle{
height:3px;
cursor:s-resize;
z-index:10;
}

拖动原理

带有把手的区域固定大小（固定宽度或者高度），不带把手的部分跟随弹性盒子变化。把手handle是一个独立的VUE组件，它把拖动信息传递给父窗口，父窗口改变自身大小。以bottom-area为例，这是一个可以改变自身大小的DIV：

它对应的把手代码：

制作步骤

先建一个VUE项目：
1、安装node
2、安装webpack
3、安装VUE
4、新建VUE项目：vueinitwebpack-simple
5、根据相应布局制作VUE组件
具体代码，请参考：https://github.com/vularsoft/studio-ui，根据标注，获取相应的版本记录即可。

到此这篇关于VUE实现Studio管理后台之鼠标拖放改变窗口大小的文章就介绍到这了,更多相关vue鼠标拖放改变窗口大小内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

VUE实现Studio管理后台之鼠标拖放改变窗口大小

热门推荐

随机推荐