<template>
<div>
<!-- 使用 van-collapse 组件 -->
<van-collapse v-model="activeNames">
<!-- van-collapse-item 是折叠面板的每个项 -->
<van-collapse-item title="面板1" name="1">
<!-- 面板1的内容 -->
<div>这是面板1的内容</div>
</van-collapse-item>
<van-collapse-item title="面板2" name="2">
<!-- 面板2的内容 -->
<div>这是面板2的内容</div>
</van-collapse-item>
<!-- 可以添加更多的 van-collapse-item -->
</van-collapse>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// activeNames 用于控制哪个折叠面板项是展开的，可以是一个数组
const activeNames = ref(['1']);
return {
activeNames,
};
},
};
</script>
<style>
/* 这是一个简单的样式示例，你可以根据需求自定义样式 */
</style>
在上述代码中，我们使用了 van-collapse 组件来包裹折叠面板的内容，然后使用 van-collapse-item 组件来创建每个折叠面板项。每个折叠面板项包含一个标题和对应的内容。
通过 v-model 绑定的 activeNames 控制哪个折叠面板项是展开的。在这个例子中，我们初始化 activeNames 为 ['1']，表示初始时展开第一个面板。你可以根据需要动态更新 activeNames 的值来实现展开和折叠面板。
确保你的项目已经正确引入了 Vant3 并按照文档配置，以确保组件能够正常工作。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5746/Vant