Vant Collapse 折叠面板功能介绍

发布时间：2023-04-20 12:34:10 所属栏目：教程来源：

导读：Vant Collapse 组件是实现手机端折叠面板的组件库。

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

Vue.use(Collapse);
Vue.use(CollapseItem);
基础用法

Vant Collapse 组件是实现手机端折叠面板的组件库。

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

Vue.use(Collapse);
Vue.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" disabled>内容</van-collapse-item>
</van-collapse>
export default {
data() {
return {
activeNames: ['1']
};
}
};
手风琴
通过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>
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']
};
}
};

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!