首先,确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装:
npm install vant@next
# 或
yarn add vant@next
然后,在你的 Vue 组件中,可以像这样使用 Collapse 组件:
<template>
<div>
<!-- 使用 vant-collapse 组件 -->
<van-collapse v-model="activeNames">
<!-- vant-collapse-item 作为折叠项,可以有多个 -->
<van-collapse-item title="标题1" name="1">
<div>内容1</div>
</van-collapse-item>
<van-collapse-item title="标题2" name="2">
<div>内容2</div>
</van-collapse-item>
<van-collapse-item title="标题3" name="3">
<div>内容3</div>
</van-collapse-item>
</van-collapse>
</div>
</template>
<script>
import { ref } from 'vue';
import { Collapse, CollapseItem } from 'vant';
export default {
components: {
[Collapse.name]: Collapse,
[CollapseItem.name]: CollapseItem,
},
setup() {
// 使用 ref 创建一个响应式变量,用于设置当前展开的折叠项的 name
const activeNames = ref(['1']);
return {
activeNames,
};
},
};
</script>
在这个例子中,我们使用了 van-collapse 组件,通过 v-model 绑定了一个响应式变量 activeNames,用于设置当前展开的折叠项的 name。然后,在 van-collapse 组件内部,我们使用了 van-collapse-item 作为折叠项,可以设置不同的标题和内容。
通过点击折叠项的标题,你可以切换折叠项的展开和收起状态。当展开或收起折叠项时,activeNames 的值会相应更新,你可以根据具体的需求处理展开和收起的回调逻辑。
转载请注明出处:http://www.zyzy.cn/article/detail/5830/Vant