Collapse 折叠面板

基于 Element Plus Collapse 增强的折叠面板组件。

使用折叠面板收纳内容区域。

基本用法

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

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

vue

<template>
  <div class="demo-collapse">
    <bk-collapse v-model="activeNames" @change="handleChange">
      <bk-collapse-item title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real life, and comply
          with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such as: design style,
          icons and texts, position of elements, etc.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their operations by style updates
          and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging elements of the page.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Efficiency" name="3">
        <div>Simplify the process: keep operating process simple and intuitive;</div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the users can quickly
          understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps the users to
          identify and frees them from memorizing and recalling.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advice about operations is acceptable, but do not make decisions
          for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to operate, including
          canceling, aborting or terminating current operation.
        </div>
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

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

import type { CollapseModelValue } from "vue-business-kit"

const activeNames = ref(["1"])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
</script>

手风琴模式

在手风琴模式下，每次只能展开一个面板

通过设置 accordion 属性来激活手风琴模式。

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

自定义标题

除了使用 title 属性外，还可以通过具名插槽自定义面板标题，实现添加图标等自定义内容的需求。

TIP

title 插槽提供了 isActive 属性，用于标识当前折叠项是否处于激活状态。

vue

<template>
  <div class="demo-collapse">
    <bk-collapse accordion>
      <bk-collapse-item name="1">
        <template #title="{ isActive }">
          <div :class="['title-wrapper', { 'is-active': isActive }]">
            Consistency
            <bk-icon class="header-icon" icon="tabler:info-circle-filled"> </bk-icon>
          </div>
        </template>
        <div>
          Consistent with real life: in line with the process and logic of real life, and comply
          with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such as: design style,
          icons and texts, position of elements, etc.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their operations by style updates
          and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging elements of the page.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Efficiency" name="3">
        <div>Simplify the process: keep operating process simple and intuitive;</div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the users can quickly
          understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps the users to
          identify and frees them from memorizing and recalling.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do not make decisions
          for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to operate, including
          canceling, aborting or terminating current operation.
        </div>
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.title-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.title-wrapper.is-active {
  color: var(--el-color-primary);
}
</style>

自定义图标

除了使用 icon 属性外，还可以通过具名插槽自定义面板项的图标，支持添加个性化内容。

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

vue

<template>
  <div class="demo-collapse">
    <bk-collapse v-model="activeNames" @change="handleChange">
      <bk-collapse-item title="Consistency" name="1" icon="tabler:folder-open">
        <div>
          Consistent with real life: in line with the process and logic of real life, and comply
          with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such as: design style,
          icons and texts, position of elements, etc.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Feedback" name="2">
        <template #icon="{ isActive }">
          <span class="icon-ele">
            {{ isActive ? "Expanded" : "Collapsed" }}
          </span>
        </template>
        <div>
          Operation feedback: enable the users to clearly perceive their operations by style updates
          and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging elements of the page.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Efficiency" name="3">
        <div>Simplify the process: keep operating process simple and intuitive;</div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the users can quickly
          understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps the users to
          identify and frees them from memorizing and recalling.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do not make decisions
          for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to operate, including
          canceling, aborting or terminating current operation.
        </div>
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { type CollapseModelValue } from "vue-business-kit"

const activeNames = ref(["1"])
const handleChange = (val: CollapseModelValue) => {
  console.log(val)
}
</script>

<style scoped>
.icon-ele {
  margin: 0 8px 0 auto;
  color: #409eff;
}
</style>

自定义图标位置

通过 expand-icon-position 属性，可以自定义展开图标的位置。

expand icon position:

left

阻止折叠

设置 before-collapse 属性，若返回 false 或返回 Promise 且被 reject，则会阻止面板折叠/展开。

before collapse return:

true

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

vue

