菜单栏的 resize 效果

要实现 vscode 的 resize 效果， 因为要对菜单进行伸缩

vscoderesize.gif

Chrome 也有这种效果

chromeresize.gif
从任务管理器里面可以看出 resize 操作特别的吃 CPU
其实 window 对象是有 resize 这个操作的, 但是对 div 没有 看网上有特别的实现，实现手法是通过 object 元素实现。 但是我觉得不用额外的加元素就能实现

先看我的页面结构

image.png

1 是整个页面的布局容器
2 是侧边栏 使我们需要改变宽度的地方
3 是 sash。这个词还是跟 vscode 学的， 就是装饰的意思， 他是一个空的 div , 作用很简就是当鼠标悬停上面的时候给用户提示：这个地方可以 resize ！ 所以这个 sash 的宽度 vscode 设置的是 4px 我也用了 4px。
用法如下可以改变鼠标的形状

.sash:hover{ cursor: w-resize; }

先说 2 区域， 当用户鼠标移动到 sash 上面的时候， 给出光标提示， 当用户按下鼠标的时候整个 resize 操作就被激活了， 激活的意思是可以监测用户的操作了。用户什么操作呢？当然是用户鼠标在页面的移动了。

激活后我们监听 1 区域的 mousemove 操作， 得到一个 event.。event.pageX 就是鼠标的游离点距离页面左侧的距离， 正好可以拿来做 2 区域的宽度。

2 区域的宽度可以设置上限以及下限， 防止用户将宽度整成 0 或者很大， 当然你也可以不做， 看你喜好

当用户的鼠标抬起的时候停止对 nousemove 的监听 这是鼠标再怎么游离也不能改变 2 的宽度

最终效果

selfresize.gif

应为这个 resize 十分的吃 CPU 所以有必要用节流节一下 上面的图是用了 lodash 的 throttle 之后的效果， 在 chrome 里面有时候很正常 像是上面的效果， 有时候就不行了 cpu 能达到 40%- 50%

补一个 vscode 的 sash 的证据

vscodesash.png