VUE使用VANT的Tabbar导航中间凸起样式

<template>
    <van-tabbar v-model="active" inactive-color="#777777" active-color="#000000" >
    <van-tabbar-item v-for="(item,index) in tabbars" :key="index" :to="(item.name)"  :info="index==3?num==''?'':num:''">
      <span v-if="index !=2">{
    {item.title}}span>
      <img v-if="index !=2" slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
      <div  v-if="index ==2">
        <img class="tui" src="http://sucai.suoluomei.cn/sucai_zs/images/20200604173603-12.png" alt="">
      div>
    van-tabbar-item>
  van-tabbar>
template>

<script>
import Vue from "vue";

import {
      
  Tabbar,
  TabbarItem,
} from 'vant';
Vue.use(Tabbar).use(TabbarItem);


export default {
      
  name: "tabbar",
  data() {
      
    return {
      
      active: 0,
        num:this.$store.state.unReadCound,
      tabbars: [
        {
      
          name: "index",
          title: "雷达",
          normal:
            "http://sucai.suoluomei.cn/sucai_zs/images/20200325141846-%E9%9B%B7%E8%BE%BE.png",
          active:
            "http://sucai.suoluomei.cn/sucai_zs/images/20200325141846-%E9%9B%B7%E8%BE%BE2.png"
        },
        {
      
          name: "customer",
          title: "客户",
          normal:
            "http://sucai.suoluomei.cn/sucai_zs/images/20200324113335-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200324113316.png",
          active:
            "http://sucai.suoluomei.cn/sucai_zs/images/20200324113335-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200324113320.png"
        },
        {
      
          name: "poster",
          title: "抓",
          normal:
            "http://sucai.suoluomei.cn/sucai_zs/images/20200604173603-12.png",
          active:
            "http://sucai.suoluomei.cn/sucai_zs/images/20200604173603-12.png"
        },
        {
      
          name: "card",
          title: "消息",
          normal:
            "http://sucai.suoluomei.cn/sucai_zs/images/20200325141846-%E8%81%8A%E5%A4%A91.png",
          active:
            "http://sucai.suoluomei.cn/sucai_zs/images/20200325141846-%E8%81%8A%E5%A4%A92.png"
        },
        {
      
          name: "personal",
          title: "我的",
          normal:
            "http://sucai.suoluomei.cn/sucai_zs/images/20200316185840-%E6%88%91%E7%9A%841%402x.png",
          active:
            "http://sucai.suoluomei.cn/sucai_zs/images/20200316185841-%E6%88%91%E7%9A%842%402x.png"
        },
      ]
    };
  },
    watch: {
      
    getunReadCound(val) {
      
      console.log('我收哦')
      if (val == 0) {
      
        this.num = "";
      } else {
      
        this.num = val;
      }
    }
  },
  computed: {
      
    getunReadCound() {
      
      return this.$store.state.unReadCound;
    }
  },
  methods: {
      },
  //通过路由跳转判断选中的样式
  created() {
      
    if (this.$route.name == "index" ) {
      
      this.active = 0;
    } else if (this.$route.name == "customer") {
      
      this.active = 1;
    }else if (this.$route.name == "poster") {
      
      this.active = 2;
    }else if (this.$route.name == "card") {
      
      this.active = 3;
    }else if (this.$route.name == "personal") {
      
      this.active = 4;
    }
  }
};
script>

<style  scoped>

.tui{
      
  width: 100px;
  height: 100px;
  margin-top: -40px;
  z-index: 100000;
}
[class*=van-hairline]::after{
      
  border:none!important
}
style>