t-collapse-item

CollapseItem 折叠项

组件介绍

t-collapse-item 是 t-collapse 组件的子组件，用于表示折叠面板中的每一项，支持自定义标题、标签、图标等内容，以及各种样式配置。组件与 t-collapse 组件配合使用，实现折叠功能，适用于需要节省空间或按需展示信息的场景。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/collapse/collapse.uvue，作为 t-collapse 的子组件使用，通过 value 属性设置唯一标识，通过 title 属性设置标题，在插槽中放置内容。

<template>
  <t-collapse v-model:values="openValues">
    <!-- 基础折叠项 -->
    <t-collapse-item id="1" title="标题1">
      <view class="p-20">
        <t-text>内容1</t-text>
      </view>
    </t-collapse-item>
    
    <!-- 带图标的折叠项 -->
    <t-collapse-item id="2" title="标题2" icon="star">
      <view class="p-20">
        <t-text>内容2</t-text>
      </view>
    </t-collapse-item>
    
    <!-- 带标签的折叠项 -->
    <t-collapse-item id="3" title="标题3" label="新">
      <view class="p-20">
        <t-text>内容3</t-text>
      </view>
    </t-collapse-item>
    
    <!-- 自定义样式的折叠项 -->
    <t-collapse-item 
      id="4" 
      title="标题4" 
      title-class="fw-bold" 
      content-class="bg-gray-100"
    >
      <view class="p-20">
        <t-text>内容4</t-text>
      </view>
    </t-collapse-item>
  </t-collapse>
</template>

<script setup>
const openValues = ref(['1']);
</script>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	''
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
value	组件标识，需要唯一，用于控制首次加载是否折叠	string	''
title	标题	string	''
titleClass	标题样式	any	''
label	标签	string	''
labelClass	标签样式	any	''
icon	图标	string	''
iconClass	图标样式	any	''
contentClass	折叠内容盒子的样式	any	''
rightIconClass	右侧图标的样式	any	''
headerBoxClass	header盒子样式	any	''

Events

事件名	说明	回调参数
click	点击时触发	UniPointerEvent
initFinished	组件初始化完成时触发，返回组件节点信息	NodeInfo
touchstart	触摸开始时触发	-
touchend	触摸结束时触发	-
touchmove	触摸移动时触发	-
touchcancel	触摸取消时触发	-
transitionend	动画结束时触发	-

Slots

插槽名	说明
default	默认插槽，用于放置折叠项的内容