<template>
  <div v-loading="loading" class="demo-collapse">
    <div class="flex items-center mb-4">
      <span class="mr-4">before collapse return: </span>
      <el-switch
        v-model="before"
        :inactive-value="false"
        :active-value="true"
        inactive-text="false"
        active-text="true"
      />
    </div>

    <bk-collapse v-model="activeNames" :before-collapse="beforeCollapse">
      <bk-collapse-item title="Consistency" name="1">
        <div>
          Consistent with real life: in line with the process and logic of real life, and comply
          with languages and habits that the users are used to;
        </div>
        <div>
          Consistent within interface: all elements should be consistent, such as: design style,
          icons and texts, position of elements, etc.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Feedback" name="2">
        <div>
          Operation feedback: enable the users to clearly perceive their operations by style updates
          and interactive effects;
        </div>
        <div>
          Visual feedback: reflect current state by updating or rearranging elements of the page.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Efficiency" name="3">
        <div>Simplify the process: keep operating process simple and intuitive;</div>
        <div>
          Definite and clear: enunciate your intentions clearly so that the users can quickly
          understand and make decisions;
        </div>
        <div>
          Easy to identify: the interface should be straightforward, which helps the users to
          identify and frees them from memorizing and recalling.
        </div>
      </bk-collapse-item>
      <bk-collapse-item title="Controllability" name="4">
        <div>
          Decision making: giving advices about operations is acceptable, but do not make decisions
          for the users;
        </div>
        <div>
          Controlled consequences: users should be granted the freedom to operate, including
          canceling, aborting or terminating current operation.
        </div>
      </bk-collapse-item>
    </bk-collapse>
  </div>
</template>

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

const before = ref(true)
const activeNames = ref(["1"])
const loading = ref(false)

const beforeCollapse = (): Promise<boolean> => {
  loading.value = true
  return new Promise((resolve) => {
    setTimeout(() => {
      loading.value = false
      return resolve(before.value)
    }, 1000)
  })
}
</script>

工具栏

自定义折叠项的工具栏内容。

使用 show-export 属性展示内置操作按钮，或通过 toolbar 插槽完全自定义工具栏内容。

Collapse API

Collapse 属性

Element Plus Collapse 原生属性

属性名	说明	类型	默认值
model-value / v-model	当前激活的面板名称，手风琴模式下类型为 `string`，否则为 `array`	`string` / `array`	[]
accordion	是否开启手风琴模式，开启后每次只能展开一个面板	`boolean`	false
expand-icon-position	设置展开图标的位置	`enum`	right
before-collapse	折叠状态改变前的钩子函数。若返回 `false` 或返回 Promise 且被 reject，将阻止折叠状态变更	`Function`	—

Collapse 事件

Element Plus Collapse 原生事件

事件名	说明	类型
change	激活面板改变时触发，手风琴模式下参数类型为 `string`，否则为 `array`	`Function`

Collapse 插槽

Element Plus Collapse 原生插槽

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

Collapse Exposes

Element Plus Collapse Exposes

名称	说明	类型
activeNames	当前激活的面板名称	`object`
setActiveNames	设置激活的面板名称	`Function`

CollapseItems API

CollapseItems 属性

属性名	说明	类型	默认值
title extended	面板标题	`string`	''
subtitle	面板副标题	`string`	''
icon extended	折叠项的图标	`string` / `Component`	ArrowRight
showExport	是否显示导出按钮，若 `onExport` 为空，将默认获取子组件 `bk-table` 的导出功能	`boolean`	false
onExport	导出事件回调	`Function`	—

Element Plus CollapseItems 原生属性

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

CollapseItems 插槽

插槽名	说明	类型
title extended	折叠面板项标题内容	`object`
icon extended	折叠面板项图标内容	`object`
toolbar	折叠面板项工具栏内容	—

Element Plus CollapseItems 原生插槽

插槽名	说明	类型
default	折叠面板项内容	—

CollapseItems Exposes

Element Plus CollapseItems Exposes

名称	说明	类型
isActive	当前折叠项是否处于激活态	`object`

Collapse 折叠面板 ​

基本用法 ​

手风琴模式 ​

自定义标题 ​

自定义图标 ​

自定义图标位置 ​

阻止折叠 ​

工具栏 ​

Collapse API ​

Collapse 属性 ​

Collapse 事件 ​

Collapse 插槽 ​

Collapse Exposes ​

CollapseItems API ​

CollapseItems 属性 ​

CollapseItems 插槽 ​

CollapseItems Exposes ​

Collapse 折叠面板

基本用法

手风琴模式

自定义标题

自定义图标

自定义图标位置

阻止折叠

工具栏

Collapse API

Collapse 属性

Collapse 事件

Collapse 插槽

Collapse Exposes

CollapseItems API

CollapseItems 属性

CollapseItems 插槽

CollapseItems Exposes