Collapse 折叠面板

引入

  1. import{Collapse,CollapseItem}from'vant';
  2. Vue.use(Collapse).use(CollapseItem);

代码演示

基础用法

通过v-model控制展开的面板列表,activeNames为数组格式

  1. <van-collapsev-model="activeNames">
  2. <van-collapse-itemtitle="标题1"name="1">内容</van-collapse-item>
  3. <van-collapse-itemtitle="标题2"name="2">内容</van-collapse-item>
  4. <van-collapse-itemtitle="标题3"name="3"disabled>内容</van-collapse-item>
  5. </van-collapse>
  1. exportdefault{
  2. data(){
  3. return{
  4. activeNames:['1']
  5. };
  6. }
  7. };

手风琴

通过accordion可以设置为手风琴模式,最多展开一个面板,此时activeName为字符串格式

  1. <van-collapsev-model="activeName"accordion>
  2. <van-collapse-itemtitle="标题1"name="1">内容</van-collapse-item>
  3. <van-collapse-itemtitle="标题2"name="2">内容</van-collapse-item>
  4. <van-collapse-itemtitle="标题3"name="3">内容</van-collapse-item>
  5. </van-collapse>
  1. exportdefault{
  2. data(){
  3. return{
  4. activeName:'1'
  5. };
  6. }
  7. };

自定义标题内容

  1. <van-collapsev-model="activeNames">
  2. <van-collapse-itemname="1">
  3. <divslot="title">标题1 <van-iconname="question-o"/></div>
  4. 内容
  5. </van-collapse-item>
  6. <van-collapse-item
  7. title="标题2"
  8. name="2"
  9. icon="shop-o"
  10. >
  11. 内容
  12. </van-collapse-item>
  13. </van-collapse>

API

Collapse Props

参数说明类型默认值版本
v-model当前展开面板的 nameArray | String | Number--
accordion是否开启手风琴模式Booleanfalse-
border是否显示外边框Booleantrue1.6.9

Collapse Events

事件名说明回调参数
change切换面板时触发activeNames: string | array

CollapseItem Props

参数说明类型默认值版本
name唯一标识符,默认为索引值String | Numberindex-
icon标题栏左侧图标名称或图片链接,可选值见 Icon 组件String-1.2.1
size标题栏大小,可选值为 largeString-1.6.9
title标题栏左侧内容String | Number--
value标题栏右侧内容String | Number-1.2.1
label标题栏描述信息String | Number-1.2.1
border是否显示内边框Booleantrue1.2.1
is-link是否展示标题栏右侧箭头并开启点击反馈Booleantrue1.2.1
disabled是否禁用面板Booleanfalse1.3.6
title-class左侧标题额外类名String-1.4.8
value-class右侧内容额外类名String-1.4.8
label-class描述信息额外类名String-1.4.8

CollapseItem Slots

名称说明
default面板内容
value自定义显示内容
icon自定义icon
title自定义title
right-icon自定义右侧按钮,默认是arrow

Collapse 折叠面板 - 图1