仅桌面端保证样式
Collapse 折叠面板
将内容收纳在可展开收起的面板中,点击标题切换显示(带高度过渡动画)。支持手风琴模式(同时只展开一项)与禁用单项;展开状态通过 v-model 受控,value 为展开项 name 的数组(手风琴模式下 emits 派发单个 name 或空串)。
基础用法
model-value 传入数组控制展开项;name 是受控的唯一标识,缺省时回退组件实例 uid;disabled 禁用单项。
通过界面样式与交互效果,让用户清晰感知自己的操作结果。
手风琴
设置 accordion 后同一时刻最多展开一项,再次点击已展开项将其收起;此时 v-model 的值为单个 name 或空串。
change 事件
每次展开项变化都会触发 change,参数与 update:modelValue 一致,可用于上报埋点或联动其他区域。
首次进入系统时的功能引导说明。
最近一次 change:(尚未变化)
受控静态展示
不需要联动状态时,直接以 :model-value 传入初始展开项做静态展示(组件内部会自行维护后续的展开状态)。
订单完成后 7 天内可发起退款申请。
自定义标题
#title 插槽替换标题区(箭头左侧),可组合富文本;默认插槽为面板内容。
API
Collapse Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 当前展开项 name(数组;手风琴模式下 emits 为单个 name 或空串) | array | string | number | [] |
| accordion | 手风琴模式,同时最多展开一项 | boolean | false |
Collapse Events
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| change | 展开项变化,参数与 update:modelValue 一致 | (names) => void | — |
| update:modelValue | v-model 更新 | (names) => void | — |
Collapse Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | eb-collapse-item 列表 | — | — |
CollapseItem Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 面板标题(优先级低于 title 插槽) | string | |
| name | 唯一标识,缺省时回退组件实例 uid | string | number | — |
| disabled | 禁用该项(不可展开,标题置灰) | boolean | false |
CollapseItem Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | 面板内容 | — | — |
| title | 自定义标题(替换箭头左侧区域) | — | — |