# Collapse 折叠面板
概述
Collapse 折叠面板，可以折叠/展开的内容区域。
Collapse 提供了 fui-collapse 和 fui-collapse-item 两个组件，其中 fui-collapse-item 组件可独立使用，需要手风琴效果时结合 fui-collapse 组件一起使用。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiCollapse from "@/components/firstui/fui-collapse/fui-collapse.vue"
import fuiCollapseItem from "@/components/firstui/fui-collapse-item/fui-collapse-item.vue"
export default {
components:{
fuiCollapse,
fuiCollapseItem
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
fui-collapse-item 组件可单独使用 ，@change 事件仅无父组件 fui-collapse 时生效。
<fui-collapse-item @change="change">
<view class="fui-item__box">
<image src="/static/images/common/logo.png" class="fui-logo"></image>
<text>First UI</text>
</view>
<template v-slot:content>
<view class="fui-descr">First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。</view>
</template>
</fui-collapse-item>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
.fui-item__box {
width: 100%;
padding: 26rpx 32rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.fui-logo {
width: 48rpx;
height: 48rpx;
margin-right: 24rpx;
display: block;
}
.fui-descr {
width: 100%;
padding: 32rpx;
font-size: 28rpx;
line-height: 52rpx;
color: #7F7F7F;
word-break: break-all;
box-sizing: border-box;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
默认展开
通过 index 属性设置折叠面板项索引或者唯一标识，open 属性设置是否展开。
<fui-collapse @change="change">
<fui-collapse-item :index="index" :open="item.isOpen" v-for="(item,index) in items" :key="index">
<view class="fui-item__box">
<image :src="item.src" class="fui-logo"></image>
<text>{{item.title}}</text>
</view>
<template v-slot:content>
<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
</template>
</fui-collapse-item>
</fui-collapse>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
items: [{
src: '/static/images/common/logo.png',
title: 'First UI',
descr: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
isOpen: true
}, {
src: '/static/images/common/icon_tabbar_2x.png',
title: '标题内容',
descr: '自定义折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开。再次点击标题，折叠内容。'
}]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
手风琴效果
通过设置 fui-collapse 组件的 accordion 属性来控制是否为手风琴效果。
<fui-collapse accordion @change="change">
<fui-collapse-item :index="index" v-for="(item,index) in items" :key="index">
<view class="fui-item__box">
<image :src="item.src" class="fui-logo"></image>
<text>{{item.title}}</text>
</view>
<template v-slot:content>
<view class="fui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
</template>
</fui-collapse-item>
</fui-collapse>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
items: [{
src: '/static/images/common/logo.png',
title: 'First UI',
descr: 'First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
isOpen: true
}, {
src: '/static/images/common/icon_tabbar_2x.png',
title: '标题内容',
descr: '自定义折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开。再次点击标题，折叠内容。'
}]
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# Slots
# fui-collapse 组件
| 插槽名称 | 说明 |
|---|---|
| default | 折叠面板内容，内部由多个 fui-collapse-item 组件组成 |
# fui-collapse-item 组件
| 插槽名称 | 说明 |
|---|---|
| default | 折叠面板item项标题部分自定义内容 |
| content | 折叠面板item项折叠部分自定义内容 |
# Props
# fui-collapse 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| accordion | Boolean | 是否开启手风琴效果 | false | - |
| background V2.4.0+ | String | 背景色 | transparent | - |
# fui-collapse-item 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| index | Number, String | item项索引或者唯一标识 | 0 | - |
| disabled | Boolean | 是否禁用点击 | false | - |
| background | String | 标题内容背景色 | #fff | - |
| animation | Boolean | 是否显示动画,如果动画卡顿严重建议不开启 | true | - |
| open | Boolean | 是否展开 | false | - |
| isBorder | Boolean | 是否显示标题内容部分底部线条 | true | - |
| borderColor | String | 线条颜色 | #EEEEEE | 非Nvue端默认为空，可通过css变量（--fui-color-border）来修改颜色值 |
| borderLeft | Number, String | 线条距左侧偏移距离，单位rpx | 0 | - |
| arrow | Boolean | 是否显示箭头 | true | - |
| arrowColor | String | 箭头颜色 | #B2B2B2 | - |
| arrowRight | Number, String | 箭头距右侧偏移距离，单位rpx | 24 | - |
| contentBg | String | 折叠内容背景色 | #fff | - |
| marginTop V2.4.0+ | Number, String | margin-top值，单位rpx | 0 | - |
| marginBottom V2.4.0+ | Number, String | margin-bottom值，单位rpx | 0 | - |
# Events
# fui-collapse 组件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 点击切换时触发 | { index : item项索引或者唯一标识, isOpen : 是否展开 } |
# fui-collapse-item 组件
该组件可独立使用，且@change事件仅独立使用（无父组件 fui-collapse）时有效。
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 点击切换时触发（仅独立使用时生效） | { index : item项索引或者唯一标识, isOpen : 是否展开 } |
# Methods
通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。
# fui-collapse-item 组件
| 方法名 | 说明 | 传入参数 |
|---|---|---|
| init | 重新初始化组件内容高度，当内容为异步获取时需要延时调用此方法 | - |
Collapse 折叠面板