Collapse 折叠面板

将内容区域折叠/展开，支持多开、手风琴（单开）和禁用项。

基础用法

AUI 是一套基于 Vue 3 的现代化 UI 组件库，提供丰富的组件，帮助开发者快速构建高质量的 Web 应用界面。

通过 npm 安装 @lite-code/aui-vue 包，然后在项目中按需引入所需组件即可。支持 Tree-shaking，只打包实际使用的组件。

内置亮色和暗色两种主题，通过在 html 元素上切换 dark class 即可实现主题切换，无需额外配置。

默认多开模式，可同时展开多个面板

vue

<script setup lang="ts">
import { ACollapse } from "@lite-code/aui-vue";

const items = [
  {
    key: "1",
    label: "什么是 AUI 组件库？",
    children:
      "AUI 是一套基于 Vue 3 的现代化 UI 组件库，提供丰富的组件，帮助开发者快速构建高质量的 Web 应用界面。",
  },
  {
    key: "2",
    label: "如何安装使用？",
    children:
      "通过 npm 安装 @lite-code/aui-vue 包，然后在项目中按需引入所需组件即可。支持 Tree-shaking，只打包实际使用的组件。",
  },
  {
    key: "3",
    label: "支持哪些主题？",
    children:
      "内置亮色和暗色两种主题，通过在 html 元素上切换 dark class 即可实现主题切换，无需额外配置。",
  },
];
</script>

<template>
  <ACollapse :items="items" :default-active-keys="['1']" />
</template>

手风琴模式

手风琴模式下，每次只能展开一个面板。打开新面板时，其他已展开的面板会自动关闭。

这是第二个面板的内容。尝试展开此面板，观察上方面板自动收起的效果。

这是第三个面板的内容。手风琴模式适用于需要保持页面简洁，引导用户逐步查看内容的场景。

设置 accordion 后每次只能展开一个面板

vue

<script setup lang="ts">
import { ACollapse } from "@lite-code/aui-vue";

const items = [
  {
    key: "1",
    label: "手风琴面板 1",
    children:
      "手风琴模式下，每次只能展开一个面板。打开新面板时，其他已展开的面板会自动关闭。",
  },
  {
    key: "2",
    label: "手风琴面板 2",
    children:
      "这是第二个面板的内容。尝试展开此面板，观察上方面板自动收起的效果。",
  },
  {
    key: "3",
    label: "手风琴面板 3",
    children:
      "这是第三个面板的内容。手风琴模式适用于需要保持页面简洁，引导用户逐步查看内容的场景。",
  },
];
</script>

<template>
  <ACollapse :items="items" accordion :default-active-keys="['1']" />
</template>

禁用某项

这个面板可以正常展开和折叠。

这段内容不可访问。

这个面板也可以正常展开和折叠。

在 items 中设置 disabled: true 禁用对应面板

vue

<script setup lang="ts">
import { ACollapse } from "@lite-code/aui-vue";

const items = [
  {
    key: "1",
    label: "正常面板",
    children: "这个面板可以正常展开和折叠。",
  },
  {
    key: "2",
    label: "禁用面板",
    children: "这段内容不可访问。",
    disabled: true,
  },
  {
    key: "3",
    label: "另一个正常面板",
    children: "这个面板也可以正常展开和折叠。",
  },
];
</script>

<template>
  <ACollapse :items="items" :default-active-keys="['1']" />
</template>

API

Props

属性	类型	默认值	说明
items	CollapseItem[]	—	面板配置列表（必填）
defaultActiveKeys	string[]	[]	默认展开的面板 key（非受控）
activeKeys	string[]	—	当前展开的面板 key（受控）
accordion	boolean	false	是否手风琴模式（每次只展开一个）
bordered	boolean	true	是否显示边框
onChange	(keys: string[]) => void	—	展开状态变化回调，返回当前所有展开的 key
className	string	—	自定义 class
style	object	—	自定义样式

CollapseItem

字段	类型	说明
key	string	面板唯一标识（必填）
label	string	面板标题（必填）
children	string | VNode | (() => VNode)	面板内容（必填）
disabled	boolean	是否禁用此面板