99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

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

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

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

先看效果：

布局原理

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

細(xì)實(shí)線描述的是各個(gè)DIV之間的嵌套關(guān)系，粗黑線是獨(dú)立的DIV，我稱它們?yōu)榘咽郑℉ADLE），主要用來接受鼠標(biāo)拖動(dòng)事件，以完成拖動(dòng)操作。handle非為兩種，橫向x-handle，縱向y-handle，css中定義x-handle寬度為3px，高度為100%，y-handle高度為3px，寬度為100%，鼠標(biāo)光標(biāo)也相應(yīng)設(shè)置一下：

.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實(shí)現(xiàn)Studio管理后臺(tái)之鼠標(biāo)拖放改變窗口大小-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://ef60e0e.cn/article/codejs.html