Collapse 折叠面板

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

基础用法

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

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

春晓

春眠不觉晓，处处闻啼鸟。

夜来风雨声，花落知多少。

登鹳雀楼

黄河入海流

欲穷千里目

更上一层楼

<script lang="ts" setup>
import { ref } from 'vue'
import SiCollapse from '@/components/Collapse/Collapse.vue'
import SiCollapseItem from '@/components/Collapse/CollapseItem.vue'
import type { NameType } from '@/components/Collapse/types.ts'

const openValue = ref(['1'])
function handleChange(val: NameType) {
  console.log(val)
}
</script>

<template>
  <SiCollapse
    v-model="openValue"
    class="si-collapse"
    @change="handleChange"
  >
    <SiCollapseItem title="静夜思" name="1">
      <div>
        床前明月光，疑是地上霜。
      </div>
      <div>
        举头望明月，低头思故乡。
      </div>
    </SiCollapseItem>
    <SiCollapseItem title="春晓" name="2">
      <div>
        春眠不觉晓，处处闻啼鸟。
      </div>
      <div>
        夜来风雨声，花落知多少。
      </div>
    </SiCollapseItem>
    <SiCollapseItem title="登鹳雀楼" name="3">
      <div>
        黄河入海流
      </div>
      <div>
        欲穷千里目
      </div>
      <div>
        更上一层楼
      </div>
    </SiCollapseItem>
  </SiCollapse>
</template>

<style>

</style>

手风琴效果

每次只能展开一个面板

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

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

春晓

春眠不觉晓，处处闻啼鸟。

夜来风雨声，花落知多少。

登鹳雀楼

黄河入海流

欲穷千里目

更上一层楼

<script lang="ts" setup>
import { ref } from 'vue'
import SiCollapse from '@/components/Collapse/Collapse.vue'
import SiCollapseItem from '@/components/Collapse/CollapseItem.vue'

const openValue = ref(['1'])
</script>

<template>
  <SiCollapse
    v-model="openValue"
    accordion
  >
    <SiCollapseItem title="静夜思" name="1">
      <div>
        床前明月光，疑是地上霜。
      </div>
      <div>
        举头望明月，低头思故乡。
      </div>
    </SiCollapseItem>
    <SiCollapseItem title="春晓" name="2">
      <div>
        春眠不觉晓，处处闻啼鸟。
      </div>
      <div>
        夜来风雨声，花落知多少。
      </div>
    </SiCollapseItem>
    <SiCollapseItem title="登鹳雀楼" name="3">
      <div>
        黄河入海流
      </div>
      <div>
        欲穷千里目
      </div>
      <div>
        更上一层楼
      </div>
    </SiCollapseItem>
  </SiCollapse>
</template>

自定义面板标题

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

静夜思

床前明月光，疑是地上霜。

举头望明月，低头思故乡。

春晓

春眠不觉晓，处处闻啼鸟。

夜来风雨声，花落知多少。

登鹳雀楼

黄河入海流

欲穷千里目

更上一层楼

<script lang="ts" setup>
import { ref } from 'vue'
import SiCollapse from '@/components/Collapse/Collapse.vue'
import SiCollapseItem from '@/components/Collapse/CollapseItem.vue'
import Icon from '@/components/Icon/Icon.vue'
import type { NameType } from '@/components/Collapse/types.ts'

const openValue = ref(['1'])
function handleChange(val: NameType) {
  console.log(val)
}
</script>

<template>
  <SiCollapse
    v-model="openValue"
    accordion
    @change="handleChange"
  >
    <SiCollapseItem name="1">
      <template #title>
        <div>
          静夜思<Icon icon="fa-house" class="header-icon" />
        </div>
      </template>
      <div>
        床前明月光，疑是地上霜。
      </div>
      <div>
        举头望明月，低头思故乡。
      </div>
    </SiCollapseItem>
    <SiCollapseItem title="春晓" name="2">
      <div>
        春眠不觉晓，处处闻啼鸟。
      </div>
      <div>
        夜来风雨声，花落知多少。
      </div>
    </SiCollapseItem>
    <SiCollapseItem title="登鹳雀楼" name="3">
      <div>
        黄河入海流
      </div>
      <div>
        欲穷千里目
      </div>
      <div>
        更上一层楼
      </div>
    </SiCollapseItem>
  </SiCollapse>
</template>

<style>
.header-icon {
  margin-left: 5px;
}
</style>

Collapse API

Collapse Attributes

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

Collapse Events

事件名	说明	类型
change	切换当前活动面板，类型是array	Function

Collapse Slots

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

Collapse Item API

Collapse Item Attributes

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

Collapse Item Slot

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