diff --git a/src/_common b/src/_common
index 41d40c788..f1adcf087 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 41d40c788e2793b7707ee1ca0719d3d66bba838d
+Subproject commit f1adcf087ce845e27c6cedbdeb044a57130b7e8e
diff --git a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
index 36ddb8ec1..fe6cd6b8f 100644
--- a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
@@ -71,7 +71,6 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -138,7 +137,6 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -205,7 +203,6 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -272,7 +269,6 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -339,7 +335,6 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -382,7 +377,6 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -462,10 +456,7 @@ exports[`Avatar > Avatar badgeAvatarVue demo works fine 1`] = `
           style="right: 4px; top: 4px;"
         >
           <!---->
-          
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
   </div>
@@ -497,11 +488,8 @@ exports[`Avatar > Avatar badgeAvatarVue demo works fine 1`] = `
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           style="right: 6px; top: 6px;"
         >
-          <!---->
           8
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
   </div>
@@ -544,11 +532,8 @@ exports[`Avatar > Avatar badgeAvatarVue demo works fine 1`] = `
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           style="right: 6px; top: 6px;"
         >
-          <!---->
           12
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
   </div>
@@ -585,7 +570,6 @@ exports[`Avatar > Avatar characterAvatarVue demo works fine 1`] = `
           
         </div>
         <!---->
-        <!---->
       </div>
     </div>
   </div>
@@ -614,7 +598,6 @@ exports[`Avatar > Avatar characterAvatarVue demo works fine 1`] = `
           
         </div>
         <!---->
-        <!---->
       </div>
     </div>
   </div>
@@ -693,7 +676,6 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -761,7 +743,6 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -829,7 +810,6 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -897,7 +877,6 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -965,7 +944,6 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -994,7 +972,6 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -1043,7 +1020,6 @@ exports[`Avatar > Avatar iconAvatarVue demo works fine 1`] = `
           
         </div>
         <!---->
-        <!---->
       </div>
     </div>
   </div>
@@ -1083,7 +1059,6 @@ exports[`Avatar > Avatar iconAvatarVue demo works fine 1`] = `
           
         </div>
         <!---->
-        <!---->
       </div>
     </div>
   </div>
@@ -1157,7 +1132,6 @@ exports[`Avatar > Avatar imageAvatarVue demo works fine 1`] = `
           
         </div>
         <!---->
-        <!---->
       </div>
     </div>
   </div>
