# tui-collapse 折叠面板

介绍

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

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiCollapse from "@/components/thorui/tui-collapse/tui-collapse.vue"
export default {
	components:{
		tuiCollapse
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-collapse": "/components/thorui/tui-collapse/tui-collapse"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基本使用

index 属性为列表索引值。current 属性控制是否展开,当 current 属性值等于 index 属性值时,则展开,否则折叠。disabled 属性控制是否禁用点击展开。

<!--uni-app-->
<view>
	<block v-for="(item,index) in dataList" :key="index">
		<tui-collapse :index="index" :current="item.current" :disabled="item.disabled" @click="change">
			<template v-slot:title>
				<tui-list-cell :hover="!item.disabled">{{item.name}}</tui-list-cell>
			</template>
			<template v-slot:content>
				<view class="tui-content">{{item.intro}}</view>
			</template>
		</tui-collapse>
	</block>
</view>

<!--微信小程序-->
<view>
	<block wx:for="{{dataList}}" wx:key="index">
	  <tui-collapse index="{{index}}" current="{{item.current}}" disabled="{{item.disabled}}" bindclick="change">
		<view slot="title">
		  <tui-list-cell hover="{{!item.disabled}}">{{item.name}}</tui-list-cell>
		</view>
		<view slot="content">
		  <view class="tui-content">{{item.intro}}</view>
		</view>
	  </tui-collapse>
	</block>
</view>
//data 数据
dataList: [{
	name: "杜甫",
	intro: "杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫,但后来声名远播,对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来,大多集于《杜工部集》。",
	current: 0,
	disabled: false
},
{
	name: "李清照",
	intro: "李清照出生于书香门第,早期生活优裕,其父李格非藏书甚富,她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时,流寓南方,境遇孤苦。所作词,前期多写其悠闲生活,后期多悲叹身世,情调感伤。形式上善用白描手法,自辟途径,语言清丽。",
	current: -1,
	disabled: false
},
{
	name: "鲁迅",
	intro: "鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响,蜚声世界文坛,尤其在韩国、日本思想文化领域有极其重要的地位和影响,被誉为“二十世纪东亚文化地图上占最大领土的作家”。",
	current: -1,
	disabled: false
}]
手风琴效果

手风琴效果主要是 current 属性控制,与之前不同的是手风琴效果的 current 属性值不再是每个Item项单独定义current变量控制,而是只有一个变量去控制。

//data 数据
current: -1,
dataList:[{
	name: "杜甫",
	intro: "杜甫的思想核心是儒家的仁政思想。"
},
{
	name: "李清照",
	intro: "李清照出生于书香门第。"
},
{
	name: "鲁迅",
	intro: "鲁迅一生在文学创作。"
}]

# Slots

名称 说明
title 折叠面板标题部分,默认显示内容
content 折叠面板被折叠的内容

# 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 是否禁用 false
arrow Boolean 是否带箭头 true
arrowColor String 箭头颜色 #333

# Events

事件名 说明 回调参数
click 切换点击事件 {index: Number} //当前点击项的索引值

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码