Collapse 折叠面板

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

导入

import Collapse from '@/components/display/Collapse.vue';
import CollapseItem from '@/components/display/CollapseItem.vue';
import CollapseBox from '@/components/display/CollapseBox.vue';

使用方法

基础用法

vue

<template>
  <Collapse v-model="activeNames">
    <CollapseItem title="标题1" name="1">
      <FlexCol :padding="20" background-color="white">
        代码是写出来给人看的，附带能在机器上运行。
      </FlexCol>
    </CollapseItem>
    <CollapseItem title="标题2" name="2">
      <FlexCol :padding="20" background-color="white">
        技术无非就是那些开发它的人的共同灵魂。
      </FlexCol>
    </CollapseItem>
    <CollapseItem title="标题3" name="3">
      <FlexCol :padding="20" background-color="white">
        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </FlexCol>
    </CollapseItem>
  </Collapse>
</template>

<script setup>
import { ref } from 'vue';
import Collapse from '@/components/display/Collapse.vue';
import CollapseItem from '@/components/display/CollapseItem.vue';
import FlexCol from '@/components/layout/FlexCol.vue';

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

手风琴模式

手风琴模式同时只有一个面板展开。

vue

<template>
  <Collapse v-model="activeNames2" accordion>
    <CollapseItem title="标题1" name="1">
      <FlexCol :padding="20" background-color="white">
        代码是写出来给人看的，附带能在机器上运行。
      </FlexCol>
    </CollapseItem>
    <CollapseItem title="标题2" name="2">
      <FlexCol :padding="20" background-color="white">
        技术无非就是那些开发它的人的共同灵魂。
      </FlexCol>
    </CollapseItem>
    <CollapseItem title="标题3" name="3">
      <FlexCol :padding="20" background-color="white">
        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </FlexCol>
    </CollapseItem>
  </Collapse>
</template>

<script setup>
import { ref } from 'vue';
import Collapse from '@/components/display/Collapse.vue';
import CollapseItem from '@/components/display/CollapseItem.vue';
import FlexCol from '@/components/layout/FlexCol.vue';

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

禁用条目

vue

<template>
  <Collapse v-model="activeNames3">
    <CollapseItem title="标题1" name="1">
      <FlexCol :padding="20" background-color="white">
        代码是写出来给人看的，附带能在机器上运行。
      </FlexCol>
    </CollapseItem>
    <CollapseItem title="标题2" name="2" disabled>
      <FlexCol :padding="20" background-color="white">
        技术无非就是那些开发它的人的共同灵魂。
      </FlexCol>
    </CollapseItem>
    <CollapseItem title="标题3" name="3">
      <FlexCol :padding="20" background-color="white">
        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </FlexCol>
    </CollapseItem>
  </Collapse>
</template>

<script setup>
import { ref } from 'vue';
import Collapse from '@/components/display/Collapse.vue';
import CollapseItem from '@/components/display/CollapseItem.vue';
import FlexCol from '@/components/layout/FlexCol.vue';

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

自定义标题内容

标题基于 Cell ，同样支持设置文字图标等。

vue

<template>
  <Collapse v-model="activeNames4">
    <CollapseItem name="1">
      <template #title>
        <FlexRow align="center">标题1 <Icon icon="prompt" color="primary" /></FlexRow>
      </template>
      <FlexCol :padding="20" background-color="white">
        代码是写出来给人看的，附带能在机器上运行。
      </FlexCol>
    </CollapseItem>
    <CollapseItem title="标题2" name="2" icon="favorite" value="内容">
      <FlexCol :padding="20" background-color="white">
        技术无非就是那些开发它的人的共同灵魂。
      </FlexCol>
    </CollapseItem>
  </Collapse>
</template>

<script setup>
import { ref } from 'vue';
import Collapse from '@/components/display/Collapse.vue';
import CollapseItem from '@/components/display/CollapseItem.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Icon from '@/components/basic/Icon.vue';

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

展开折叠切换实例方法

可调用实例上的方法切换展开与折叠。

vue

