ThorUI文档

# 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示例小程序码

← tui-upload 图片上传 →