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>

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

.tui-content {
	padding: 20rpx 30rpx;
	background-color: #fff;
	color: #555;
	font-size: 26rpx;
}

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

/* 样式 */
.tui-content {
	padding: 20rpx 30rpx;
	background-color: #fff;
	color: #555;
	font-size: 26rpx;
}

// Make sure to add code blocks to your code group

手风琴效果

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

<view>
  <block v-for="(item,index) in dataList" :key="index">
  	<tui-collapse :index="index" :current="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>

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

/* 样式 */
.tui-content {
	padding: 20rpx 30rpx;
	background-color: #fff;
	color: #555;
	font-size: 26rpx;
}

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

/* 样式 */
.tui-content {
	padding: 20rpx 30rpx;
	background-color: #fff;
	color: #555;
	font-size: 26rpx;
}

// Make sure to add code blocks to your code group

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

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

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

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

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