# 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
第二种: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
.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
默认展开

通过 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
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
手风琴效果

通过设置 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
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

# 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 重新初始化组件内容高度,当内容为异步获取时需要延时调用此方法 -

示例预览

# 示例代码地址

FirstUICollapse 折叠面板
Last Updated: 5/30/2024, 10:36:36 AM