将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from 'vue';
import { Collapse, CollapseItem } from 'vant';
const app = createApp();
app.use(Collapse);
app.use(CollapseItem);
通过 v-model 控制展开的面板列表,activeNames 为数组格式。
<van-collapse v-model="activeNames">
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
<van-collapse-item title="标题2" name="2">内容</van-collapse-item>
<van-collapse-item title="标题3" name="3">内容</van-collapse-item>
</van-collapse>
import { ref } from 'vue';
export default {
setup() {
const activeNames = ref(['1']);
return { activeNames };
},
};
通过 accordion 可以设置为手风琴模式,最多展开一个面板,此时 activeName 为字符串格式。
<van-collapse v-model="activeName" accordion>
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
<van-collapse-item title="标题2" name="2">内容</van-collapse-item>
<van-collapse-item title="标题3" name="3">内容</van-collapse-item>
</van-collapse>
import { ref } from 'vue';
export default {
setup() {
const activeName = ref('1');
return { activeName };
},
};
通过 disabled 属性来禁用单个面板。
<van-collapse v-model="activeNames">
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
<van-collapse-item title="标题2" name="2" disabled>内容</van-collapse-item>
<van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
</van-collapse>
通过 title 插槽可以自定义标题栏的内容。
<van-collapse v-model="activeNames">
<van-collapse-item name="1">
<template #title>
<div>标题1 <van-icon name="question-o" /></div>
</template>
内容
</van-collapse-item>
<van-collapse-item title="标题2" name="2" icon="shop-o">
内容
</van-collapse-item>
</van-collapse>
import { ref } from 'vue';
export default {
setup() {
const activeNames = ref(['1']);
return { activeNames };
},
};
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model | 当前展开面板的 name | 手风琴模式:number | string 非手风琴模式:(number | string)[] | - |
accordion | 是否开启手风琴模式 | boolean |
|
border | 是否显示外边框 | boolean |
|
事件名 | 说明 | 回调参数 |
---|---|---|
change | 切换面板时触发 | activeNames: 类型与 v-model 绑定的值一致 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
name | 唯一标识符,默认为索引值 | number | string |
|
icon | 标题栏左侧图标名称或图片链接 | string | - |
size | 标题栏大小,可选值为 | string | - |
title | 标题栏左侧内容 | number | string | - |
value | 标题栏右侧内容 | number | string | - |
label | 标题栏描述信息 | number | string | - |
border | 是否显示内边框 | boolean |
|
is-link | 是否展示标题栏右侧箭头并开启点击反馈 | boolean |
|
disabled | 是否禁用面板 | boolean |
|
readonly | 是否为只读状态,只读状态下无法操作面板 | boolean |
|
title-class | 左侧标题额外类名 | string | - |
value-class | 右侧内容额外类名 | string | - |
label-class | 描述信息额外类名 | string | - |
通过 ref 可以获取到 CollapseItem 实例并调用实例方法,详见组件实例方法。
方法名 | 说明 | 参数 | 返回值 |
---|---|---|---|
toggle | 切换面试展开状态,传 true 为展开,false 为收起,不传参为切换 | expand?: boolean | - |
通过 CollapseItemInstance 获取 CollapseItem 实例的类型定义。
import { ref } from 'vue';
import type { CollapseItemInstance } from 'vant';
const collapseItemRef = ref<CollapseItemInstance>();
collapseItemRef.value?.toggle();
名称 | 说明 |
---|---|
default | 面板内容 |
title | 自定义标题栏左侧内容 |
value | 自定义标题栏右侧内容 |
label | 自定义标题栏描述信息 |
icon | 自定义标题栏左侧图标 |
right-icon | 自定义标题栏右侧图标 |
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--van-collapse-item-transition-duration | var(--van-animation-duration-base) | - |
--van-collapse-item-content-padding | var(--van-padding-sm) var(--van-padding-md) | - |
--van-collapse-item-content-font-size | var(--van-font-size-md) | - |
--van-collapse-item-content-line-height | 1.5 | - |
--van-collapse-item-content-text-color | var(--van-gray-6) | - |
--van-collapse-item-content-background-color | var(--van-white) | - |
--van-collapse-item-title-disabled-color | var(--van-gray-5) | - |