Collapse 折叠面板

介绍

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

基础用法

通过 v-model 属性设置索引数组来控制面板子级的展开，该值不完全受控，可通过 beforeToggle 取得实际控制。

<vd-collapse v-model="collapse">
  <vd-collapse-item title="标题1">内容1</vd-collapse-item>
  <vd-collapse-item title="标题2">内容2</vd-collapse-item>
  <vd-collapse-item title="标题3">内容3</vd-collapse-item>
</vd-collapse>

const collapse = ref([0]);

设置名称

通过 name 属性设置名称，设置后以名称代替索引值。

<vd-collapse v-model="collapse">
  <vd-collapse-item name="1" title="标题1">内容1</vd-collapse-item>
  <vd-collapse-item name="2" title="标题2">内容2</vd-collapse-item>
  <vd-collapse-item name="3" title="标题3">内容3</vd-collapse-item>
</vd-collapse>

const collapse = ref(['1']);

手风琴模式

通过 accordion 属性设置手风琴模式，该模式下，每次只能展开一个面板。

<vd-collaps v-model="collapse" accordion>
  <vd-collapse-item name="1" title="标题1">内容1</vd-collapse-item>
  <vd-collapse-item name="2" title="标题2">内容2</vd-collapse-item>
  <vd-collapse-item name="3" title="标题3">内容3</vd-collapse-item>
</vd-collapse>

const collapse = ref('1');

异步切换

通过 before-toggle 属性设置切换前的回调函数，函数返回 false 可以取消切换。

<vd-collaps v-model="collapse" :before-toggle="beforeToggle">
  <vd-collapse-item name="1" title="展开时请求">模拟500ms请求</vd-collapse-item>
  <vd-collapse-item name="2" title="折叠时请求">模拟1000ms请求</vd-collapse-item>
  <vd-collapse-item name="3" title="展开、折叠时请求">模拟1500ms请求</vd-collapse-item>
  <vd-collapse-item name="4" title="阻止折叠">只可展开，不可折叠</vd-collapse-item>
</vd-collapse>

import { CollapseBeforeToggle } from 'vital-design';
import { Numeric } from '@vital-design/shared';

const collapse = ref<string[]>([]);

// 切换前
const beforeToggle: CollapseBeforeToggle = async (name, expanded) => {
  // 展开时请求
  if (expanded && name === '1') {
    await timeout(500); // 模拟500ms请求
  }

  // 折叠时请求
  if (!expanded && name === '2') {
    await timeout(1000); // 模拟1000ms请求
  }

  // 展开、折叠时请求
  if (name === '3') {
    await timeout(1500); // 模拟1500ms请求
  }

  // 阻止折叠
  if (!expanded && name === '4') {
    return false;
  }
}

手动控制全部展开

通过组件提供的 toggleAll 方法设置手动控制切换全部展开。

<vd-collapse ref="collapseRef" v-model="collapse">
  <vd-collapse-item name="1" title="标题1">内容1</vd-collapse-item>
  <vd-collapse-item name="2" title="标题2">内容2</vd-collapse-item>
  <vd-collapse-item name="3" title="标题3">内容3</vd-collapse-item>
</vd-collapse>

const collapseRef = shallowRef();
const collapse = ref<string[]>([]);

// 切换全部
function toggleAll() {
  return collapseRef.value.toggleAll();
}

// 全部展开
function expandAll() {
  return collapseRef.value.toggleAll(true);
}

// 全部折叠
function collapseAll() {
  return collapseRef.value.toggleAll(false);
}

API

Collapse Props

参数	说明	类型	默认值
v-model	展开的子级索引/名称组	string | number | (string | number)[]	-
duration	动画时长	string | number	300
accordion	是否开启手风琴模式	boolean	false
disabled	是否禁用	boolean	false
before-toggle	切换前的回调函数，支持 Promise	CollapseBeforeToggle	-
lazy-render	是否懒渲染	boolean	true

CollapseItem Props

参数	说明	类型	默认值
title	标题	string	-
name	标签名称，作为匹配的标识符	string | number	-
duration	动画时长	string | number	300
disabled	是否禁用	boolean	false
lazy-render	是否懒渲染	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Collapse Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	切换时触发	string | number | (string | number)[]

CollapseItem Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-

Collapse Slots

名称	说明
default	折叠面板内容

CollapseItem Slots

名称	说明
header	面板头部
title	面板头部标题
loading	面板头部加载中
arrow	面板头部折叠图标
default	面板内容

Collapse Expose

方法名	说明	参数	返回值
toggle	切换展开	name: Numeric, option?: boolean | CollapseToggleOption	-
toggleAll	切换全部展开	expanded?: boolean | undefined	-

CollapseItem Expose

方法名	说明	参数	返回值
toggle	切换展开	expanded?: boolean | undefined	-