Collapse 折叠面板

参考 TDesign 的示例结构,展示基础折叠、状态说明、手风琴和卡片式视觉效果。

折叠面板组件,可展开/收起内容区域

演示

9:41

代码示例

<!-- 基础折叠面板 -->
  <re-collapse class="demo-collapse-default">
  <re-collapse-panel class="demo-collapse-panel-1" :value="1" title="面板1">
  <re-collapse-panel class="demo-collapse-panel-2" :value="2" title="面板2">

<!-- 默认展开 -->
  <re-collapse class="demo-collapse-default-value" :defaultValue="[1]">
  <re-collapse-panel class="demo-collapse-default-panel-1" :value="1" title="默认展开1">
  <re-collapse-panel class="demo-collapse-default-panel-2" :value="2" title="默认展开2">

<!-- 带状态说明 -->
  <re-collapse class="demo-collapse-action" :defaultValue="['guide']" @change="onActionChange">
  <re-collapse-panel class="demo-collapse-action-panel" value="guide" title="使用说明">

<!-- 手风琴式 -->
  <re-collapse class="demo-collapse-mutex" :expandMutex="true" :defaultValue="['a']" @change="onMutexChange">
  <re-collapse-panel class="demo-collapse-mutex-1" value="a" title="互斥1">
  <re-collapse-panel class="demo-collapse-mutex-2" value="b" title="互斥2">
  <re-collapse-panel class="demo-collapse-disabled-panel" value="d" title="禁用面板" :disabled="true">
  <re-collapse-panel class="demo-collapse-normal-panel" value="e" title="正常面板">

<!-- 无展开图标 -->
  <re-collapse class="demo-collapse-no-icon" :expandIcon="false">
  <re-collapse-panel class="demo-collapse-no-icon-panel" value="x" title="无展开图标">

<!-- 多面板展开 -->
  <re-collapse class="demo-collapse-multi">
  <re-collapse-panel class="demo-collapse-multi-1" value="m1" title="面板A">
  <re-collapse-panel class="demo-collapse-multi-2" value="m2" title="面板B">
  <re-collapse-panel class="demo-collapse-multi-3" value="m3" title="面板C">

<!-- 卡片式风格 -->
  <re-collapse class="demo-collapse-custom-style" customStyle="margin-top: 10px;background-color: #f8fbff;border-radius: 16px;overflow: hidden;">
  <re-collapse-panel class="demo-collapse-style-panel" value="s" title="自定义样式面板">

<!-- 长内容面板 -->
  <re-collapse class="demo-collapse-long">
  <re-collapse-panel class="demo-collapse-long-panel" value="l" title="长内容面板">

引入

推荐使用 easycom 模式,配置后无需手动 import 即可直接使用 <re-collapse />。

API

Collapse Props

名称类型默认值描述必传
valueany[]展开的面板value数组N
defaultValueany[]默认展开的面板value数组N
expandMutexbooleanfalse是否只展开一个面板N
expandIconbooleantrue是否显示展开图标N
customStylestring""自定义样式N

Collapse Events

名称参数描述
changevalue: any值变化时触发
expandvalue: stringnumber

Collapse Slots

名称描述
default默认插槽

CollapsePanel Props

名称类型默认值描述必传
valuestring | number""面板唯一标识N
titlestring""面板标题N
disabledbooleanfalse是否禁用面板N
expandIconbooleantrue是否显示展开图标N

CollapsePanel Slots

名称描述
default默认插槽