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 |