在前端开发中，折叠面板（Collapse）是一种常见的 UI 组件，用于展示可折叠的内容区域。Vant 作为一款轻量级的移动端 Vue 组件库，提供了丰富的组件和灵活的 API，使得开发者能够快速构建出功能强大的移动端应用。本文将详细介绍如何使用 Vant 的 Collapse 组件，并重点探讨如何实现折叠面板标题的自定义。
Vant 是一款基于 Vue.js 的移动端组件库，由有赞前端团队开发和维护。它提供了丰富的组件，如按钮、表单、弹窗、列表等，能够满足大多数移动端应用的需求。Vant 的设计理念是轻量、易用、灵活，因此它非常适合快速开发移动端应用。
在 Vant 中，Collapse 组件用于创建可折叠的面板。每个面板包含一个标题和一个内容区域，用户可以通过点击标题来展开或折叠内容区域。
<template> <van-collapse v-model="activeNames"> <van-collapse-item title="标题1" name="1">内容1</van-collapse-item> <van-collapse-item title="标题2" name="2">内容2</van-collapse-item> <van-collapse-item title="标题3" name="3">内容3</van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: ['1'] }; } }; </script> 在上面的代码中，van-collapse 是 Collapse 组件的容器，van-collapse-item 是每个折叠面板的项。title 属性用于设置面板的标题，name 属性用于标识每个面板。
Vant 提供了多种方式来自定义 Collapse 折叠面板的标题。下面我们将详细介绍这些方法。
title 插槽title 插槽允许我们完全自定义标题的内容。通过使用 title 插槽，我们可以在标题区域插入任意 HTML 或 Vue 组件。
<template> <van-collapse v-model="activeNames"> <van-collapse-item name="1"> <template #title> <span style="color: red;">自定义标题1</span> </template> 内容1 </van-collapse-item> <van-collapse-item name="2"> <template #title> <van-icon name="star" /> 自定义标题2 </template> 内容2 </van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: ['1'] }; } }; </script> 在上面的代码中，我们使用 title 插槽来自定义标题内容。第一个面板的标题使用了红色的文字，第二个面板的标题则包含了一个图标。
value 插槽value 插槽允许我们在标题的右侧添加自定义内容。这个插槽通常用于显示一些额外的信息，如状态、数量等。
<template> <van-collapse v-model="activeNames"> <van-collapse-item name="1"> <template #title> <span>标题1</span> </template> <template #value> <van-tag type="primary">已完成</van-tag> </template> 内容1 </van-collapse-item> <van-collapse-item name="2"> <template #title> <span>标题2</span> </template> <template #value> <van-tag type="danger">未完成</van-tag> </template> 内容2 </van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: ['1'] }; } }; </script> 在上面的代码中，我们使用 value 插槽在标题右侧添加了一个标签，用于显示任务的状态。
icon 插槽icon 插槽允许我们在标题的左侧添加自定义图标。这个插槽通常用于显示与标题相关的图标。
<template> <van-collapse v-model="activeNames"> <van-collapse-item name="1"> <template #icon> <van-icon name="success" /> </template> <template #title> <span>标题1</span> </template> 内容1 </van-collapse-item> <van-collapse-item name="2"> <template #icon> <van-icon name="warning" /> </template> <template #title> <span>标题2</span> </template> 内容2 </van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: ['1'] }; } }; </script> 在上面的代码中，我们使用 icon 插槽在标题左侧添加了一个图标，用于表示任务的状态。
right-icon 插槽right-icon 插槽允许我们在标题的右侧添加自定义图标。这个插槽通常用于显示与标题相关的操作图标，如展开/折叠图标。
<template> <van-collapse v-model="activeNames"> <van-collapse-item name="1"> <template #title> <span>标题1</span> </template> <template #right-icon> <van-icon name="arrow-down" /> </template> 内容1 </van-collapse-item> <van-collapse-item name="2"> <template #title> <span>标题2</span> </template> <template #right-icon> <van-icon name="arrow-up" /> </template> 内容2 </van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: ['1'] }; } }; </script> 在上面的代码中，我们使用 right-icon 插槽在标题右侧添加了一个箭头图标，用于表示面板的展开/折叠状态。
extra 插槽extra 插槽允许我们在标题的右侧添加自定义内容。这个插槽通常用于显示一些额外的操作按钮或信息。
<template> <van-collapse v-model="activeNames"> <van-collapse-item name="1"> <template #title> <span>标题1</span> </template> <template #extra> <van-button type="primary" size="mini">操作</van-button> </template> 内容1 </van-collapse-item> <van-collapse-item name="2"> <template #title> <span>标题2</span> </template> <template #extra> <van-button type="danger" size="mini">删除</van-button> </template> 内容2 </van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: ['1'] }; } }; </script> 在上面的代码中，我们使用 extra 插槽在标题右侧添加了一个操作按钮，用于执行一些操作。
除了上述的基本自定义方法外，Vant 还提供了一些高级自定义功能，使得我们可以更加灵活地控制 Collapse 折叠面板的标题。
在某些情况下，我们可能需要根据面板的状态动态地改变标题内容。Vant 允许我们通过绑定数据来实现动态标题。
<template> <van-collapse v-model="activeNames"> <van-collapse-item name="1"> <template #title> <span>{{ isExpanded ? '展开状态' : '折叠状态' }}</span> </template> 内容1 </van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: [] }; }, computed: { isExpanded() { return this.activeNames.includes('1'); } } }; </script> 在上面的代码中，我们通过计算属性 isExpanded 来判断面板是否展开，并根据展开状态动态地改变标题内容。
Vant 的 Collapse 组件可以与其他组件结合使用，以实现更复杂的功能。例如，我们可以结合 van-checkbox 组件来实现一个带有复选框的折叠面板。
<template> <van-collapse v-model="activeNames"> <van-collapse-item name="1"> <template #title> <van-checkbox v-model="checked">标题1</van-checkbox> </template> 内容1 </van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: [], checked: false }; } }; </script> 在上面的代码中，我们结合了 van-checkbox 组件，使得用户可以通过复选框来控制面板的展开/折叠状态。
Vant 的 Collapse 组件允许我们通过 CSS 来自定义样式。我们可以通过覆盖默认的 CSS 类来实现自定义样式。
<template> <van-collapse v-model="activeNames" class="custom-collapse"> <van-collapse-item name="1" class="custom-collapse-item"> <template #title> <span>标题1</span> </template> 内容1 </van-collapse-item> </van-collapse> </template> <style> .custom-collapse .van-collapse-item__title { background-color: #f0f0f0; padding: 10px; border-radius: 5px; } .custom-collapse .van-collapse-item__content { padding: 10px; background-color: #e0e0e0; border-radius: 5px; } </style> <script> export default { data() { return { activeNames: [] }; } }; </script> 在上面的代码中，我们通过自定义 CSS 类 custom-collapse 和 custom-collapse-item 来改变 Collapse 组件的样式。
默认情况下，Vant 的 Collapse 组件只允许一个面板展开。如果需要实现多个面板同时展开，可以通过设置 accordion 属性为 false 来实现。
<template> <van-collapse v-model="activeNames" :accordion="false"> <van-collapse-item title="标题1" name="1">内容1</van-collapse-item> <van-collapse-item title="标题2" name="2">内容2</van-collapse-item> <van-collapse-item title="标题3" name="3">内容3</van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: [] }; } }; </script> 可以通过设置 v-model 绑定的数组来指定默认展开的面板。
<template> <van-collapse v-model="activeNames"> <van-collapse-item title="标题1" name="1">内容1</van-collapse-item> <van-collapse-item title="标题2" name="2">内容2</van-collapse-item> <van-collapse-item title="标题3" name="3">内容3</van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: ['1', '2'] }; } }; </script> 在上面的代码中，我们通过设置 activeNames 数组来指定默认展开的面板。
可以通过设置 disabled 属性来禁用某个面板。
<template> <van-collapse v-model="activeNames"> <van-collapse-item title="标题1" name="1" disabled>内容1</van-collapse-item> <van-collapse-item title="标题2" name="2">内容2</van-collapse-item> <van-collapse-item title="标题3" name="3">内容3</van-collapse-item> </van-collapse> </template> <script> export default { data() { return { activeNames: [] }; } }; </script> 在上面的代码中，我们通过设置 disabled 属性来禁用第一个面板。
Vant 的 Collapse 组件提供了丰富的 API 和灵活的插槽机制，使得我们可以轻松地实现折叠面板标题的自定义。通过使用 title、value、icon、right-icon 和 extra 插槽，我们可以实现各种复杂的标题自定义需求。此外，Vant 还支持动态标题、结合其他组件和样式自定义等高级功能，使得 Collapse 组件能够满足大多数移动端应用的需求。
希望本文能够帮助你更好地理解和使用 Vant 的 Collapse 组件，并在实际开发中灵活运用这些技巧。如果你有任何问题或建议，欢迎在评论区留言讨论。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
