vue实现底部菜单
vue实现底部菜单的方法
使用Vue Router和vant组件库
安装vant组件库后，可以通过Tabbar组件快速实现底部菜单导航。在Vue文件中引入Tabbar和TabbarItem组件，结合Vue Router的router-link实现页面切换。
<template>
<van-tabbar v-model="active" route>
<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
<van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
<van-tabbar-item icon="friends-o" to="/friend">好友</van-tabbar-item>
<van-tabbar-item icon="setting-o" to="/setting">设置</van-tabbar-item>
</van-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
components: {
[Tabbar.name]: Tabbar,
[TabbarItem.name]: TabbarItem
},
data() {
return {
active: 0
}
}
}
</script>自定义底部菜单组件
创建独立的BottomNav组件，通过flex布局实现底部固定定位。使用Vue Router的$route对象动态设置active状态。
<template>
<div class="bottom-nav">
<router-link
v-for="(item, index) in navItems"
:key="index"
:to="item.path"
:class="{active: $route.path === item.path}">
<span>{{item.title}}</span>
</router-link>
</div>
</template>
<script>
export default {
data() {
return {
navItems: [
{ path: '/', title: '首页' },
{ path: '/category', title: '分类' },
{ path: '/cart', title: '购物车' },
{ path: '/user', title: '我的' }
]
}
}
}
</script>
<style scoped>
.bottom-nav {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
background: #fff;
box-shadow: 0 -1px 5px rgba(0,0,0,0.1);
}
.bottom-nav a {
flex: 1;
text-align: center;
padding: 8px 0;
}
.bottom-nav .active {
color: #ff6700;
}
</style>使用Element UI实现
Element UI的el-menu组件配合mode="horizontal"属性可以实现底部导航效果。需要设置position: fixed固定在底部。
<template>
<el-menu
mode="horizontal"
class="bottom-menu"
:default-active="$route.path"
router>
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/product">产品</el-menu-item>
<el-menu-item index="/service">服务</el-menu-item>
<el-menu-item index="/contact">联系我们</el-menu-item>
</el-menu>
</template>
<style>
.bottom-menu {
position: fixed;
bottom: 0;
width: 100%;
}
</style>移动端适配方案
对于移动端项目，需要考虑安全区域和手势操作。可以通过CSS的env()函数处理iPhoneX等设备的底部安全区域。
.bottom-nav {
padding-bottom: env(safe-area-inset-bottom);
}每种实现方式各有特点，vant方案适合移动端轻量级应用，自定义组件灵活性最高，Element UI适合中后台管理系统。根据项目需求选择合适的实现方案。
