Collapse 折叠面板

使用指南

import { Collapse, CollapseGroup } from 'fs-ui'

export default {
  components: {
    fsCollapse: Collapse,
    fsCollapseGroup: CollapseGroup
  }
}
1
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

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