Collapse 折叠面板
通过折叠面板收纳内容区域
基础用法
可同时展开多个面板，面板之间不影响
Title A
headline title
this is content a aaa
Title B
Disabled Title
<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import Item from '@/components/Collapse/CollapseItem.vue'
const openedValue = ref(['a'])
</script>
<template>
<div class="basic block">
<Collapse v-model="openedValue">
<Item name="a" title="Title A">
<h1>headline title</h1>
<div> this is content a aaa </div>
</Item>
<Item name="b" title="Title B">
<div> this is bbbbb test </div>
</Item>
<Item name="c" title="Disabled Title" disabled>
<div> this is cccc test </div>
</Item>
</Collapse>
</div>
</template>手风琴效果
每次只能展开一个面板
通过 accordion 属性来设置是否以手风琴模式显示。
Title A
headline title
this is content a aaa
Title B
Title C
<script setup>
import { ref } from 'vue'
import Collapse from '@/components/Collapse/Collapse.vue'
import Item from '@/components/Collapse/CollapseItem.vue'
const openedValue = ref('a')
</script>
<template>
<div class="basic block">
<Collapse v-model="openedValue" accordion>
<Item name="a" title="Title A">
<h1>headline title</h1>
<div> this is content a aaa </div>
</Item>
<Item name="b" title="Title B">
<div> this is bbbbb test </div>
</Item>
<Item name="c" title="Title C">
<div> this is cccc test </div>
</Item>
</Collapse>
</div>
</template>Collapse Attributes
| Name | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model-value / v-model | currently active panel | string (accordion mode) / array (non-accordion mode) | — | — |
| accordion | whether to activate accordion mode | boolean | — | false |
Collapse Events
| Name | Description | Parameters |
|---|---|---|
| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
Collapse Slots
| Name | Description | Subtags |
|---|---|---|
| - | customize default content | Collapse Item |
Collapse Item Attributes
| Name | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| name | unique identification of the panel | string/number | — | — |
| title | title of the panel | string | — | — |
| disabled | disable the collapse item | boolean | — | — |
Collapse Item Slot
| Name | Description |
|---|---|
| — | content of Collapse Item |
| title | content of Collapse Item title |