VUE实现Studio管理后台之鼠标拖放改变窗口大小-创新互联
近期改版RXEditor,把改版过程,用到的技术点,记录下来。昨天完成了静态页面的制作,制作过程并未详细记录,后期已经不愿再补了,有些遗憾。不过工作成果完整保留在github上,地址:https://github.com/vularsoft/studio-ui
创新互联主要从事成都网站制作、做网站、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务扎赉诺尔,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575这个项目下面的html-demo.html,便是静态文件。
话不多说,今天就把昨天的HTML转化成VUE。
先看效果:
布局原理
页面采用纯弹性盒子flex box布局,无float postion等,页面分成如下几个区域:
细实线描述的是各个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; }
当前题目:VUE实现Studio管理后台之鼠标拖放改变窗口大小-创新互联
网址分享:http://scjbc.cn/article/codejs.html