要實(shí)現(xiàn) vscode 的 resize 效果， 因?yàn)橐獙?duì)菜單進(jìn)行伸縮
Chrome 也有這種效果
從任務(wù)管理器里面可以看出 resize 操作特別的吃 CPU
其實(shí) window 對(duì)象是有 resize 這個(gè)操作的, 但是對(duì) div 沒有 看網(wǎng)上有特別的實(shí)現(xiàn)，實(shí)現(xiàn)手法是通過 object 元素實(shí)現(xiàn)。 但是我覺得不用額外的加元素就能實(shí)現(xiàn)
先看我的頁面結(jié)構(gòu)
1 是整個(gè)頁面的布局容器
2 是側(cè)邊欄 使我們需要改變寬度的地方
3 是 sash。這個(gè)詞還是跟 vscode 學(xué)的， 就是裝飾的意思， 他是一個(gè)空的 div , 作用很簡就是當(dāng)鼠標(biāo)懸停上面的時(shí)候給用戶提示：這個(gè)地方可以 resize ！ 所以這個(gè) sash 的寬度 vscode 設(shè)置的是 4px 我也用了 4px。
用法如下可以改變鼠標(biāo)的形狀
.sash:hover{ cursor: w-resize; }
先說 2 區(qū)域， 當(dāng)用戶鼠標(biāo)移動(dòng)到 sash 上面的時(shí)候， 給出光標(biāo)提示， 當(dāng)用戶按下鼠標(biāo)的時(shí)候整個(gè) resize 操作就被激活了， 激活的意思是可以監(jiān)測(cè)用戶的操作了。用戶什么操作呢？當(dāng)然是用戶鼠標(biāo)在頁面的移動(dòng)了。
激活后我們監(jiān)聽 1 區(qū)域的 mousemove 操作， 得到一個(gè) event.。event.pageX 就是鼠標(biāo)的游離點(diǎn)距離頁面左側(cè)的距離， 正好可以拿來做 2 區(qū)域的寬度。
2 區(qū)域的寬度可以設(shè)置上限以及下限， 防止用戶將寬度整成 0 或者很大， 當(dāng)然你也可以不做， 看你喜好
當(dāng)用戶的鼠標(biāo)抬起的時(shí)候停止對(duì) nousemove 的監(jiān)聽 這是鼠標(biāo)再怎么游離也不能改變 2 的寬度
最終效果
應(yīng)為這個(gè) resize 十分的吃 CPU 所以有必要用節(jié)流節(jié)一下 上面的圖是用了 lodash 的 throttle 之后的效果， 在 chrome 里面有時(shí)候很正常 像是上面的效果， 有時(shí)候就不行了 cpu 能達(dá)到 40%- 50%
補(bǔ)一個(gè) vscode 的 sash 的證據(jù)
