最近对RXEditor进行了改版，记录改版过程和使用的技术要点。昨天完成了静态页面的制作。制作过程没有详细记录，后面也不想补了，有点遗憾。不过工作成果完全保存在github上，地址：https://github.com/vularsoft/studio-ui本项目下的html-demo.html是一个静态文件。话不多说，今天就把昨天的HTML转成VUE。先看效果：布局原理页面采用纯弹框flexbox布局，没有floatposition等，页面分为以下几个区域：细的实线描述了各个DIV之间的嵌套关系，粗的实线描述了各个DIV之间的嵌套关系黑线是一个独立的DIV。我称它们为句柄（HADLE），主要用来接受鼠标拖拽事件，完成拖拽操作。有两种手柄，水平x手柄和垂直y手柄。x-handle的宽度在css中定义为3px，高度为100%。y手柄的高度为3px，宽度为100%。鼠标光标也应该相应地设置：`.vular-studio.x-handle{width:3px;光标：w-调整大小；z-index:10;}.vular-studio.y-handle{高度:3px;光标：s-调整大小；z-index:10;}`拖动原理有手柄的区域有固定的尺寸（固定宽度或高度），没有手柄的部分随弹框变化。handle句柄是一个独立的VUE组件，它将拖动信息传递给父窗口，父窗口改变它的大小。以bottom-area为例，这是一个可以改变自身大小的DIV：`
