overflow

适用场景

根据容器宽度 / 高度 动态计算渲染内容, 比如 Select TreeSelect 等, 还可以适用于 文本省略号等

链接地址

• 预览地址

• Github

  解析

• rc-resize-observer: 可参考 ResizeObserver 通过观察者模式监听容器宽度/ 高度变化触发事件, 除此之外还有其他观察者模式的监听 比如 PerformanceObserver(性能检测对象) MutationObserver(监听 DOM对象添加删除等) IntersectionObserver (检测目标元素和顶级文档视窗窗口交叉情况, 比如可适用于监听 滚动加载 image 等) 当前工具依赖了 resize-observer-polyfill 兼容版本 其他参照

  • Observer
  • useObserver
  • 现代浏览器观察者 Observer API 指南
  • 精读《react-intersection-observer 源码》
  • 浏览器的5种 Observer 你用过几种 ？
  • Element.getBoundingClientRect() - Web API 接口参考 | MDN
  • IntersectionObserver API 使用教程 - 阮一峰的网络日志

    原理

    说起来原理应该都比较清楚, 大致就是通过监听容器的宽度 / 高度变化, 动态改变内容, 通俗的将就是

1. 获取容器内容 并做缓存
2. 获取容器宽度 / 高度 以及配置项(如: 最大长度, 是否展示 tip, 以及 tags 模式下计算每个 tag 的宽度 / 高度动态设置)