Meri Plus折叠面板 Collapse
3.2.119 版本开始提供该组件。
通过折叠面板收纳内容区域
基础用法
手风琴效果
禁用用法
自定义标题用法
自定义图标用法
点击回调用法
自定义位置
Collapse API
Collapse Attributes
| 属性名 | 详情 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 当前活动面板 | array | [] |
| accordion | 是否手风琴模式 | boolean | false |
| before-click | function(id, isActive, done)，id 的值为当前点击项, isActive 是否激活, done用于触发点击事件 | (id: string | number,isActive: boolean, done: () => void ) => void | — |
| headerPosition | Header位置（优先采用Collapse Item自身的） | string | top |
| iconPosition | Icon位置（优先采用Collapse Item自身的） | string | right |
| hoverStyle | hover样式（优先采用Collapse Item自身的） | boolean | true |
| onlyIconClick | 只允许icon可点击（优先采用Collapse Item自身的） | boolean | false |
Collapse Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 切换当前活动面板 | Function |
| click | 点击当前活动面板 | Function |
Collapse Slots
| 插槽名 | Description | 子标签 |
|---|---|---|
| default | 自定义默认内容 | Collapse Item |
Collapse Item API
Collapse Item Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| id | 唯一标志符 | string / number | — |
| title | 面板标题 | string | '' |
| icon | 折叠项目的图标 | Component | IconMeriComponentArrowRight |
| disabled | 是否禁用 | boolean | false |
| headerPosition | Header位置 | string | top |
| iconPosition | Icon位置 | string | right |
| hoverStyle | hover样式 | boolean | true |
| onlyIconClick | 只允许icon可点击 | boolean | false |
Collapse Item Slot
| 插槽名 | 说明 | Type |
|---|---|---|
| default | Collapse Item 的内容 | — |
| title | Collapse Item 的标题 | — |
| icon | Collapse Item 折叠项目图标的内容 | — |