Collapse 折叠面板
通过折叠面板收纳内容区域
基础用法
可同时展开多个面板,面板之间不影响
Title A
headline title
this is content a aaa
Title B
Disabled Title
<script setup>
import { ref } from 'vue'
import Collapse from '@com/Collapse/Collapse.vue'
import Item from '@com/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 '@com/Collapse/Collapse.vue'
import Item from '@com/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>
APIs
Collapse 属性
名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
model-value / v-model | 当前活动面板,在手风琴模式下其类型是string ,在其他模式下是array | string | array | [] |
accordion | 是否手风琴模式 | boolean | boolean |
Collapse 事件
名称 | 描述 | 类型 |
---|---|---|
change | 切换当前活动面板,在手风琴模式下其类型是string ,在其他模式下是array | (activeNames: array | string) => void |
Collapse 插槽
名称 | 描述 | 子标签 |
---|---|---|
default | 自定义默认内容 | Collapse Item |
Collapse Item属性
名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
name | 唯一标志符 | string | number | -- |
title | 面板标题 | string | '' |
disabled | 是否禁用 | boolean | false |
Collapse Item插槽
名称 | 描述 |
---|---|
default | Collapse Item 的内容 |
title | Collapse Item 的标题 |