Collapse 折叠面板

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

基础用法

可同时展开多个面板，面板之间不影响

first item a

第一个内容

second item b

第二个内容

third item c

第三个内容

<template>
  <ez-collapse v-model="opens">
    <ez-collapse-item name="a" title="first item a"> 第一个内容</ez-collapse-item>
    <ez-collapse-item name="b" title="second item b"> 第二个内容</ez-collapse-item>
    <ez-collapse-item name="c" title="third item c"> 第三个内容 </ez-collapse-item>
  </ez-collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const opens = ref(['a', 'b']);
</script>

手风琴效果

每次只能展开一个面板

通过 accordion 属性来设置是否以手风琴模式显示。

first item a

第一个内容

second item b

第二个内容

third item c

第三个内容

<template>
  <ez-collapse v-model="opens" accordion>
    <ez-collapse-item name="a" title="first item a"> 第一个内容</ez-collapse-item>
    <ez-collapse-item name="b" title="second item b"> 第二个内容</ez-collapse-item>
    <ez-collapse-item name="c" title="third item c"> 第三个内容 </ez-collapse-item>
  </ez-collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const opens = ref(['a']);
</script>

自定义面板标题

除了可以通过 title 属性以外，还可以通过具名 slot 来实现自定义面板的标题内容，以实现增加图标等效果。

slot title

第一个内容

slot title add icon

第二个内容

this is c, have been disabled

第三个内容

<template>
  <ez-collapse v-model="opens" accordion>
    <ez-collapse-item name="a">
      <template #title>
        <div>slot title</div>
      </template>
      <div>第一个内容</div>
    </ez-collapse-item>
    <ez-collapse-item name="b" title="second item b">
      <template #title>
        <div>
          <span>slot title add icon</span>
          <ez-icon icon="circle-info" />
        </div>
      </template>
      <div>第二个内容</div>
    </ez-collapse-item>
    <ez-collapse-item name="c" disabled>
      <template #title>
        <div>this is c, have been disabled</div>
      </template>
      <div>第三个内容</div>
    </ez-collapse-item>
  </ez-collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const opens = ref(['a']);
</script>

Collapse API

Collapse Attributes

属性名	详情	类型	默认值
model-value / v-model	当前活动面板，在手风琴模式下其类型是string，在其他模式下是array	string/array	[]
accordion	是否手风琴模式	boolean	boolean

Collapse Slots

插槽名	Description	子标签
default	自定义默认内容	Collapse Item

Collapse Item API

Collapse Item Attributes

属性名	说明	类型	默认值
name	唯一标志符	string /number	—
title	面板标题	string	''
disabled	是否禁用	boolean	false

Collapse Item Slot

插槽名	说明
default	Collapse Item 的内容
title	Collapse Item 的标题