近期改版RXEditor，把改版過程，用到的技術(shù)點，記錄下來。昨天完成了靜態(tài)頁面的制作，制作過程并未詳細記錄，后期已經(jīng)不愿再補了，有些遺憾。不過工作成果完整保留在github上，地址：https://github.com/vularsoft/studio-ui

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務扎賚諾爾,十多年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575

這個項目下面的html-demo.html，便是靜態(tài)文件。

話不多說，今天就把昨天的HTML轉(zhuǎn)化成VUE。

先看效果：

布局原理

頁面采用純彈性盒子flex box布局，無float postion等，頁面分成如下幾個區(qū)域：

細實線描述的是各個DIV之間的嵌套關(guān)系，粗黑線是獨立的DIV，我稱它們?yōu)榘咽郑℉ADLE），主要用來接受鼠標拖動事件，以完成拖動操作。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;
}

網(wǎng)頁標題：VUE實現(xiàn)Studio管理后臺之鼠標拖放改變窗口大小-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://weahome.cn/article/codejs.html