Collapse 折叠面板

通过折叠面板收纳内容区域

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。

Title A

headline title

this is content a aaa

Title B

this is bbbbb test

Disabled Title

this is cccc test

<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

this is bbbbb test

Title C

this is cccc test

<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