Accordion 手风琴/折叠面板

手风琴组件用于在垂直堆叠的面板之间切换，支持手风琴模式（单展开）与多展开模式，并提供多种视觉变体。

基础用法（手风琴模式）

通过 accordion 属性启用互斥模式，一次只能展开一个面板。v-model 绑定为字符串类型。

<TAccordion v-model="activeName" accordion>
  <TAccordionItem name="item-1" title="面板标题一">
    面板内容一
  </TAccordionItem>
  <TAccordionItem name="item-2" title="面板标题二">
    面板内容二
  </TAccordionItem>
</TAccordion>

多展开模式

不设置 accordion 属性时，多个面板可同时展开。v-model 绑定为字符串数组。

<TAccordion v-model="activeNames">
  <TAccordionItem name="item-1" title="面板一">
    内容一
  </TAccordionItem>
  <TAccordionItem name="item-2" title="面板二">
    内容二
  </TAccordionItem>
</TAccordion>

默认全部折叠

v-model 为空字符串（手风琴模式）或空数组（多展开模式）时，所有面板默认折叠。

<TAccordion v-model="empty" accordion>
  <TAccordionItem name="item-1" title="面板一">...</TAccordionItem>
  <TAccordionItem name="item-2" title="面板二">...</TAccordionItem>
</TAccordion>

视觉变体

Flush 变体

通过 variant="flush" 去除外边框与圆角，仅保留项间分隔线。

<TAccordion variant="flush" accordion>
  <TAccordionItem name="item-1" title="面板一">...</TAccordionItem>
  <TAccordionItem name="item-2" title="面板二">...</TAccordionItem>
</TAccordion>

Tabs 变体

通过 variant="tabs" 使用顶部强调分隔线的选项卡风格。

<TAccordion variant="tabs" accordion>
  <TAccordionItem name="item-1" title="面板一">...</TAccordionItem>
  <TAccordionItem name="item-2" title="面板二">...</TAccordionItem>
</TAccordion>

Inverted 反转变体

通过 inverted 使用深色标题栏 + 浅色内容区的反转样式。

<TAccordion accordion inverted>
  <TAccordionItem name="item-1" title="面板一">...</TAccordionItem>
  <TAccordionItem name="item-2" title="面板二">...</TAccordionItem>
</TAccordion>

禁用面板

在 TAccordionItem 上设置 disabled 禁用点击展开。

<TAccordion accordion>
  <TAccordionItem name="item-1" title="可点击的面板">...</TAccordionItem>
  <TAccordionItem name="item-2" title="禁用的面板" disabled>...</TAccordionItem>
  <TAccordionItem name="item-3" title="另一个面板">...</TAccordionItem>
</TAccordion>

自定义标题插槽

使用 #title 插槽自定义标题区，提供 isActive 作用域参数。

<TAccordion accordion>
  <TAccordionItem name="item-1">
    <template #title="{ isActive }">
      <span>{{ isActive ? '展开' : '收起' }}</span>
    </template>
    面板内容
  </TAccordionItem>
</TAccordion>

带图标

通过 icon prop 在标题前显示图标。

<TAccordion accordion>
  <TAccordionItem name="item-1" title="链接面板" :icon="IconLink">
    面板内容
  </TAccordionItem>
</TAccordion>

beforeChange 拦截

通过 beforeChange 拦截面板切换，可用于未保存提示等场景。

<TAccordion accordion :before-change="(name, expanded) => name !== 'item-2'">
  <TAccordionItem name="item-1" title="允许展开">...</TAccordionItem>
  <TAccordionItem name="item-2" title="被拦截">...</TAccordionItem>
</TAccordion>

隐藏箭头

通过 hide-arrow 隐藏展开箭头，提供更简洁的视觉效果。

<TAccordion accordion hide-arrow>
  <TAccordionItem name="item-1" title="面板一">...</TAccordionItem>
</TAccordion>

Plus 图标模式

通过 plus-icon 使用 +/- 图标代替 chevron 旋转图标，适合"常见问题"等场景。

<TAccordion accordion plus-icon>
  <TAccordionItem name="item-1" title="问题一">回答一</TAccordionItem>
  <TAccordionItem name="item-2" title="问题二">回答二</TAccordionItem>
</TAccordion>

API

TAccordion Props

Prop	说明	类型	默认值
modelValue	当前展开的面板（v-model）	string | string[]	'' / []
accordion	手风琴模式（单展开互斥）	boolean	false
variant	视觉变体	'default' | 'flush' | 'tabs'	'default'
inverted	反转样式（深色标题栏）	boolean	false
plusIcon	使用 +/- 图标	boolean	false
expandIconPosition	展开图标位置	'left' | 'right'	'right'
hideArrow	隐藏所有面板展开箭头	boolean	false
beforeChange	切换前置拦截钩子	(name: string, expanded: boolean) => boolean | Promise<boolean>	—

TAccordion Emits

事件	参数	说明
update:modelValue	(value: string | string[])	v-model 更新事件
change	(name: string, expanded: boolean)	面板展开/收起变化时触发

TAccordion Slots

插槽	说明
default	TAccordionItem 子组件

TAccordionItem Props

Prop	说明	类型	默认值
name	唯一标识	string	—（必填）
title	标题文字	string	''
icon	标题前图标（@tabler/icons-vue 导入）	Icon	—
disabled	禁用切换	boolean	false
hideArrow	隐藏当前面板展开箭头	boolean	false

TAccordionItem Slots

插槽	作用域参数	说明
default	—	面板内容区
title	{ isActive: boolean, toggle: () => void }	自定义标题区
icon	{ isActive: boolean }	自定义展开图标