折叠面板

Collapse 折叠面板,用来折叠/显示过长的内容或者是列表,内容及样式自定义。

组件结构

<template>
	<view class="tui-collapse" :style="{backgroundColor:bgColor}">
		<view class="tui-collapse-head" :style="{backgroundColor:hdBgColor}" @tap.stop="handleClick">
			<view class="tui-header" :class="{'tui-opacity':disabled}">
				<slot name="title"></slot>
				<view class="tui-collapse-icon tui-icon-arrow" :class="{'tui-icon-active':isOpen}" :style="{color:arrowColor}" v-if="arrow"></view>
			</view>
		</view>
		<view class="tui-collapse-body_box" :style="{backgroundColor:bdBgColor,height:isOpen?height:'0rpx'}">
			<view class="tui-collapse-body" :class="{'tui-collapse-transform':height=='auto','tui-collapse-body_show':isOpen && height=='auto'}">
				<slot name="content"></slot>
			</view>
		</view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiCollapse",
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
bgColor String collapse背景颜色 transparent
hdBgColor String collapse-head 背景颜色 #fff
bdBgColor String collapse-body 背景颜色 transparent
height String collapse-body实际高度 open时使用 auto
index Number 当前折叠面板在列表中的索引 0
current Number 当前索引,index==current时展开 -1
disabled [Boolean, String] 是否禁用 false
arrow [Boolean, String] 是否带箭头 true
arrowColor String 箭头颜色 #333

methods

名称 描述
@click 切换点击事件,回传index

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/collapse/collapse

H5二维码

小程序二维码