# Collapse 折叠面板 V1.1.0+
概述
Collapse 折叠面板，可以折叠/展开的内容区域。
Collapse 提供了 fui-collapse 和 fui-collapse-item 两个组件，其中 fui-collapse-item 组件可独立使用，需要手风琴效果时结合 fui-collapse 组件一起使用。
温馨提示
使用该组件 需要 同时引入 fui-types 类型文件。
# 支持平台
目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。
| 安卓系统版本 | 安卓uni-app | 安卓uniapp-x | iOS系统版本 | iOS uniapp | iOS uniapp-x | 小程序 | H5/Web |
|---|---|---|---|---|---|---|---|
| 5.0 | × | ✓ | 9.0 | × | × | × | ✓ |
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiCollapse from "@/components/firstui/fui-collapse/fui-collapse.uvue"
import fuiCollapseItem from "@/components/firstui/fui-collapse-item/fui-collapse-item.uvue"
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 class="fui-text">First UI</text>
</view>
<template v-slot:content>
<text class="fui-descr">FirstUI（unix）组件库，一款适配 uni-app x 的轻量、简洁、高效、全面的移动端组件库。</text>
</template>
</fui-collapse-item>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
export default {
data() {
return {
}
},
methods: {
change(e : FuiCollapseChangeParam) {
console.log(e)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
.fui-item__box {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 26rpx 32rpx;
box-sizing: border-box;
}
.fui-logo {
width: 48rpx;
height: 48rpx;
margin-right: 24rpx;
flex-shrink: 0;
}
.fui-descr {
width: 100%;
box-sizing: border-box;
padding: 32rpx;
font-size: 28rpx;
line-height: 52rpx;
color: #7F7F7F;
}
.fui-text {
font-size: 28rpx;
width: 680rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
默认展开
通过 index 属性设置折叠面板项索引，expand 属性设置是否展开。
<fui-collapse @change="change">
<fui-collapse-item :index="index" :expand="item.isOpen" v-for="(item,index) in items" :key="index">
<view class="fui-item__box">
<image :src="item.src" class="fui-logo"></image>
<text class="fui-text">{{item.title}}</text>
</view>
<template v-slot:content>
<text class="fui-descr"
style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</text>
</template>
</fui-collapse-item>
</fui-collapse>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
import { FuiCollapseChangeParam } from '@/components/firstui/fui-types/index.uts'
type IItem = {
src : string;
title : string;
descr : string;
isOpen : boolean;
}
export default {
data() {
return {
items: [{
src: '/static/images/common/logo.png',
title: 'First UI',
descr: 'FirstUI（unix）组件库，一款适配 uni-app x 的轻量、简洁、高效、全面的移动端组件库。',
isOpen: true
}, {
src: '/static/images/common/icon_tabbar_2x.png',
title: '标题内容',
descr: '自定义折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开。再次点击标题，折叠内容。',
isOpen: false
}] as IItem[]
}
},
methods: {
change(e : FuiCollapseChangeParam) {
console.log(e)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.fui-item__box {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 26rpx 32rpx;
box-sizing: border-box;
}
.fui-logo {
width: 48rpx;
height: 48rpx;
margin-right: 24rpx;
flex-shrink: 0;
}
.fui-descr {
width: 100%;
box-sizing: border-box;
padding: 32rpx;
font-size: 28rpx;
line-height: 52rpx;
color: #7F7F7F;
}
.fui-text {
font-size: 28rpx;
width: 680rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
手风琴效果
通过设置 fui-collapse 组件的 accordion 属性来控制是否为手风琴效果。
<fui-collapse :accordion="true" @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 class="fui-text">{{item.title}}</text>
</view>
<template v-slot:content>
<text class="fui-descr"
style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</text>
</template>
</fui-collapse-item>
</fui-collapse>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
import { FuiCollapseChangeParam } from '@/components/firstui/fui-types/index.uts'
type IItem = {
src : string;
title : string;
descr : string;
isOpen : boolean;
}
export default {
data() {
return {
items: [{
src: '/static/images/common/logo.png',
title: 'First UI',
descr: 'FirstUI（unix）组件库，一款适配 uni-app x 的轻量、简洁、高效、全面的移动端组件库。',
isOpen: true
}, {
src: '/static/images/common/icon_tabbar_2x.png',
title: '标题内容',
descr: '自定义折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开。再次点击标题，折叠内容。',
isOpen: false
}] as IItem[]
}
},
methods: {
change(e : FuiCollapseChangeParam) {
console.log(e)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 同上
1
# Slots
# fui-collapse 组件
| 插槽名称 | 说明 |
|---|---|
| default | 折叠面板内容，内部由多个 fui-collapse-item 组件组成 |
# fui-collapse-item 组件
| 插槽名称 | 说明 |
|---|---|
| default | 折叠面板item项标题部分自定义内容 |
| content | 折叠面板item项折叠部分自定义内容 |
# Props
# fui-collapse 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| accordion | Boolean | 是否开启手风琴效果 | false | - |
| background | Boolean | 背景颜色 | #fff | - |
# fui-collapse-item 组件
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| index | Number | item项索引 | 0 | - |
| disabled | Boolean | 是否禁用点击 | false | - |
| background | String | 标题内容背景色 | #fff | - |
| animation | Boolean | 是否显示动画 | true | - |
| expand | Boolean | 是否展开 | false | - |
| isBorder | Boolean | 是否显示标题内容部分底部线条 | true | - |
| borderColor | String | 线条颜色 | #EEEEEE | - |
| borderLeft | Number | 线条距左侧偏移距离，单位rpx | 0 | - |
| arrow | Boolean | 是否显示箭头 | true | - |
| arrowColor | String | 箭头颜色 | #B2B2B2 | - |
| arrowRight | Number | 箭头距右侧偏移距离，单位rpx | 24 | - |
| contentBackground | String | 折叠内容背景色 | #fff | - |
# Events
# fui-collapse 组件
| 事件名 | 类型 | 说明 | 回调参数 |
|---|---|---|---|
| @change | (event: FuiCollapseChangeParam) => void | 点击切换时触发 | FuiCollapseChangeParam |
# fui-collapse-item 组件
该组件可独立使用，且@change事件仅独立使用（无父组件 fui-collapse）时有效。
| 事件名 | 类型 | 说明 | 回调参数 |
|---|---|---|---|
| @change | (event: FuiCollapseChangeParam) => void | 点击切换时触发（仅组件独立使用时生效） | FuiCollapseChangeParam |
# FuiCollapseChangeParam
/**
* Collapse 折叠面板组件 @change 事件 回调参数类型
* @description Collapse 折叠面板组件 change 事件 回调参数类型
* @param {number} index {number} item项索引
* @param {boolean} isOpen {boolean} 是否展开
*/
export type FuiCollapseChangeParam = {
index : number;
isOpen : boolean;
}
/*页面引入*/
import { FuiCollapseChangeParam } from '@/components/firstui/fui-types/index.uts'
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Collapse 折叠面板