Vant Collapse folding panel

May 07, 2021 Vant

Introduced

import Vue from 'vue';
import { Collapse, CollapseItem } from 'vant';

Vue.use(Collapse);
Vue.use(CollapseItem);

Code demo

Basic usage

ActiveNames is an array format with v-model control of the expanded panel list

<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" disabled>内容</van-collapse-item>
</van-collapse>

export default {
  data() {
    return {
      activeNames: ['1']
    };
  }
};

Accordion

Accordion allows you to set up accordion mode and expand up to one panel, where activeName is in string format

<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>

export default {
  data() {
    return {
      activeName: '1'
    };
  }
};

Customize the title content

<van-collapse v-model="activeNames">
  <van-collapse-item name="1">
    <div slot="title">标题1 <van-icon name="question-o" /></div>
    内容
  </van-collapse-item>
  <van-collapse-item title="标题2" name="2" icon="shop-o">
    内容
  </van-collapse-item>
</van-collapse>

export default {
  data() {
    return {
      activeNames: ['1']
    };
  }
};

Api

Collapse Props

Parameters	Description	Type	The default
v-model	The name of the currently expanded panel	Accordion mode: number \| string Non-accordion mode: (\| string).	-
accordion	Whether to turn on accordion mode	boolean	`false`
border	Whether to display the outer border	boolean	`true`

Collapse Events

The name of the event	Description	Callback parameters
change	Triggered when switching panels	ActiveNames: The type is consistent with the value of the v-model binding

CollapseItem Props

Parameters	Description	Type	The default
name	Unique identifier, which defaults to an index value	number \| string	`index`
icon	The icon name or picture link to the left of the title bar	string	-
size	The size of the title bar, with an optional `large`	string	-
title	What's on the left side of the title bar	number \| string	-
value	What's on the right side of the title bar	number \| string	-
label	The title bar describes the information	number \| string	-
border	Whether to display the inner border	boolean	`true`
is-link	Show the arrow to the right of the title bar and turn on tap feedback	boolean	`true`
disabled	Whether to disable the panel	boolean	`false`
title-class	The title on the left has an additional class name	string	-
value-class	The content on the right has an additional class name	string	-
label-class	Describes the additional class name of the information	string	-

CollapseItem Slots

Name	Description
default	Panel content
value	Customize the display
icon	Custom `icon`
title	Custom `title`
right-icon	Customize the right button, which defaults `arrow`