以下是一个简单的例子，演示如何在 Vue 项目中使用 Vant 的 Tabbar 组件：
1. 首先，确保你的项目已经安装了 Vant。你可以使用 npm 或 yarn 安装：
npm install vant
或
yarn add vant
2. 在你的 Vue 项目中，可以在组件中导入并使用 Vant 的 Tabbar：
<template>
<div>
<!-- 页面内容部分 -->
<router-view></router-view>
<!-- Tabbar 部分 -->
<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>
</div>
</template>
<script>
export default {
data() {
return {
active: 0, // 当前选中的标签索引
};
},
};
</script>
这是一个基本的例子，包含了四个标签，分别是首页、搜索、朋友和设置。你可以根据自己的需要进行定制，修改标签的图标、文字和跳转链接等。
3. 以上代码中使用了 v-model="active" 来绑定当前选中的标签索引，你可以根据实际需求进行修改。
请注意，以上示例中的图标（icon 属性）需要提前引入 Vant 的图标库，你可以在项目中引入样式：
import 'vant/lib/index.css';
确保在项目中的合适位置引入，这样样式和图标就能正确地显示了。
转载请注明出处：http://www.zyzy.cn/article/detail/5700/Vant