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 属性
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 事件
Name | Description | Parameters |
---|---|---|
change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
Collapse 插槽
Name | Description | Subtags |
---|---|---|
- | customize default content | Collapse Item |
Collapse Item 属性
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 插槽
Name | Description |
---|---|
— | content of Collapse Item |
title | content of Collapse Item title |