vant折叠面板自定义,vant 折叠面板title加复选框点击选中不展开,vue折叠面板组件,vant sidebar,vant菜单,vant offset
Vant4 Collapse 折叠面板是一个基于 Vue.js 开发的 UI 组件，用于在网页中实现可折叠的内容区域。

当用户点击 Collapse 标题时，对应的内容区域会展开或收起，使页面内容更加紧凑和易于管理。同时，Collapse 组件还支持自定义标题和内容区域，以及一些常见的交互效果，如动画过渡、手风琴效果等。

以下是一个简单的示例代码，实现了一个包含两个折叠区域的 Collapse 组件：

html
<template>
<van-collapse v-model="activeNames">
<van-collapse-item title="折叠面板1" name="1">
<p>这里是折叠面板1的内容</p>
</van-collapse-item>
<van-collapse-item title="折叠面板2" name="2">
<p>这里是折叠面板2的内容</p>
</van-collapse-item>
</van-collapse>
</template>

<script>
import { defineComponent } from 'vue';
import { VanCollapse, VanCollapseItem } from 'vant';

export default defineComponent({
components: {
VanCollapse,
VanCollapseItem,
},
data() {
return {
activeNames: ['1'],
};
},
});
</script>


在上面的代码中，我们首先引入了 VanCollapse 和 VanCollapseItem 两个组件，并将它们注册为当前组件的子组件。然后，在模板中使用 VanCollapse 组件包裹了两个 VanCollapseItem 组件，分别表示两个折叠区域。每个 VanCollapseItem 组件都有一个 title 属性用于设置标题，以及一个 name 属性用于标识当前折叠区域的唯一名称。

最后，在组件的 data 选项中定义了一个名为 activeNames 的数组，用于存储当前展开的折叠区域的名称。通过将 v-model 绑定到 activeNames 数组，我们可以实现对 Collapse 组件的状态控制，点击标题时对应的 name 值会被添加到或移除出 activeNames 数组中，从而实现对内容区域的展开和收起。