vue的tabber

### Vue 实现 Tabbar 组件示例 以下是基于 `Vant` 的 Vue Tabbar 组件实现的具体方法，包括文件结构设计、配置以及使用方式。 #### 文件结构概述 为了清晰展示如何构建一个完整的 Tabbar 功能模块，这里按照以下五个部分来说明： 1. **TabbarItem.vue**: 定义单个 Tabbar 项的逻辑和样式。 2. **Tabbar.vue**: 将多个 Tabbar 项组合成整体 Tabbar。 3. **router.js**: 配置路由以支持页面跳转。 4. **main.js**: 注册全局组件并初始化项目依赖。 5. **App.vue**: 主应用入口，集成 Tabbar 并绑定动态状态。 --- #### 代码实现 ##### 1. TabbarItem.vue (单项定义) 此组件负责渲染单个 Tabbar 图标及其文字描述。 ```vue <template> <div class="tabbar-item"> <slot></slot> <!-- 插槽用于放置图标 --> <span>{{ label }}</span> </div> </template> <script> export default { name: "TabbarItem", props: { label: String, }, }; </script> <style scoped> .tabbar-item { text-align: center; } </style> ``` [^1] ##### 2. Tabbar.vue (整体布局) 该组件通过循环子组件的方式生成整个 Tabbar 结构。 ```vue <template> <div class="tabbar-container"> <slot></slot> <!-- 子组件插槽 --> </div> </template> <script> import { ref } from "vue"; export default { name: "Tabbar", setup() { const activeIndex = ref(0); return { activeIndex }; }, }; </script> <style scoped> .tabbar-container { display: flex; justify-content: space-around; background-color: white; position: fixed; bottom: 0; width: 100%; padding: 10px 0; border-top: 1px solid #eaeaea; } </style> ``` ##### 3. router.js (路由设置) 配置不同路径对应的目标视图组件。 ```javascript const routes = [ { path: "/", component: () => import("./views/Home.vue"), meta: { title: "Home" } }, { path: "/find", component: () => import("./views/Find.vue"), meta: { title: "Search" } } ]; export default routes; ``` [^4] ##### 4. main.js (全局注册与初始化) 在此处完成 Vant 和自定义组件的加载工作。 ```javascript import { createApp } from "vue"; import App from "./App.vue"; import { Tabbar as VanTabbar, TabbarItem as VanTabbarItem } from "vant"; // 导入 Vant 组件 import "vant/lib/index.css"; // 引入样式表 import routerConfig from "./router"; // 路由配置 // 创建实例 createApp(App).use(routerConfig).use(VanTabbar).use(VanTabbarItem).mount("#app"); ``` [^2][^3] ##### 5. App.vue (主程序入口) 最后，在根级组件中嵌套 Tabbar，并利用其事件监听器控制当前激活的状态变化。 ```vue <template> <div id="app"> <router-view /> <van-tabbar v-model="activeKey" @change="handleChange" route active-color="#8bc34a"> <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item> <van-tabbar-item to="/find" icon="search">搜索</van-tabbar-item> </van-tabbar> </div> </template> <script> export default { data() { return { activeKey: 0, }; }, methods: { handleChange(index) { console.log(`Switched to index ${index}`); }, }, }; </script> ``` --- ### 效果预览 最终的效果是一个固定于屏幕底部的导航条，点击不同的按钮可以触发对应的页面切换行为。颜色高亮显示选中的菜单项，默认采用绿色作为活动态的颜色标识。 [^1] --- ####