@@ -1224,7 +1198,6 @@ exports[`Avatar > Avatar imageAvatarVue demo works fine 1`] = `
           
         </div>
         <!---->
-        <!---->
       </div>
     </div>
   </div>
@@ -1337,7 +1310,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 
               </div>
               <!---->
-              <!---->
             </div>
           </div>
         </div>
@@ -1404,7 +1376,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 
               </div>
               <!---->
-              <!---->
             </div>
           </div>
         </div>
@@ -1460,7 +1431,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 
               </div>
               <!---->
-              <!---->
             </div>
           </div>
         </div>
@@ -1489,7 +1459,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 
               </div>
               <!---->
-              <!---->
             </div>
           </div>
         </div>
@@ -1555,7 +1524,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 
               </div>
               <!---->
-              <!---->
             </div>
           </div>
         </div>
@@ -1595,7 +1563,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 
               </div>
               <!---->
-              <!---->
             </div>
           </div>
         </div>
@@ -1697,7 +1664,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -1765,7 +1731,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -1833,7 +1798,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -1901,7 +1865,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -1969,7 +1932,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -1998,7 +1960,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2097,7 +2058,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2164,7 +2124,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2231,7 +2190,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2298,7 +2256,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2365,7 +2322,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2408,7 +2364,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2507,10 +2462,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 style="right: 4px; top: 4px;"
               >
                 <!---->
-                
-                <!---->
               </div>
-              <!---->
             </div>
           </div>
         </div>
@@ -2542,11 +2494,8 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 style="right: 6px; top: 6px;"
               >
-                <!---->
                 8
-                <!---->
               </div>
-              <!---->
             </div>
           </div>
         </div>
@@ -2589,11 +2538,8 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 style="right: 6px; top: 6px;"
               >
-                <!---->
                 12
-                <!---->
               </div>
-              <!---->
             </div>
           </div>
         </div>
@@ -2695,11 +2641,8 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 <div
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 >
-                  <!---->
                   10
-                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
           </div>
@@ -2728,7 +2671,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2768,7 +2710,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2841,11 +2782,8 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 <div
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 >
-                  <!---->
                   10
-                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
           </div>
@@ -2874,7 +2812,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2914,7 +2851,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -2988,10 +2924,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
                 >
                   <!---->
-                  
-                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
           </div>
@@ -3020,7 +2953,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -3060,7 +2992,6 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -3144,11 +3075,8 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
           <div
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           >
-            <!---->
             10
-            <!---->
           </div>
-          <!---->
         </div>
       </div>
     </div>
@@ -3177,7 +3105,6 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -3217,7 +3144,6 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -3290,11 +3216,8 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
           <div
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           >
-            <!---->
             10
-            <!---->
           </div>
-          <!---->
         </div>
       </div>
     </div>
@@ -3323,7 +3246,6 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -3363,7 +3285,6 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -3437,10 +3358,7 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
           >
             <!---->
-            
-            <!---->
           </div>
-          <!---->
         </div>
       </div>
     </div>
@@ -3469,7 +3387,6 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
@@ -3509,7 +3426,6 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             
           </div>
           <!---->
-          <!---->
         </div>
       </div>
     </div>
diff --git a/src/badge/__test__/__snapshots__/demo.test.jsx.snap b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
index 83ac3773a..3f3eaa9cd 100644
--- a/src/badge/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
@@ -27,10 +27,7 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         style="right: -4px; top: 4px;"
       >
         <!---->
-        
-        <!---->
       </div>
-      <!---->
     </div>
     <div
       class="t-badge badge-item"
@@ -54,10 +51,7 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         style="right: 1px; top: -1px;"
       >
         <!---->
-        
-        <!---->
       </div>
-      <!---->
     </div>
     <div
       class="t-badge badge-item"
@@ -89,10 +83,7 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         style="right: 1px; top: 1px;"
       >
         <!---->
-        
-        <!---->
       </div>
-      <!---->
     </div>
   </div>
   <div
@@ -119,11 +110,8 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         style="right: -8px; top: 0px;"
       >
-        <!---->
         8
-        <!---->
       </div>
-      <!---->
     </div>
     <div
       class="t-badge badge-item"
@@ -146,11 +134,8 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         style="right: -2px; top: -2px;"
       >
-        <!---->
         2
-        <!---->
       </div>
-      <!---->
     </div>
     <div
       class="t-badge badge-item"
@@ -181,11 +166,8 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         style="right: 2px; top: 2px;"
       >
-        <!---->
         8
-        <!---->
       </div>
-      <!---->
     </div>
   </div>
   <div
@@ -236,11 +218,8 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         style="right: 0px; top: 2px;"
       >
-        <!---->
         NEW
-        <!---->
       </div>
-      <!---->
     </div>
   </div>
 </div>
@@ -303,10 +282,7 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               style="right: -4px; top: 4px;"
             >
               <!---->
-              
-              <!---->
             </div>
-            <!---->
           </div>
           <div
             class="t-badge badge-item"
@@ -330,10 +306,7 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               style="right: 1px; top: -1px;"
             >
               <!---->
-              
-              <!---->
             </div>
-            <!---->
           </div>
           <div
             class="t-badge badge-item"
@@ -365,10 +338,7 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               style="right: 1px; top: 1px;"
             >
               <!---->
-              
-              <!---->
             </div>
-            <!---->
           </div>
         </div>
         <div
@@ -395,11 +365,8 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               style="right: -8px; top: 0px;"
             >
-              <!---->
               8
-              <!---->
             </div>
-            <!---->
           </div>
           <div
             class="t-badge badge-item"
@@ -422,11 +389,8 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               style="right: -2px; top: -2px;"
             >
-              <!---->
               2
-              <!---->
             </div>
-            <!---->
           </div>
           <div
             class="t-badge badge-item"
@@ -457,11 +421,8 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               style="right: 2px; top: 2px;"
             >
-              <!---->
               8
-              <!---->
             </div>
-            <!---->
           </div>
         </div>
         <div
@@ -512,11 +473,8 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               style="right: 0px; top: 2px;"
             >
-              <!---->
               NEW
-              <!---->
             </div>
-            <!---->
           </div>
         </div>
       </div>
@@ -570,11 +528,8 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               style="right: -2px; top: -2px;"
             >
-              <!---->
               2
-              <!---->
             </div>
-            <!---->
           </div>
         </div>
         <div
@@ -606,11 +561,8 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count"
               style="right: -2px; top: -2px;"
             >
-              <!---->
               2
-              <!---->
             </div>
-            <!---->
           </div>
         </div>
         <div
@@ -660,11 +612,8 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
             <div
               class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count"
             >
-              <!---->
               领积分
-              <!---->
             </div>
-            <!---->
           </div>
         </div>
         <div
@@ -705,17 +654,8 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
                 class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count"
                 style="right: 0px; top: 0px;"
               >
-                <div
-                  class="t-badge__ribbon--before"
-                  style=""
-                />
                 New
-                <div
-                  class="t-badge__ribbon--after"
-                  style=""
-                />
               </div>
-              <!---->
             </div>
             
           </div>
@@ -790,11 +730,8 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count"
                   style="right: 7px; top: 7px;"
                 >
-                  <!---->
                   8
-                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
           </div>
@@ -846,11 +783,8 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                   style="right: 5px; top: 5px;"
                 >
-                  <!---->
                   8
-                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
           </div>
@@ -911,11 +845,8 @@ exports[`Badge > Badge sizeVue demo works fine 1`] = `
             class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count"
             style="right: 7px; top: 7px;"
           >
