Collapse 折叠面板
折叠面板组件，用于展示可折叠的内容区域。
基础用法
Q
基础折叠面板
+
默认展开
Q
默认展开的面板
−
这个面板默认是展开状态
自定义徽章
NEW
自定义徽章文本
+
HOT
自定义徽章颜色
+
问
自定义徽章内容
+
禁用状态
Q
禁用的面板
+
底部间距
当多个折叠面板需要垂直排列时，可以使用 margin-bottom 属性设置间距：
Q
第一个面板
+
Q
第二个面板
+
Q
第三个面板
+
插槽使用
Q
自定义标题
额外信息
▼
事件处理
vue
<template>
<Collapse
title="事件处理示例"
@change="handleCollapseChange"
@title-click="handleTitleClick"
>
<p>点击标题或切换状态时会触发相应事件</p>
</Collapse>
</template>
<script setup>
const handleCollapseChange = (isOpen) => {
console.log('面板状态改变:', isOpen)
}
const handleTitleClick = (event) => {
console.log('标题被点击:', event)
}
</script>方法调用
vue
<template>
<div>
<div style="margin-bottom: 16px;">
<button @click="togglePanel">切换面板</button>
<button @click="openPanel">展开面板</button>
<button @click="closePanel">收起面板</button>
</div>
<Collapse ref="collapseRef" title="可控制的面板">
<p>通过方法控制的面板</p>
</Collapse>
</div>
</template>
<script setup>
import { ref } from 'vue'
const collapseRef = ref()
const togglePanel = () => {
collapseRef.value?.toggle()
}
const openPanel = () => {
collapseRef.value?.open()
}
const closePanel = () => {
collapseRef.value?.close()
}
</script>API
Collapse Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题文本 | string | - |
| defaultOpen | 是否默认展开 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| badge | 自定义徽章文本 | string | - |
| badgeColor | 自定义徽章颜色 | string | - |
| bordered | 是否显示边框 | boolean | true |
| shadow | 是否显示阴影 | boolean | true |
| marginBottom | 底部外边距 | number | string | 0 |
Collapse Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 展开/收起状态改变时触发 | (isOpen: boolean) |
| title-click | 点击标题时触发 | (event: MouseEvent) |
Collapse Slots
| 插槽名 | 说明 |
|---|---|
| default | 面板内容 |
| title | 自定义标题 |
| badge | 自定义徽章 |
| extra | 标题右侧额外内容 |
| toggle-icon | 自定义切换图标 |
Collapse Methods
| 方法名 | 说明 | 参数 |
|---|---|---|
| toggle | 切换展开/收起状态 | - |
| open | 展开面板 | - |
| close | 收起面板 | - |
| isOpen | 获取当前展开状态 | - |