t-collapse

Collapse 折叠面板

组件介绍

t-collapse 是一个折叠面板组件，用于管理多个 t-collapse-item 组件的展开和折叠状态，支持手风琴模式和默认展开项设置。组件提供了统一的样式配置和事件处理，适用于需要节省空间或按需展示信息的场景，如FAQ问答、用户设置选项、表单折叠区域等。

平台兼容

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

基础用法

基础用法参考 demo/collapse/collapse.uvue，在插槽中放置 t-collapse-item 组件，通过 values 属性设置默认展开项，通过 accordion 属性开启手风琴模式。

<template>
  <!-- 基础折叠面板 -->
  <t-collapse v-model:values="openValues" class="mb-30">
    <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">
      <view class="p-20">
        <t-text>内容2</t-text>
      </view>
    </t-collapse-item>
    <t-collapse-item id="3" title="标题3">
      <view class="p-20">
        <t-text>内容3</t-text>
      </view>
    </t-collapse-item>
  </t-collapse>
  <t-text>展开项: {{ openValues }}</t-text>

  <!-- 手风琴模式折叠面板 -->
  <t-collapse v-model:values="accordionValues" accordion class="mb-30">
    <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">
      <view class="p-20">
        <t-text>内容2</t-text>
      </view>
    </t-collapse-item>
    <t-collapse-item id="3" title="标题3">
      <view class="p-20">
        <t-text>内容3</t-text>
      </view>
    </t-collapse-item>
  </t-collapse>
  <t-text>手风琴模式展开项: {{ accordionValues }}</t-text>
</template>

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

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
cellMainClass	header头cell样式	string	''
borderClass	边框样式	string	''
border	是否显示边框	boolean	true
accordion	是否开启手风琴模式	boolean	false
values	默认展开的ID集合	string[]	[]
rowContentClass	统一设置子元素右侧图标的样式	string	''
rowRightIconClass	统一设置子组件右侧力图标样式	string	''
rowBoxClass	统一设置子元素每一项的样式	string	'bgn'
rowHeaderBoxClass	统一设置子元素 header盒子的样式	string	'bgn'
rowTitleClass	统一设置子元素标题的样式	string	''
rowLabelClass	统一设置子元素标签的样式	string	''
rowIconClass	统一设置子元素图标的样式	string	''

Events

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

Slots

插槽名	说明
default	默认插槽，用于放置 t-collapse-item 组件