tabbar num

src/components/Tabbar/index.vue

@@ -13,12 +13,14 @@
       :to="item.to"
     >
       <template #icon="props">
-        <img
-          :src="getImageUrl(props.active ? item.iconActive : item.icon)"
-          alt=""
-        />
+        <van-badge :content="item.num" max="99" :show-zero="false">
+          <img
+            :src="getImageUrl(props.active ? item.iconActive : item.icon)"
+            alt=""
+          />
+        </van-badge>
       </template>
-      {{ item.title }}
+        <div>{{ item.title }}</div>
     </van-tabbar-item>
   </van-tabbar>
 </template>
@@ -39,6 +41,7 @@ watch(
           icon: "index",
           iconActive: "indexActive",
           title: "首页",
+          num: '0',
           to: {
             name: "LeaderIndex"
           }
@@ -47,6 +50,7 @@ watch(
           icon: "command",
           iconActive: "commandActive",
           title: "移动指挥",
+          num: '0',
           to: {
             name: "MobileControl"
           }
@@ -55,6 +59,7 @@ watch(
           icon: "threepro",
           iconActive: "threeproActive",
           title: "三防责任人",
+          num: '0',
           to: {
             name: "ThreePreventionResponsiblePerson"
           }
@@ -82,6 +87,7 @@ watch(
           icon: "index",
           iconActive: "indexActive",
           title: "首页",
+          num: '0',
           to: {
             name: "WorkerIndex"
           }
@@ -89,6 +95,7 @@ watch(
         {
           icon: "command",
           iconActive: "commandActive",
+          num: '0',
           title: "事件管理",
           to: {
             name: "workerEvent"
@@ -97,6 +104,7 @@ watch(
         {
           icon: "contact",
           iconActive: "contactActive",
+          num: '0',
           title: "值班管理",
           to: {
             name: "Duty"
@@ -150,5 +158,13 @@ onMounted(() => {
   :deep(.van-tabbar-item) {
     height: 55px !important;
   }
+  :deep(.van-tabbar-item__icon) {
+    .van-badge {
+      margin-top: 0;
+    }
+    .van-badge--top-right {
+      top: 7px
+    }
+  }
 }
 </style>