vant 底部导航栏 中间凸起
1.tabBar代码
<template><div><van-tabbar fixed route v-model="active" @change="handleChange"><van-tabbar-item v-for="(item, index) in data" :to="item.to" :icon="item.icon" :badge='item.badge' :key="index"><span :class="defaultActive === index ? active:''">{{item.title }}</span><template slot="icon" slot-scope="props"><img :src="props.active ? item.active : item.normal" v-show="index !==1"><img :src="props.active ? item.active : item.normal" class="tui" v-show="index===1"></template></van-tabbar-item></van-tabbar></div></template><script>export default {name: 'TabBar',props: {defaultActive: {type: Number,default: 0},data: {type: Array,default: () => {return []}}},data() {return {active: this.defaultActive}},methods: {handleChange(value) {this.$emit('change', value)}}}</script><style scoped>.active_tab img {width: 26px;height: 26px;}/* 自定义选中的颜色 */.van-tabbar-item--active {color: #d81e06;}.tui {width: 50px;height: 50px;margin-top: -40px;z-index: 100000;}[class*=van-hairline]::after {border: none !important}</style>
2.中间按钮，路由配置，注意不要放在Main下面的Children中，单独配置路由；[根据具体需求配置]
{path: '/',component: () => import('@/views/index'),redirect: '/home',meta: {title: '首页',keepAlive: true},children: [{path: '/home',name: 'Home',component: () => import('@/views/home/index'),meta: {title: '首页', keepAlive: true}},{path: '/model',name: 'Model',component: () => import('@/views/model/index'),meta: {title: '模块', keepAlive: true}},{path: '/mine',name: 'Mine',component: () => import('@/views/mine/index'),meta: {title: '个人中心', keepAlive: true}}]},{path: '/add',name: 'Add',meta: {title: '新增'},component: () => import('@/views/add/index')},
3.中间图标文件
4.效果图
