Collapse 折叠面板

折叠面板用于对内容区域的收纳与展开，可以实现手风琴效果，也可以同时展开多个面板。

基础用法

折叠面板默认可以同时展开多个面板，彼此之间互不影响。

Title A

This is content for section A.

Title B

This is content for section B.

Disabled Title

This section is disabled.

<script setup>
import { ref } from 'vue'
const openedValue = ref(['a'])
</script>

<template>
  <div class="basic block">
    <l-collapse v-model="openedValue">
      <l-collapse-item name="a" title="Title A">
        <div>This is content for section A.</div>
      </l-collapse-item>
      <l-collapse-item name="b" title="Title B">
        <div>This is content for section B.</div>
      </l-collapse-item>
      <l-collapse-item name="c" title="Disabled Title" disabled>
        <div>This section is disabled.</div>
      </l-collapse-item>
    </l-collapse>
  </div>
</template>

手风琴模式

通过设置 accordion 属性为 true，可以将折叠面板设置为手风琴模式，此时每次只能展开一个面板。

Title A

This is content for section A.

Title B

This is content for section B.

Title C

This is content for section C.

<script setup>
import { ref } from 'vue'
const openedValue = ref('a')
</script>

<template>
  <div class="basic block">
    <l-collapse v-model="openedValue" accordion>
      <l-collapse-item name="a" title="Title A">
        <div>This is content for section A.</div>
      </l-collapse-item>
      <l-collapse-item name="b" title="Title B">
        <div>This is content for section B.</div>
      </l-collapse-item>
      <l-collapse-item name="c" title="Title C">
        <div>This is content for section C.</div>
      </l-collapse-item>
    </l-collapse>
  </div>
</template>

Collapse 属性

属性	说明	类型	可选值	默认值
model-value / v-model	当前激活的面板	string（手风琴模式）/ array（非手风琴模式）	—	—
accordion	是否启用手风琴模式	boolean	—	false

Collapse 事件

事件名	说明	回调参数
change	激活面板发生变化时触发	(activeNames: array（非手风琴模式）/ string（手风琴模式）)

Collapse 插槽

名称	说明	子标签
—	自定义默认内容	Collapse Item

Collapse Item 属性

属性	说明	类型	可选值	默认值
name	面板的唯一标识	string/number	—	—
title	面板的标题	string	—	—
disabled	是否禁用该面板	boolean	—	—

Collapse Item 插槽

名称	说明
—	折叠面板内容
title	折叠面板标题内容