Collapse 折叠面板

用于折叠 / 展开内容区域的折叠面板组件。

基本用法

使用 collapse 包裹菜单的每一项 collapse-item：

无默认值

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

有默认值（非受控）

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

有固定值（受控）

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

一般用法

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

v-model 用法

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

<template>
  <h4>无默认值</h4>
  <i-collapse>
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>

  <h4>有默认值（非受控）</h4>
  <i-collapse :defaultActive="value">
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>

  <h4>有固定值（受控）</h4>
  <i-collapse :modelValue="value">
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>

  <h4>一般用法</h4>
  <i-collapse :modelValue="value" @change="handleChange">
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>

  <h4>v-model 用法</h4>
  <i-collapse v-model="value">
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>
</template>

<script setup>
import { ref } from 'vue'
const value = ref([1])

const handleChange = (val) => {
  console.log(val)
  value.value = val
}
</script>

显示代码复制代码复制代码

禁用状态

可通过 disabled 属性控制全局禁用或单项禁用：

全局禁用

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

单项禁用

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

<template>
  <h4>全局禁用</h4>
  <i-collapse disabled>
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>
  <h4>单项禁用</h4>
  <i-collapse>
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2" disabled>
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>
</template>

显示代码复制代码复制代码

手风琴模式

可通过 accordion 属性控制为手风琴模式：

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

<template>
  <i-collapse accordion>
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>
</template>

显示代码复制代码复制代码

默认展开全部

可通过 expandAll 属性控制默认展开所有折叠项：

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

<template>
  <i-collapse expandAll>
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>
</template>

显示代码复制代码复制代码

自定义图标位置

可通过 iconPlacement 属性控制展开图标位置：

全局置左

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

全局置右

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

单项置右

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

<template>
  <h4>全局置左</h4>
  <i-collapse iconPlacement="left">
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>

  <h4>全局置右</h4>
  <i-collapse iconPlacement="right">
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>

  <h4>单项置右</h4>
  <i-collapse>
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2" iconPlacement="right">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>
</template>

显示代码复制代码复制代码

隐藏所有边框

可通过 hideBorder 属性隐藏所有边框：

折叠标题1

折叠内容 1111111111111111111111

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

<template>
  <i-collapse hideBorder>
    <i-collapse-item title="折叠标题1">
      折叠内容 1111111111111111111111
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>
</template>

显示代码复制代码复制代码

嵌套折叠面板

可在 collapse-item 中多层嵌套 collapse 折叠面板：

折叠标题1

折叠标题A

折叠内容 AAAAAAAAAAAAAAAAAAAAAA

折叠标题B

折叠内容 BBBBBBBBBBBBBBBBBBBBBB

折叠标题C

折叠内容 CCCCCCCCCCCCCCCCCCCCCC

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

<template>
  <i-collapse>
    <i-collapse-item title="折叠标题1">
      <i-collapse hideBorder>
        <i-collapse-item title="折叠标题A">
          折叠内容 AAAAAAAAAAAAAAAAAAAAAA
        </i-collapse-item>
        <i-collapse-item title="折叠标题B">
          折叠内容 BBBBBBBBBBBBBBBBBBBBBB
        </i-collapse-item>
        <i-collapse-item title="折叠标题C">
          折叠内容 CCCCCCCCCCCCCCCCCCCCCC
        </i-collapse-item>
      </i-collapse>
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>
</template>

显示代码复制代码复制代码

无缩进模式

可通过 noIndent 属性隐藏所有边框：

折叠标题1

折叠标题A

折叠内容 AAAAAAAAAAAAAAAAAAAAAA

折叠标题B

折叠内容 BBBBBBBBBBBBBBBBBBBBBB

折叠标题C

折叠内容 CCCCCCCCCCCCCCCCCCCCCC

折叠标题2

折叠内容 2222222222222222222222

折叠标题3

折叠内容 3333333333333333333333

<template>
  <i-collapse noIndent>
    <i-collapse-item title="折叠标题1">
      <i-collapse hideBorder>
        <i-collapse-item title="折叠标题A">
          折叠内容 AAAAAAAAAAAAAAAAAAAAAA
        </i-collapse-item>
        <i-collapse-item title="折叠标题B">
          折叠内容 BBBBBBBBBBBBBBBBBBBBBB
        </i-collapse-item>
        <i-collapse-item title="折叠标题C">
          折叠内容 CCCCCCCCCCCCCCCCCCCCCC
        </i-collapse-item>
      </i-collapse>
    </i-collapse-item>
    <i-collapse-item title="折叠标题2">
      折叠内容 2222222222222222222222
    </i-collapse-item>
    <i-collapse-item title="折叠标题3">
      折叠内容 3333333333333333333333
    </i-collapse-item>
  </i-collapse>
</template>

显示代码复制代码复制代码

Collapse Attributes

属性	说明	类型	默认值
modelValue / v-model	固定展开项（受控）	Array<string〡number>	--
defaultActive	默认展开项（非受控）	Array<string〡number>	--
accordion	是否为手风琴模式	boolean	false
disabled	全局禁用折叠项	boolean	false
expandAll	默认全部展开	boolean	false
iconPlacement	自定义图标位置	"left"〡"right"	left
hideBorder	是否隐藏边框	boolean	false
noIndent	无缩进模式	boolean	false

Collapse Slots

属性	说明	类型	默认值
change	切换面板时触发，返回变化的值	(value: Array<string〡number>) => void	--

CollapseItem Attributes

属性	说明	类型	默认值
title	折叠项标题	ReactNode	--
value	折叠项唯一标识	string〡number	--
disabled	禁用单折叠项	boolean	false
iconPlacement	自定义图标位置	'left'〡'right'	left