代码演示

如何引入

import { OverflowList } from '@kousum/semi-ui-vue';

折叠模式 - 默认

通过 renderMode="collapse" (默认) 来实现内容的折叠。

折叠模式 - 方向

collapse 模式下支持 collapseFrom 设置折叠方向。

折叠模式 - 最小展示的数目

collapse 模式下支持 minVisibleItems 设置最小展示的数目。

滚动模式

通过 renderMode="scroll" 来使用滚动模式的折叠列表。如果需要 scrollIntoView，可以通过选择器： document.querySelector(`.item-cls[data-scrollkey="${key}"] 来选取。

API 参考

属性	说明	类型	默认值	版本
className	类名	string	-	1.1.0
renderMode	渲染模式	collapse| scroll	collapse	1.1.0
style	OverflowList的样式	React.CSSProperties	-	1.1.0

renderMode='collapse'

属性	说明	类型	默认值	版本
collapseFrom	折叠方向	start| end	end	1.1.0
items	渲染项目	Record<string, any>[]	-	1.1.0
minVisibleItems	最小展示的可见项数目	number	0	1.1.0
onOverflow	溢出回调	(overflowItems: Record<string, any>[]) => void	-	1.1.0
overflowRenderer	溢出项的自定义渲染函数	(overflowItems: Record<string, any>[]) => React.ReactNode	-	1.1.0
visibleItemRenderer	展示项的自定义渲染函数	(item: Record<string, any>, index: number) => React.ReactElement	-	1.1.0

renderMode='scroll'

属性	说明	类型	默认值	版本
items	渲染项目，要求必含 key 项	Record<string, any>[]	-	1.1.0
onIntersect	溢出回调	({[key: string]: IntersectionObserverEntry}) => void	-	1.1.0
onVisibleStateChange	隐藏显示状态变化回调	(visibleState: Map<string, boolean>) => void;	-	2.61.0
overflowRenderer	溢出项的自定义渲染函数	(overflowItems: Record<string, any>[]) => React.ReactNode[]	-	1.1.0
threshold	触发溢出回调的阈值	number	0.75	1.1.0
visibleItemRenderer	展示项的自定义渲染函数	(item: Record<string, any>, index: number) => React.ReactElement	-	1.1.0
wrapperClassName	滚动 wrapper 的类名	string	-	1.1.0
wrapperStyle	滚动 wrapper 的样式	React.CSSProperties	-	1.1.0