vant 底部导航栏 中间凸起

vant 底部导航栏 中间凸起

1.tabBar代码

  
    
      
        {{ item.title }}
        
          
          
        
      
    
  


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)
    }
  }
}




.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
}

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.效果图