用 `resize` 和 MutationObserver 实现缩放 DOM 并记录尺寸

使用 `resize: vertical` 和 MutationObserver 实现调整任意元素的尺寸,并且记录它的尺寸以备再次使用。

我厂既然号称“机器编程”,DSL 便属于基础配置。于是,各个产品几乎都需要用到 CodeMirror,用于在线写代码。大家的屏幕分辨率不同,对编辑器的大小要求也不同,最简单的办法就是让大家自己调整,并且将尺寸保存在本地。

以前的做法会复杂一些:

  1. 拿一个元素作为 handle 放在角落里
  2. mousedown 时开始侦听 mousemove,动态调整文本框大小
  3. mouseup 时保存尺寸

如今大家应该都有注意到,<textarea> 右下角多了一个缩放用的 handle。这个功能自然不是 <textarea> 独享,而是受 CSS 样式 resize 控制,任何块级元素都适用。MDN 文档在此,建议大家先好好看一遍。

继续阅读“用 `resize` 和 MutationObserver 实现缩放 DOM 并记录尺寸”