组件 / other

ResizeObserver

尺寸监听工具组件，封装原生 ResizeObserver（经 @chenzy-design/core 归一化），渲染一个无视觉样式的包裹元素作为观测容器，slot 暴露 width/height/entry，onResize 分发归一化尺寸事件；内置 throttle/debounce 节流去抖与 multiple 多目标观测；SSR/老浏览器静默降级，fallbackToWindow 可降级为 window.resize 近似监听；onResizeStart/onResizeEnd 暴露连续变化的首帧与静默结束边界事件；另导出 resize action 供轻量 use:resize 用法、getGlobalResizeObserver 单例池供大列表共享。盒模型支持 content-box/border-box/device-pixel-content-box，包裹元素标签可经 tag 自定义。

设计文档

如何引入

import { ResizeObserver } from '@chenzy-design/svelte';

基础尺寸观察

通过 slot 实时获取容器宽高，拖拽可调整

拖拽右下角调整容器大小，实时显示尺寸
0 × 0 px

调整中 / 调整完成

onResizeStart / onResizeEnd 边界事件：拖拽时显示“调整中”，静默后提交结果

拖拽调整时显示“调整中”，松手静默后提交“调整完成”
空闲
0 × 0 px

响应式切换布局

按容器宽度断点在纵向堆叠与横向并排之间切换

容器宽度 < 360px 时纵向堆叠，否则横向并排
紧凑（纵向）
0 px
侧栏
主内容区

多目标观测

multiple 模式同时监听多个子元素，onResize 按 target 路由各自尺寸

multiple 模式：分别监听三个可独立调整大小的子卡片
A: — pxB: — pxC: — px
卡片 A
卡片 B
卡片 C

API 参考

ResizeObserver

Props

属性说明类型默认值
box观测盒模型：content-box 仅内容区，border-box 含 padding+border，device-pixel-content-box 物理像素内容盒（含 DPR；不支持时回退 content-box）'content-box'|'border-box'|'device-pixel-content-box''content-box'
disabled暂停尺寸分发，observer 仍监听但不向 slot/回调通知booleanfalse
throttle节流间隔(ms)，leading+trailing，0 即原生即时。与 debounce 互斥（同时 >0 时 debounce 优先）number0
debounce防抖等待(ms)，trailing-only，0 关闭。与 throttle 互斥（优先于 throttle）number0
multiple多目标：观测包裹元素的所有直接子元素，onResize 逐个抛出，用 entry.target 区分booleanfalse
observeOnMount挂载后立即测量一次（ResizeObserver 原生在 observe 时即触发首次回调，天然满足）booleantrue
tag包裹元素标签，经 svelte:element 渲染；须为可生成盒子的元素（勿用 display:contents 类标签）string'div'
fallbackToWindow原生 ResizeObserver 不可用（SSR/老环境）或显式开启时，降级监听 window.resize 并用 getBoundingClientRect 近似重测（精度较低）booleanfalse
observeParent观测包裹元素的父节点（parentElement）而非自身（对标 Semi observeParent）。与 multiple 互斥，同时为 true 时 multiple 优先；父节点缺失时静默不观测booleanfalse

Events

事件载荷说明
onResize—尺寸变化时分发归一化 entry（受控，不回写）
onFirstMeasure—首次测量完成时分发归一化 entry
onResizeStart—一段连续尺寸变化的首帧触发（"调整中"态）
onResizeEnd—连续变化静默结束后触发，payload 为最后一帧（"调整完成"）

Slots

名称说明
children作用域参数 { width, height, entry }，entry 首次测量前为 null

Accessibility

  • 包裹元素不设 role/aria，透明容器不进 a11y 树、不可聚焦、不移动焦点。