AutoSizer 自适应尺寸
用于让容器在内容变化时自动跟随宽/高,并带过渡动画。
AutoSizer 自适应尺寸
用于让容器在内容变化时自动跟随宽/高,并带过渡动画。
典型场景:
- Tabs 切换内容时外层高度平滑过渡
- Button 在
loading状态切换时宽度平滑过渡
实现基于
ResizeObserver。当内容中包含图片/异步渲染导致尺寸再次变化时,会自动触发重新测量。
基础用法
仅高度(推荐用于 Tabs/Accordion)
AutoSizer height
交互预览已暂停。
宽度跟随(在 flex 容器内)
当 AutoSizer 处于 flex item 且父容器把它
flex: 1或者width: 100%撑满时,看起来就像“没跟随内容”。
AutoSizer width in flex
交互预览已暂停。
下拉内容高度跟随(用于筛选/搜索)
AutoSizer height for dropdown
交互预览已暂停。
弹框内容高度跟随(模拟)
AutoSizer height for dialog
交互预览已暂停。
仅宽度(推荐用于 Button 内容变化)
AutoSizer width
交互预览已暂停。
数字过渡 + 宽度跟随(NumberFlow)
AutoSizer + NumberFlow
交互预览已暂停。
文本丝滑变换 + 宽度跟随(TextTransformer)
该示例同时开启
width + height跟随,并在外层设置overflow-hidden,用于裁剪 blur 的边缘溢出。
AutoSizer + TextTransformer
交互预览已暂停。
API
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
as | string | div | outer 渲染标签 |
innerAs | string | div | inner 渲染标签 |
width | boolean | true | 是否同步宽度 |
height | boolean | true | 是否同步高度 |
inline | boolean | - | 是否使用 shrink-to-content(默认仅在 width=true && height=false 时启用) |
durationMs | number | 200 | 过渡时长(ms) |
easing | string | ease | 过渡曲线 |
outerClass | string | overflow-hidden | outer class |
innerClass | string | - | inner class |
rounding | 'none' | 'round' | 'floor' | 'ceil' | ceil | 测量值取整策略 |
immediate | boolean | true | mount 后是否立即测量 |
rafBatch | boolean | true | 是否使用 rAF 合并测量 |
Expose
| 名称 | 类型 | 说明 |
|---|---|---|
refresh() | () => Promise<void> | 手动触发重新测量 |
flip(action) | (action: () => void | Promise<void>) => Promise<void> | 以 action 触发一次尺寸过渡(适合 Tabs 切换/明确动作) |
action(fn, options?) | (fn: (el: HTMLElement) => void | Promise<void>, options?: AutoSizerActionOptions | detect) => Promise<any> | 执行一次“事务动作”,内部自动前后快照检测并触发过渡(推荐用于 demo/复杂切换) |
size | Ref<{ width: number; height: number } | null> | 最新测量结果 |
Components