May 07, 2021 Vant
import Vue from 'vue';
import { Collapse, CollapseItem } from 'vant';
Vue.use(Collapse);
Vue.use(CollapseItem);
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 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'
};
}
};
<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']
};
}
};
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
|
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 |
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 | - |
Name | Description |
---|---|
default | Panel content |
value | Customize the display |
icon |
Custom
icon
|
title |
Custom
title
|
right-icon |
Customize the right button, which defaults
arrow
|