首先，确保你已经引入了 Vant 4 和 Vue.js。你可以通过在 HTML 文件中引入相关的 CSS 和 JavaScript 文件，或者通过 npm 安装并在 Vue 组件中引入。
然后，在你的 Vue 组件中，可以使用以下代码来创建一个基本的 Vant Tab：
<template>
<div>
<!-- Tab 组件 -->
<van-tabs v-model="activeTab" @change="handleTabChange">
<!-- Tab 标签项 -->
<van-tab title="标签页1">标签页1的内容</van-tab>
<van-tab title="标签页2">标签页2的内容</van-tab>
<van-tab title="标签页3">标签页3的内容</van-tab>
</van-tabs>
<!-- 页面内容 -->
<div style="padding: 20px;">
<!-- 根据当前激活的标签页显示相应的内容 -->
{{ tabContent }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 0, // 当前激活的标签页索引
tabContent: '', // 当前激活的标签页内容
};
},
methods: {
// 处理标签页切换事件
handleTabChange(index) {
// 在这里可以处理标签页切换时的逻辑
console.log('当前激活的标签页索引:', index);
// 根据需要设置当前激活的标签页内容
this.tabContent = `当前是标签页${index + 1}的内容`;
},
},
};
</script>
在上述代码中，<van-tabs> 表示标签页容器，通过设置 v-model 来绑定当前激活的标签页索引。通过 @change 监听标签页切换事件，调用 handleTabChange 方法处理标签页切换时的逻辑。
在实际使用中，你可以根据需要调整标签页的数量、标题和内容，以及在 handleTabChange 方法中处理标签页切换时的逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/5852/Vant