Collapse 折叠面板

AuCollapseItem 提供紧凑的标题、摘要、展开入口与完整内容区域，可独立使用。AuCollapse 管理多个子项的展开状态；开启 accordion 后成为手风琴，同一时间只展开一项。

基础用法

多个面板可以同时展开。

禁用项无法切换。

手风琴模式同一时间只展开一个面板。

展开风险说明会收起判断依据。

<script setup>
import { ref } from 'vue';
import { AuButton, AuCollapse, AuCollapseItem } from 'aurora-plus';
const opened = ref(false);
const activeNames = ref(['source']);
const accordionName = ref('basis');
const refreshCount = ref(0);
</script>
<template>
  <div class="collapse-demo">
    <AuCollapseItem v-model="opened" title="分析依据" summary="来源与更新时间" lazy>
      <template #actions><AuButton size="small" @click="refreshCount += 1">刷新</AuButton></template>
      <p>操作按钮独立于展开按钮。已刷新 {{ refreshCount }} 次。</p>
      <p>内容完整换行；首次展开后保留状态。</p>
    </AuCollapseItem>
    <AuCollapse v-model="activeNames" size="small">
      <AuCollapseItem name="source" title="数据来源"><p>多个面板可以同时展开。</p></AuCollapseItem>
      <AuCollapseItem name="history" title="历史明细" lazy destroy-on-close><p>关闭后销毁内容，适合按需读取的明细。</p></AuCollapseItem>
      <AuCollapseItem name="disabled" title="暂不可用" disabled><p>禁用项无法切换。</p></AuCollapseItem>
    </AuCollapse>
    <AuCollapse v-model="accordionName" accordion>
      <AuCollapseItem name="basis" title="判断依据" variant="plain"><p>手风琴模式同一时间只展开一个面板。</p></AuCollapseItem>
      <AuCollapseItem name="risk" title="风险说明" variant="plain"><p>展开风险说明会收起判断依据。</p></AuCollapseItem>
    </AuCollapse>
  </div>
</template>
<style scoped>
.collapse-demo { display: grid; min-width: 0; gap: 12px; }
</style>

分组内的子项必须提供唯一 name，展开状态由 AuCollapse 控制，子项的 v-model 与 default-open 不参与分组状态。

AuCollapse Attributes

属性	说明	类型	默认值
model-value / v-model	当前展开名称；多项为数组，手风琴为单值或 null	array / string / number / null	未指定
default-value	非受控时的初始展开名称	array / string / number	[]
accordion	是否只允许一项展开	boolean	false
disabled	是否禁止整组切换	boolean	false
size	子项默认尺寸：small / default	string	default

AuCollapseItem Attributes

属性	说明	类型	默认值
name	分组内的唯一名称；独立使用可省略	string / number	未指定
model-value / v-model	独立使用时是否展开	boolean	未指定
default-open	独立非受控时的初始展开状态	boolean	false
title	标题	string	更多信息
summary	简短摘要	string	''
disabled	是否禁止切换	boolean	false
lazy	是否延迟到首次展开再挂载	boolean	false
destroy-on-close	关闭时是否卸载正文	boolean	false
fill	填满具有确定高度的父容器，并独立滚动正文	boolean	false
size	small / default；省略时继承分组尺寸	string	default
variant	panel 表面 / plain 透明嵌入	string	panel

Events

change 只在用户点击切换时触发；受控模式需回写 v-model，外部更新值不触发该事件。

组件	事件	参数
AuCollapse	update:modelValue、change	多项为名称数组；手风琴为名称或 null
AuCollapseItem	update:modelValue	独立使用时的下一展开布尔值
AuCollapseItem	change	下一展开布尔值

Slots

AuCollapse 的默认插槽放置子项。AuCollapseItem 所有插槽均提供 { expanded }。

子项插槽	说明
title	标题内容
summary	标题旁的摘要内容
icon	标题前的图标
actions	独立操作区，可放按钮；不会触发展开
default	完整正文

标题、摘要和图标位于展开按钮内，只放文字或非交互内容；其他操作放入 actions。