1. 安装 Vant4： 如果你还没有安装 Vant4，可以通过 npm 或 yarn 进行安装：
npm install vant@next --save
或者
yarn add vant@next
2. 在项目中引入 Vant4： 在你的 Vue 项目中，你需要在主文件（通常是 main.js）中引入 Vant4 的样式和组件：
import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
const app = createApp(App);
app.use(Vant);
app.mount('#app');
3. 使用 Tabbar 组件： 在你的组件中，可以使用 Vant4 提供的 van-tabbar 和 van-tabbar-item 组件来创建标签栏。以下是一个简单的例子：
<template>
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
<van-tabbar-item icon="search">搜索</van-tabbar-item>
<van-tabbar-item icon="friends-o">朋友</van-tabbar-item>
<van-tabbar-item icon="setting-o">设置</van-tabbar-item>
</van-tabbar>
</template>
<script>
export default {
data() {
return {
active: 0, // 默认选中的标签索引
};
},
};
</script>
在上面的例子中，van-tabbar 是整个标签栏的容器，而 van-tabbar-item 则是标签栏的每个标签项，其中 icon 属性指定了图标，标签内容则写在标签内。
4. 自定义事件处理： 你可以监听 change 事件来处理标签切换的逻辑，例如：
<template>
<van-tabbar v-model="active" @change="handleChange">
<!-- ... -->
</van-tabbar>
</template>
<script>
export default {
methods: {
handleChange(index) {
console.log(`标签切换到第 ${index} 项`);
},
},
};
</script>
在这个例子中，当用户切换标签时，会触发 handleChange 方法，并传递当前选中标签的索引。
请确保你已经按照 Vant4 的文档正确引入并配置了样式，以确保 Tabbar 组件正常显示。
转载请注明出处：http://www.zyzy.cn/article/detail/5853/Vant