Collapse 折叠面板，可以折叠/展开的内容区域。 Collapse 提供了 wui-collapse 和 wui-collapse-item 两个组件，其中 wui-collapse-item 组件可独立使用，需要手风琴效果时结合 wui-collapse 组件一起使用。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

基础使用

wui-collapse-item 组件可单独使用 ，@change 事件仅无父组件 wui-collapse 时生效。

<wui-collapse-item @change="change">
	<view class="wui-item__box">
		<image src="/static/images/common/logo.png" class="wui-logo"></image>
		<text>wlyyui</text>
	</view>
	<template v-slot:content>
		<view class="wui-descr">wlyy是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。</view>
	</template>
</wui-collapse-item>

.wui-item__box {
	width: 100%;
	padding: 26rpx 32rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.wui-logo {
	width: 48rpx;
	height: 48rpx;
	margin-right: 24rpx;
	display: block;
}

.wui-descr {
	width: 100%;
	padding: 32rpx;
	font-size: 28rpx;
	line-height: 52rpx;
	color: #7F7F7F;
	word-break: break-all;
	box-sizing: border-box;
}

默认展开

通过 index 属性设置折叠面板项索引或者唯一标识，open 属性设置是否展开。

<wui-collapse @change="change">
	<wui-collapse-item :index="index" :open="item.isOpen" v-for="(item,index) in items" :key="index">
		<view class="wui-item__box">
			<image :src="item.src" class="wui-logo"></image>
			<text>{{item.title}}</text>
		</view>
		<template v-slot:content>
			<view class="wui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
		</template>
	</wui-collapse-item>
</wui-collapse>

items: [{
	src: 'xxxxxxx.png',
	title: 'wlyyui',
	descr: 'wlyyui 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
	isOpen: true
}, {
	src: 'xxxxxxx.png',
	title: '标题内容',
	descr: '自定义折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开。再次点击标题，折叠内容。'
}]

手风琴效果

通过设置 wui-collapse 组件的 accordion 属性来控制是否为手风琴效果。

<wui-collapse accordion @change="change">
	<wui-collapse-item :index="index" v-for="(item,index) in items" :key="index">
		<view class="wui-item__box">
			<image :src="item.src" class="wui-logo"></image>
			<text>{{item.title}}</text>
		</view>
		<template v-slot:content>
			<view class="wui-descr" style="background-color: rgba(255, 183, 3, .1);">{{item.descr}}</view>
		</template>
	</wui-collapse-item>
</wui-collapse>

items: [{
	src: 'xxxxxxx.png',
	title: 'wlyyui',
	descr: 'wlyyui 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。',
	isOpen: true
}, {
	src: 'xxxxxxx.png',
	title: '标题内容',
	descr: '自定义折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开。再次点击标题，折叠内容。'
}]

Slots

wui-collapse 组件

插槽名称	说明
default	折叠面板内容，内部由多个wui-collapse-item组件组成

wui-collapse-item 组件

名称	说明
default	折叠面板item项标题部分自定义内容
content	折叠面板item项折叠部分自定义内容

Props

wui-collapse 组件

属性名	类型	说明	默认值	平台差异说明
accordion	Boolean	是否开启手风琴效果	false	-

wui-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变量（--wui-color-border）来修改颜色值
borderLeft	Number, String	线条距左侧偏移距离，单位rpx	0	-
arrow	Boolean	是否显示箭头	true	-
arrowColor	String	箭头颜色	#B2B2B2	-
arrowRight	Number, String	箭头距右侧偏移距离，单位rpx	24	-
contentBg	String	折叠内容背景色	#fff	-

Events

wui-collapse 组件

事件名	说明	回调参数
@change	点击切换时触发	{ index : item项索引或者唯一标识, isOpen : 是否展开 }

wui-collapse-item 组件

该组件可独立使用，且@change事件仅独立使用（无父组件 wui-collapse）时有效。

事件名	说明	回调参数
@change	点击切换时触发（仅独立使用时生效）	{ index : item项索引或者唯一标识, isOpen : 是否展开 }