-            <!---->
             8
-            <!---->
           </div>
-          <!---->
         </div>
       </div>
     </div>
@@ -967,11 +898,8 @@ exports[`Badge > Badge sizeVue demo works fine 1`] = `
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
             style="right: 5px; top: 5px;"
           >
-            <!---->
             8
-            <!---->
           </div>
-          <!---->
         </div>
       </div>
     </div>
@@ -1010,11 +938,8 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         style="right: -2px; top: -2px;"
       >
-        <!---->
         2
-        <!---->
       </div>
-      <!---->
     </div>
   </div>
   <div
@@ -1046,11 +971,8 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count"
         style="right: -2px; top: -2px;"
       >
-        <!---->
         2
-        <!---->
       </div>
-      <!---->
     </div>
   </div>
   <div
@@ -1100,11 +1022,8 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
       <div
         class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count"
       >
-        <!---->
         领积分
-        <!---->
       </div>
-      <!---->
     </div>
   </div>
   <div
@@ -1145,17 +1064,8 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
           class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count"
           style="right: 0px; top: 0px;"
         >
-          <div
-            class="t-badge__ribbon--before"
-            style=""
-          />
           New
-          <div
-            class="t-badge__ribbon--after"
-            style=""
-          />
         </div>
-        <!---->
       </div>
       
     </div>
diff --git a/src/badge/badge.tsx b/src/badge/badge.tsx
index 04e5bf347..7a6c948c5 100644
--- a/src/badge/badge.tsx
+++ b/src/badge/badge.tsx
@@ -1,4 +1,6 @@
 import { defineComponent, computed } from 'vue';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
 import config from '../config';
 import BadgeProps from './props';
 import { usePrefixClass } from '../hooks/useClass';
@@ -68,22 +70,14 @@ export default defineComponent({
       };
     });
 
-    const badgeValue = computed(() => {
-      if (props.dot) {
-        return '';
-      }
-      const count = Number(props.count);
-      if (isNaN(count) || isNaN(props.maxCount)) {
-        return props.count;
-      }
-      return count > props.maxCount ? `${props.maxCount}+` : count;
-    });
-
     return () => {
       const readerCount = () => {
-        const countType = typeof props.count;
-        if (countType === 'string' || countType === 'number') {
-          return null;
+        if (props.dot) return null;
+        if (isString(props.count) || isNumber(props.count)) {
+          if (props.count === 0) {
+            return props.showZero ? props.count : null;
+          }
+          return Number(props.count) > Number(props.maxCount) ? `${props.maxCount}+` : props.count;
         }
         return renderTNodeJSX('count');
       };
@@ -94,26 +88,6 @@ export default defineComponent({
         }
         return content;
       };
-      const readerRibbonBefore = () => {
-        if (props.shape !== 'ribbon') {
-          return null;
-        }
-        return (
-          <div
-            class={`${badgeClass.value}__ribbon--before`}
-            style={props.color ? `border-color: ${props.color}` : ''}
-          />
-        );
-      };
-
-      const readerRibbonAfter = () => {
-        if (props.shape !== 'ribbon') {
-          return null;
-        }
-        return (
-          <div class={`${badgeClass.value}__ribbon--after`} style={props.color ? `border-color: ${props.color}` : ''} />
-        );
-      };
 
       const readerBadge = () => {
         if (!isShowBadge.value) {
@@ -121,9 +95,7 @@ export default defineComponent({
         }
         return (
           <div class={badgeInnerClasses.value} style={badgeStyles.value}>
-            {readerRibbonBefore()}
-            {badgeValue.value}
-            {readerRibbonAfter()}
+            {readerCount()}
           </div>
         );
       };
@@ -131,7 +103,6 @@ export default defineComponent({
         <div class={badgeClasses.value}>
           <div class={`${badgeClass.value}__content`}>{readerContent()}</div>
           {readerBadge()}
-          {readerCount()}
         </div>
       );
     };
diff --git a/src/cell/__test__/__snapshots__/demo.test.jsx.snap b/src/cell/__test__/__snapshots__/demo.test.jsx.snap
index de62178fc..cfa958049 100644
--- a/src/cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -331,11 +331,8 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
                 <div
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 >
-                  <!---->
                   16
-                  <!---->
                 </div>
-                <!---->
               </div>
               
             </div>
@@ -649,11 +646,8 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
                 <div
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 >
-                  <!---->
                   16
-                  <!---->
                 </div>
-                <!---->
               </div>
               
             </div>
@@ -945,7 +939,6 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
                         
                       </div>
                       <!---->
-                      <!---->
                     </div>
                   </div>
                 </div>
@@ -1348,11 +1341,8 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
           <div
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           >
-            <!---->
             16
-            <!---->
           </div>
-          <!---->
         </div>
         
       </div>
@@ -1644,7 +1634,6 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
                   
                 </div>
                 <!---->
-                <!---->
               </div>
             </div>
           </div>
@@ -1834,11 +1823,8 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
           <div
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           >
-            <!---->
             16
-            <!---->
           </div>
-          <!---->
         </div>
         
       </div>
diff --git a/src/grid/__test__/__snapshots__/demo.test.jsx.snap b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
index af8725880..b918ffb43 100644
--- a/src/grid/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
@@ -69,10 +69,7 @@ exports[`Grid > Grid badgeVue demo works fine 1`] = `
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         >
           <!---->
