在 Vant4 中,Collapse 组件用于创建折叠面板,可以展示一组可折叠的内容项。以下是一个简单的例子,演示如何在 Vant4 中使用 Collapse 组件:

首先,确保你已经安装了 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