<template>
  <Collapse v-model="activeNames5" ref="collapseRef">
    <CollapseItem title="标题1" name="1">
      <FlexCol :padding="20" background-color="white">
        代码是写出来给人看的，附带能在机器上运行。
      </FlexCol>
    </CollapseItem>
    <CollapseItem title="标题2" name="2">
      <FlexCol :padding="20" background-color="white">
        技术无非就是那些开发它的人的共同灵魂。
      </FlexCol>
    </CollapseItem>
    <CollapseItem title="标题3" name="3">
      <FlexCol :padding="20" background-color="white">
        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </FlexCol>
    </CollapseItem>
  </Collapse>
  <FlexRow align="center" :gap="20" :padding="20">
    <Button type="primary" shape="round" @click="collapseRef?.open()">展开所有</Button>
    <Button type="primary" shape="round" @click="collapseRef?.close()">折叠所有</Button>
    <Button type="primary" shape="round" @click="collapseRef?.toggle()">切换所有</Button>
  </FlexRow>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Collapse, { type CollapseInstance } from '@/components/display/Collapse.vue';
import CollapseItem from '@/components/display/CollapseItem.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Button from '@/components/basic/Button.vue';

const activeNames5 = ref(['']);
const collapseRef = ref<CollapseInstance>();
</script>

展开折叠组件

纯展开折叠基础组件，可以用于自定义组件和内容的展开和折叠。点击展开按钮展开内容。

vue

<template>
  <CollapseBox :open="boxOpen">
    <FlexCol :padding="20" background-color="white">
      不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。
    </FlexCol>
  </CollapseBox>
  <FlexRow align="center" :gap="20" :padding="20">
    <Button type="primary" shape="round" @click="boxOpen = true">展开</Button>
    <Button type="primary" shape="round" @click="boxOpen = false">折叠</Button>
  </FlexRow>
</template>

<script setup>
import { ref } from 'vue';
import CollapseBox from '@/components/display/CollapseBox.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Button from '@/components/basic/Button.vue';

const boxOpen = ref(false);
</script>

API 参考

Props

Collapse Props

名称	说明	类型	必填	默认值
modelValue	当前展开面板的 name	`(number \| string)[]`	是	-
accordion	是否开启手风琴模式	`boolean`	否	`false`
animDuration	动画时长(ms)，为0时禁用动画	`number`	否	`300`

CollapseItem Props

名称	说明	类型	必填	默认值
name	当前面板的唯一标识符，默认为索引值	`number \| string`	否	-
icon	标题栏左侧图标名称或图片链接，等同于 Icon 组件的 icon 属性	`string`	否	-
size	标题栏大小，可选值为 large	`'medium' \| 'large'`	否	`'medium'`
title	标题栏左侧内容	`string`	否	-
value	标题栏右侧内容	`string`	否	-
label	标题栏描述信息	`string`	否	-
border	是否显示内边框	`boolean`	否	-
disabled	是否禁用面板	`boolean`	否	-

CollapseBox Props

名称	说明	类型	必填	默认值
open	是否展开	`boolean`	是	-
animDuration	动画时长(ms)，为0时禁用动画	`number`	否	`300`

Slots

Collapse

名称	说明
default	用于放置 CollapseItem 组件

CollapseItem

名称	说明
default	面板内容
title	自定义标题内容
value	自定义右侧内容
label	自定义描述信息
icon	自定义左侧图标
cell	自定义整个标题栏，传入参数包括 state, title, value, label, size, icon

CollapseBox

名称	说明
default	折叠内容

Events

Collapse

名称	说明	参数
update:modelValue	当前展开面板的 name 变化时触发	`(number \| string)[]`

Methods

CollapseInstance

方法名	说明	参数
open	展开指定面板	`name?: number \| string` 面板的 name，为空时表示所有面板
close	关闭指定面板	`name?: number \| string` 面板的 name，为空时表示所有面板
toggle	切换指定面板打开状态	`name?: number \| string` 面板的 name，为空时表示所有面板

主题变量

该组件未定义特定的主题变量。

CollapseItem 基于 Cell 组件，因此可以使用 Cell 组件的主题变量。

Collapse 折叠面板 ​

导入 ​

使用方法 ​

基础用法 ​

手风琴模式 ​

禁用条目 ​

自定义标题内容 ​

展开折叠切换实例方法 ​

展开折叠组件 ​

API 参考 ​

Props ​

Collapse Props ​

CollapseItem Props ​

CollapseBox Props ​

Slots ​

Collapse ​

CollapseItem ​

CollapseBox ​

Events ​

Collapse ​

Methods ​

CollapseInstance ​

主题变量 ​

Collapse 折叠面板

导入

使用方法

基础用法

手风琴模式

禁用条目

自定义标题内容

展开折叠切换实例方法

展开折叠组件

API 参考

Props

Collapse Props

CollapseItem Props

CollapseBox Props

Slots

Collapse

CollapseItem

CollapseBox

Events

Collapse

Methods

CollapseInstance

主题变量