-          
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -152,11 +149,8 @@ exports[`Grid > Grid badgeVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!---->
           8
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -236,11 +230,8 @@ exports[`Grid > Grid badgeVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!---->
           13
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -320,11 +311,8 @@ exports[`Grid > Grid badgeVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!---->
           NEW
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -4618,10 +4606,7 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
                 class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
               >
                 <!---->
-                
-                <!---->
               </div>
-              <!---->
             </div>
           </div>
           <div
@@ -4701,11 +4686,8 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
               <div
                 class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               >
-                <!---->
                 8
-                <!---->
               </div>
-              <!---->
             </div>
           </div>
           <div
@@ -4785,11 +4767,8 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
               <div
                 class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               >
-                <!---->
                 13
-                <!---->
               </div>
-              <!---->
             </div>
           </div>
           <div
@@ -4869,11 +4848,8 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
               <div
                 class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               >
-                <!---->
                 NEW
-                <!---->
               </div>
-              <!---->
             </div>
           </div>
           <div
diff --git a/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap
index 5cb35f2ca..72cdd29dc 100644
--- a/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap
@@ -30,7 +30,6 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     <div
@@ -65,10 +64,7 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = `
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         >
           <!---->
-          
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -90,7 +86,6 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     <div
@@ -114,11 +109,8 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!---->
           6
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -140,7 +132,6 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     
@@ -3107,7 +3098,6 @@ exports[`SideBar > SideBar customVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     <div
@@ -3142,10 +3132,7 @@ exports[`SideBar > SideBar customVue demo works fine 1`] = `
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         >
           <!---->
-          
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -3167,7 +3154,6 @@ exports[`SideBar > SideBar customVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     <div
@@ -3191,11 +3177,8 @@ exports[`SideBar > SideBar customVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!---->
           6
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -3217,7 +3200,6 @@ exports[`SideBar > SideBar customVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     
@@ -6333,7 +6315,6 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     <div
@@ -6368,10 +6349,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         >
           <!---->
-          
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -6393,7 +6371,6 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     <div
@@ -6417,11 +6394,8 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!---->
           6
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -6443,7 +6417,6 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     
@@ -9265,7 +9238,6 @@ exports[`SideBar > SideBar withIconVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     <div
@@ -9316,10 +9288,7 @@ exports[`SideBar > SideBar withIconVue demo works fine 1`] = `
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         >
           <!---->
-          
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -9357,7 +9326,6 @@ exports[`SideBar > SideBar withIconVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     <div
@@ -9397,11 +9365,8 @@ exports[`SideBar > SideBar withIconVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!---->
           6
-          <!---->
         </div>
-        <!---->
       </div>
     </div>
     <div
@@ -9439,7 +9404,6 @@ exports[`SideBar > SideBar withIconVue demo works fine 1`] = `
           </span>
         </div>
         <!---->
-        <!---->
       </div>
     </div>
     
diff --git a/src/tab-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/tab-bar/__test__/__snapshots__/demo.test.jsx.snap
index ac26644ca..4c604c586 100644
--- a/src/tab-bar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/tab-bar/__test__/__snapshots__/demo.test.jsx.snap
@@ -44,11 +44,8 @@ exports[`TabBar > TabBar badgePropsVue demo works fine 1`] = `
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
             style="right: 0px; top: 0px;"
           >
-            <!---->
             16
-            <!---->
           </div>
-          <!---->
         </div>
       </div>
       <div
@@ -100,10 +97,7 @@ exports[`TabBar > TabBar badgePropsVue demo works fine 1`] = `
             style="right: 0px; top: 0px;"
           >
             <!---->
-            
-            <!---->
           </div>
-          <!---->
         </div>
       </div>
       <div
@@ -154,11 +148,8 @@ exports[`TabBar > TabBar badgePropsVue demo works fine 1`] = `
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
             style="right: 0px; top: 0px;"
           >
-            <!---->
             New
-            <!---->
           </div>
-          <!---->
         </div>
       </div>
       <div
@@ -209,11 +200,8 @@ exports[`TabBar > TabBar badgePropsVue demo works fine 1`] = `
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
             style="right: 0px; top: 0px;"
           >
-            <!---->
             ···
-            <!---->
           </div>
-          <!---->
         </div>
       </div>
       <div
@@ -1178,11 +1166,8 @@ exports[`TabBar > TabBar mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                   style="right: 0px; top: 0px;"
                 >
-                  <!---->
                   16
-                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
             <div
@@ -1234,10 +1219,7 @@ exports[`TabBar > TabBar mobileVue demo works fine 1`] = `
                   style="right: 0px; top: 0px;"
                 >
                   <!---->
-                  
-                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
             <div
@@ -1288,11 +1270,8 @@ exports[`TabBar > TabBar mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                   style="right: 0px; top: 0px;"
                 >
-                  <!---->
                   New
-                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
             <div
@@ -1343,11 +1322,8 @@ exports[`TabBar > TabBar mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                   style="right: 0px; top: 0px;"
                 >
-                  <!---->
                   ···
-                  <!---->
                 </div>
-                <!---->
               </div>
             </div>
             <div
diff --git a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
index fcba3d5b2..ff62ff258 100644
--- a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
@@ -52,10 +52,7 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                     style="right: -4px; top: 1px;"
                   >
                     <!---->
-                    
-                    <!---->
                   </div>
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -83,11 +80,8 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                     class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                     style="right: -8px; top: 3px;"
                   >
-                    <!---->
                     8
-                    <!---->
                   </div>
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -112,7 +106,6 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -193,7 +186,6 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -218,7 +210,6 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -243,7 +234,6 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -336,7 +326,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -361,7 +350,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -433,7 +421,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -458,7 +445,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -483,7 +469,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -556,7 +541,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -581,7 +565,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -606,7 +589,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -631,7 +613,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -707,7 +688,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -732,7 +712,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -757,7 +736,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -782,7 +760,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -807,7 +784,6 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -905,7 +881,6 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -943,7 +918,6 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -981,7 +955,6 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -1062,7 +1035,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -1087,7 +1059,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -1112,7 +1083,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -1137,7 +1107,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -1162,7 +1131,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -1187,7 +1155,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -1212,7 +1179,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -1237,7 +1203,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -1262,7 +1227,6 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -1372,7 +1336,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1397,7 +1360,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1469,7 +1431,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1494,7 +1455,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1519,7 +1479,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1592,7 +1551,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1617,7 +1575,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1642,7 +1599,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1667,7 +1623,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1743,7 +1698,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1768,7 +1722,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1793,7 +1746,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1818,7 +1770,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1843,7 +1794,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1945,7 +1895,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1970,7 +1919,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -1995,7 +1943,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2020,7 +1967,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2045,7 +1991,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2070,7 +2015,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2095,7 +2039,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2120,7 +2063,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2145,7 +2087,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2247,7 +2188,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2285,7 +2225,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2323,7 +2262,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2425,10 +2363,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           style="right: -4px; top: 1px;"
                         >
                           <!---->
-                          
-                          <!---->
                         </div>
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2456,11 +2391,8 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                           style="right: -8px; top: 3px;"
                         >
-                          <!---->
                           8
-                          <!---->
                         </div>
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2485,7 +2417,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2583,7 +2514,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2608,7 +2538,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2633,7 +2562,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2743,7 +2671,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2768,7 +2695,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2793,7 +2719,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2895,7 +2820,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2920,7 +2844,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2945,7 +2868,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -2970,7 +2892,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3046,7 +2967,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3071,7 +2991,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3096,7 +3015,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3121,7 +3039,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3222,7 +3139,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3247,7 +3163,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3272,7 +3187,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3297,7 +3211,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3371,7 +3284,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3396,7 +3308,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <div
@@ -3423,7 +3334,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3448,7 +3358,6 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           
                         </div>
                         <!---->
-                        <!---->
                       </div>
                       <!---->
                       <!---->
@@ -3534,7 +3443,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3559,7 +3467,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3584,7 +3491,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3609,7 +3515,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3685,7 +3590,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3710,7 +3614,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3735,7 +3638,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3760,7 +3662,6 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3844,7 +3745,6 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3869,7 +3769,6 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3894,7 +3793,6 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -3975,7 +3873,6 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -4000,7 +3897,6 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -4025,7 +3921,6 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -4050,7 +3945,6 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -4124,7 +4018,6 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -4149,7 +4042,6 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <div
@@ -4176,7 +4068,6 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->
@@ -4201,7 +4092,6 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     
                   </div>
                   <!---->
-                  <!---->
                 </div>
                 <!---->
                 <!---->