项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
仅桌面端保证样式

Collapse 折叠面板 ​

将内容收纳在可展开收起的面板中,点击标题切换显示(带高度过渡动画)。支持手风琴模式(同时只展开一项)与禁用单项;展开状态通过 v-model 受控,value 为展开项 name 的数组(手风琴模式下 emits 派发单个 name 或空串)。

基础用法 ​

model-value 传入数组控制展开项;name 是受控的唯一标识,缺省时回退组件实例 uid;disabled 禁用单项。

手风琴 ​

设置 accordion 后同一时刻最多展开一项,再次点击已展开项将其收起;此时 v-model 的值为单个 name 或空串。

change 事件 ​

每次展开项变化都会触发 change,参数与 update:modelValue 一致,可用于上报埋点或联动其他区域。

最近一次 change:(尚未变化)

受控静态展示 ​

不需要联动状态时,直接以 :model-value 传入初始展开项做静态展示(组件内部会自行维护后续的展开状态)。

自定义标题 ​

#title 插槽替换标题区(箭头左侧),可组合富文本;默认插槽为面板内容。

API ​

Collapse Props

参数说明类型默认值
v-model当前展开项 name(数组;手风琴模式下 emits 为单个 name 或空串)array | string | number[]
accordion手风琴模式,同时最多展开一项booleanfalse

Collapse Events

参数说明类型默认值
change展开项变化,参数与 update:modelValue 一致(names) => void—
update:modelValuev-model 更新(names) => void—

Collapse Slots

参数说明类型默认值
defaulteb-collapse-item 列表——

CollapseItem Props

参数说明类型默认值
title面板标题(优先级低于 title 插槽)string
name唯一标识,缺省时回退组件实例 uidstring | number—
disabled禁用该项(不可展开,标题置灰)booleanfalse

CollapseItem Slots

参数说明类型默认值
default面板内容——
title自定义标题(替换箭头左侧区域)——