Accordion 手风琴

点击标题展开/折叠内容，左侧图标加标题，右侧展开箭头。

基础用法

默认手风琴模式，同一时间只展开一个。

多项同时展开

multiple 允许多个面板同时保持展开状态。

受控模式

v-model 绑定当前展开项，支持外部控制。

当前展开：1

此面板由 v-model 控制展开状态。

自定义图标

#icon 插槽替换左侧图标，#indicator 替换右侧箭头。

禁用状态

disabled 属性禁止点击展开指定面板。

组件结构

<my-accordion> 为外层容器（.my-accordion），内部通过插槽放置多个 <my-accordion-item>。每个 <my-accordion-item> 包含：头部 __header（左侧图标 __icon、标题 __title、右侧箭头 __arrow）、可折叠主体 __body（内含内容 __content）。

CSS 类名

类名	说明
`.my-accordion`	手风琴外层容器
`.my-accordion-item`	手风琴面板项
`.is-open`	展开状态
`.is-disabled`	禁用状态
`.my-accordion-item__header`	面板头部
`.my-accordion-item__icon`	左侧图标
`.my-accordion-item__title`	标题文字
`.my-accordion-item__arrow`	右侧展开箭头
`.is-rotated`	箭头旋转（展开时）
`.my-accordion-item__body`	折叠内容容器
`.my-accordion-item__content`	折叠内容

API

Accordion Props

属性	说明	类型	默认值
modelValue / v-model	当前展开项的 name	`string \| number \| (string \| number)[]`	—
multiple	是否允许多项同时展开	`boolean`	`false`

AccordionItem Props

属性	说明	类型	默认值
name	唯一标识	`string \| number`	—
title	标题文本	`string`	—
open	手动控制展开状态	`boolean`	—
disabled	禁用该面板	`boolean`	`false`

AccordionItem Slots

名称	说明	作用域
default	展开后的内容	—
title	自定义标题	—
icon	自定义左侧图标	—
indicator	自定义右侧箭头	`{ active: boolean }`

Accordion 手风琴 ​

基础用法 ​

多项同时展开 ​

受控模式 ​

自定义图标 ​

禁用状态 ​

组件结构 ​

CSS 类名 ​

API ​

Accordion Props ​

AccordionItem Props ​

AccordionItem Slots ​