vant如何实现Collapse折叠面板标题自定义

这篇文章主要介绍了vant如何实现Collapse折叠面板标题自定义，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vant Collapse折叠面板标题自定义

vue-cli3+vant实现折叠面板上面标题自定义

代码如下：

使用vant折叠面板自定义内容

效果图：

Collapse 折叠面板

介绍

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。

引入

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

代码演示

基础用法

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

 内容内容内容

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

在基础用法的基础上，因为页面太长，因此需要使用手风琴模式。

手风琴

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

 内容内容内容

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

基于以上官方文档介绍，下面实现自己的代码逻辑。

页面渲染：

数据准备:

typelist:[ { type:"医疗设备", data:[ {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备",type_id: "104"}, {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备",type_id: "104"}, {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备",type_id: "104"}, {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备",type_id: "104"} ] }, { type:"医疗设备1", data:[ {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备1",type_id: "105"}, {name: "手持式红外线测温仪",name_id: "21",type: "医疗设备1",type_id: "105"} ] } ]

以上为个人经验，希望能给大家一个参考，也希望大家多多支持0133技术站。

以上就是vant如何实现Collapse折叠面板标题自定义的详细内容，更多请关注0133技术站其它相关文章！