NUR

主题

Collapse 折叠面板 ​

将内容区域折叠/展开，支持手风琴模式、自定义图标与标题。

基础用法 ​

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

项目立项
第一阶段开发
第二阶段开发
测试与上线
vue
<my-collapse :items="items" />

const items = [
  { title: '项目立项', content: '完成需求评审与技术方案设计...' },
  { title: '第一阶段开发', content: '完成核心功能模块开发...' },
]

手风琴模式 ​

accordion 控制是否同时只展开一个面板，默认 true。设为 false 可同时展开多个。

手风琴：开启|关闭
项目立项
第一阶段开发
第二阶段开发
测试与上线
vue
<my-collapse :items="items" :accordion="false" />

自定义面板标题 ​

通过 #title 插槽自定义标题区域。

1项目立项进行中
2第一阶段开发
3第二阶段开发
4测试与上线
vue
<my-collapse :items="items">
  <template #title="{ item, index }">
    <span>{{ index + 1 }}. {{ item.title }}</span>
  </template>
</my-collapse>

自定义图标 ​

通过 #icon 插槽替换展开/折叠图标。

项目立项
第一阶段开发
第二阶段开发
测试与上线
vue
<my-collapse :items="items">
  <template #icon="{ active }">
    <svg>
      <line v-if="!active" x1="12" y1="5" x2="12" y2="19" />
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  </template>
</my-collapse>

图标位置 ​

icon-placement 控制箭头在左侧还是右侧。

图标位置：右侧|左侧
项目立项
第一阶段开发
第二阶段开发
测试与上线
vue
<my-collapse :items="items" icon-placement="left" />

阻止折叠 ​

prevent-collapse 确保始终至少有一个面板处于展开状态。

项目立项
第一阶段开发
第二阶段开发
测试与上线
vue
<my-collapse :items="items" prevent-collapse />

组件结构 ​

根元素 .my-collapse 包含多个 .my-collapse-item，每个折叠项由头部（图标 + 标题）和可折叠的体部（内容）组成，通过 <transition> 实现展开/折叠动画。

CSS 类名 ​

类名说明
.my-collapse根元素
.my-collapse-item折叠项
.my-collapse-item.is-active展开状态
.my-collapse-item.is-disabled禁用状态
.my-collapse-item__header折叠项头部（可点击）
.my-collapse-item__header.is-active头部展开状态
.my-collapse-item__icon展开/折叠图标容器
.my-collapse-item__title标题文字
.my-collapse-item__body折叠内容容器
.my-collapse-item__content折叠内容

API ​

Collapse Props ​

属性说明类型默认值
modelValue / v-model当前展开项的 name 数组(string | number)[][]
items折叠项列表CollapseItem[][]
accordion手风琴模式（同时只展开一个）booleantrue
iconPlacement图标位置'left' | 'right''right'
preventCollapse阻止全部折叠booleanfalse

Collapse Slots ​

名称说明作用域
title自定义标题{ item, index, active }
icon自定义图标{ item, index, active }
content自定义内容{ item, index, active }

CollapseItem ​

ts
interface CollapseItem {
  title: string
  content?: string
  disabled?: boolean
}