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