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 属性值不