介绍
将一组内容放置在多个折叠面板中,点击面板的标题可以展开或收缩其内容。
引入
代码演示
基础用法
通过 `v-model` 控制展开的面板列表,`activeNames` 为数组格式。
手风琴
通过 `accordion` 可以设置为手风琴模式,最多展开一个面板,此时 `activeName` 为字符串格式。
禁用状态
通过 `disabled` 属性来禁用单个面板。
自定义标题内容
通过 `title` 插槽可以自定义标题栏的内容。
API
Collapse Props
参数 | 说明 | 类型 | 默认值 | |
---|---|---|---|---|
v-model | 当前展开面板的 name | 手风琴模式:number / string非手风琴模式:(number / string)[] | - | |
accordion | 是否开启手风琴模式 | boolean | false | |
border | 是否显示外边框 | boolean | true |
Collapse Events
事件名 | 说明 | 回调参数 | |
---|---|---|---|
change | 切换面板时触发 | activeNames: 类型与 v-model 绑定的值一致 |
CollapseItem Props
参数 | 说明 | 类型 | 默认值 | |
---|---|---|---|---|
name | 唯一标识符,默认为索引值 | number / string | index | |
icon | 标题栏左侧[图标名称](https://youzan.github.io/vant/v2/#/zh-CN/icon)或图片链接 | string | - | |
size | 标题栏大小,可选值为 large | string | - | |
title | 标题栏左侧内容 | number / string | - | |
value | 标题栏右侧内容 | number / string | - | |
label | 标题栏描述信息 | number / string | - | |
border | 是否显示内边框 | boolean | true | |
is-link | 是否展示标题栏右侧箭头并开启点击反馈 | boolean | true | |
disabled | 是否禁用面板 | boolean | false | |
lazy-render v2.12.43 | 是否在首次展开时才渲染面板内容 | boolean | true | |
title-class | 左侧标题额外类名 | string | - | |
value-class | 右侧内容额外类名 | string | - | |
label-class | 描述信息额外类名 | string | - |
CollapseItem Slots
名称 | 说明 | |
---|---|---|
default | 面板内容 | |
value | 自定义显示内容 | |
icon | 自定义 icon | |
title | 自定义 title | |
right-icon | 自定义右侧按钮,默认是 arrow |
CollapseItem 方法
通过 ref 可以获取到 CollapseItem 实例并调用实例方法,详见
。
方法名 | 说明 | 参数 | 返回值 | |
---|---|---|---|---|
toggle v2.10.9 | 切换面试展开状态,传 true 为展开,false 为收起,不传参为切换 | expand?: boolean | - |
样式变量
组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考
。
名称 | 默认值 | 描述 | |
---|---|---|---|
@collapse-item-transition-duration | @animation-duration-base | - | |
@collapse-item-content-padding | @padding-sm @padding-md | - | |
@collapse-item-content-font-size | @font-size-md | - | |
@collapse-item-content-line-height | 1.5 | - | |
@collapse-item-content-text-color | @gray-6 | - | |
@collapse-item-content-background-color | @white | - | |
@collapse-item-title-disabled-color | @gray-5 | - |
效果图: