Collapse 折叠面板
使用指南
import { Collapse, CollapseGroup } from 'fs-ui'
export default {
components: {
fsCollapse: Collapse,
fsCollapseGroup: CollapseGroup
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
代码演示
- 默认
<fs-collapse-group>
<fs-collapse title="标题一">
<fs-button>按钮</fs-button>
</fs-collapse>
<fs-collapse title="标题二">
<fs-button size="large">按钮</fs-button>
</fs-collapse>
<fs-collapse title="">
<template slot="title">标题三</template>
<fs-button type="plain">按钮</fs-button>
</fs-collapse>
</fs-collapse-group>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
CollapseGroup
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 打开的面板name或name的数组对象 | 'ul' | |
| tag | 元素标签 | String | 'ul' |
| single | 是否只能展开一个,默认不启用,v-model需要绑定数组。 | Boolean | - |
插槽
| 插槽名 | 说明 |
|---|---|
| - | 默认内容 |
Collapse
属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| tag | 元素标签 | String | 'li' |
| disabled | 是否disable | Boolen | - |
| title | 标题 | Boolen | - |
| title-img | 标题前的图片地址 | String | - |
| name | 名称 | String | Number |
插槽
| 插槽名 | 说明 |
|---|---|
| - | 展开的内容 |
| title | 自定义标题 |
事件
| event | 说明 | 返回值 |
|---|---|---|
| toggle | toggle 事件 | name |