参数
| 参数 | 类型 | 默认值 | 说明 |
|---|
itemCount | MaybeRefOrGetter<number> | — | 要测量的项数。 |
options | UseOverflowOptions | — | 溢出行为的配置。 |
options.gap | number | 0 | 项与项的间距,单位像素,参与宽度计算。 |
options.minVisibleItems | number | 0 | 哪怕挤不下也至少显示的项数。 |
options.maxVisibleItems | number | — | 哪怕都挤得下也不能超过的项数。下限比它大时,下限胜出。 |
options.maxRows | number | — | 最多排几行,剩下的收进指示器。不传或传 1 只排一行。 |
options.collapseFrom | 'start' | 'end' | 'end' | 从哪一头开始收起。 |
options.behavior | 'observeParent' | 'observeSelf' | 'observeSelf' | 量哪一个元素的宽度。observeParent 量父元素的内容宽度,看得见的容器本身可以继续跟着内容收缩。 |
返回值
| 名称 | 类型 | 说明 |
|---|
containerRef | Ref<HTMLElement | null> | 绑到看得见的容器上。 |
measureRef | Ref<HTMLElement | null> | 绑到屏幕外的测量容器上,里面放全部项。 |
visibleCount | Ref<number> | 看得见的容器里能放下几项。 |
hasOverflow | ComputedRef<boolean> | 是不是有项被收起来了(visibleCount < itemCount)。 |
rows | Ref<number> | 看得见的项占几行。单行模式是 1,什么都没显示时是 0。 |
rowHeight | Ref<number> | 量到的最大项高,多行容器用它定高度。 |
remeasure | () => void | 再量一次。测试里改过宽度、或者折叠状态变了之后用得上。 |
元素版
useOverflow(element, isActive) 是另一个签名。它不量一排项,只量一个盒子:判断这个元素里的内容是不是比它自己的可视区域高,返回一个 Ref<boolean>。isActive 为 false 时它不做测量。
| 名称 | 类型 | 说明 |
|---|
element | Ref<HTMLElement | null> | 要量的那个盒子的模板 ref。 |
isActive | Ref<boolean> | 要不要量。为 false 时结果一直是 false。 |
返回值 | Ref<boolean> | 内容是不是比盒子高。 |