From 30b3fad696a451ddfdfe8eb6e70076e4a279a814 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 27 Aug 2018 21:06:18 +0800
Subject: [PATCH] [bugfix] Tabbar: info not work when use icon slot (#1705)

---
 packages/badge/index.vue                      |  7 ++++++-
 .../test/__snapshots__/demo.spec.js.snap      |  6 +++---
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 packages/icon/config/template.css             | 17 ---------------
 packages/icon/index.vue                       |  7 ++++++-
 packages/info/index.vue                       | 15 +++++++++++++
 packages/tabbar-item/index.vue                |  8 ++++++-
 packages/tabbar/demo/index.vue                |  2 +-
 packages/tabbar/en-US.md                      |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      | 11 ++++++++--
 packages/tabbar/zh-CN.md                      |  2 +-
 packages/vant-css/src/badge.css               | 21 +++++++------------
 packages/vant-css/src/base.css                |  1 +
 packages/vant-css/src/icon.css                | 17 ---------------
 packages/vant-css/src/info.css                | 18 ++++++++++++++++
 packages/vant-css/src/tabbar.css              |  3 ++-
 16 files changed, 78 insertions(+), 61 deletions(-)
 create mode 100644 packages/info/index.vue
 create mode 100644 packages/vant-css/src/info.css

diff --git a/packages/badge/index.vue b/packages/badge/index.vue
index b8455066b..8d1a55220 100644
--- a/packages/badge/index.vue
+++ b/packages/badge/index.vue
@@ -4,17 +4,22 @@
     :href="url"
     @click="onClick"
   >
-    <div v-if="isDef(info)" :class="b('info')">{{ info }}</div>
+    <van-info :info="info" :class="b('info')" />
     {{ title }}
   </a>
 </template>
 
 <script>
+import Info from '../info';
 import create from '../utils/create';
 
 export default create({
   name: 'badge',
 
+  components: {
+    [Info.name]: Info
+  },
+
   props: {
     url: String,
     info: [String, Number],
diff --git a/packages/badge/test/__snapshots__/demo.spec.js.snap b/packages/badge/test/__snapshots__/demo.spec.js.snap
index 061ad756e..a1af6b967 100644
--- a/packages/badge/test/__snapshots__/demo.spec.js.snap
+++ b/packages/badge/test/__snapshots__/demo.spec.js.snap
@@ -9,15 +9,15 @@ exports[`renders demo correctly 1`] = `
         标签名称
       </a>
       <a class="van-badge van-hairline">
-        <div class="van-badge__info">8</div>
+        <div class="van-info van-badge__info">8</div>
         标签名称
       </a>
       <a class="van-badge van-hairline">
-        <div class="van-badge__info">99</div>
+        <div class="van-info van-badge__info">99</div>
         标签名称
       </a>
       <a class="van-badge van-hairline">
-        <div class="van-badge__info">199</div>
+        <div class="van-info van-badge__info">199</div>
         标签名称
       </a>
     </div>
diff --git a/packages/goods-action/test/__snapshots__/demo.spec.js.snap b/packages/goods-action/test/__snapshots__/demo.spec.js.snap
index d62f2138f..986b62bc9 100644
--- a/packages/goods-action/test/__snapshots__/demo.spec.js.snap
+++ b/packages/goods-action/test/__snapshots__/demo.spec.js.snap
@@ -26,7 +26,7 @@ exports[`renders demo correctly 1`] = `
         </i> 客服</a>
       <a class="van-hairline van-goods-action-mini-btn">
         <i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
-          <div class="van-icon__info">5</div>
+          <div class="van-info">5</div>
         </i> 购物车</a>
       <a class="van-hairline van-goods-action-mini-btn">
         <i class="van-icon van-icon-shop van-goods-action-mini-btn__icon" style="color:undefined;font-size:undefined;">
diff --git a/packages/icon/config/template.css b/packages/icon/config/template.css
index f05681277..bc5e264fb 100644
--- a/packages/icon/config/template.css
+++ b/packages/icon/config/template.css
@@ -14,23 +14,6 @@
   font-size: inherit;
   text-rendering: auto;
 
-  &__info {
-    color: #fff;
-    left: 100%;
-    top: -.5em;
-    font-size: .5em;
-    padding: 0 .3em;
-    text-align: center;
-    min-width: 1.2em;
-    line-height: 1.2;
-    position: absolute;
-    border-radius: .6em;
-    box-sizing: border-box;
-    background-color: $red;
-    transform: translateX(-50%);
-    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
-  }
-
   &::before {
     display: inline-block;
   }
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index 10efee8a0..35aec7e11 100644
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@@ -1,16 +1,21 @@
 <template>
   <i :class="[classPrefix, `${classPrefix}-${name}`]" :style="style" v-on="$listeners">
     <slot />
-    <div v-if="isDef(info)" :class="b('info')">{{ info }}</div>
+    <van-info :info="info" />
   </i>
 </template>
 
 <script>
+import Info from '../info';
 import create from '../utils/create-basic';
 
 export default create({
   name: 'icon',
 
+  components: {
+    [Info.name]: Info
+  },
+
   props: {
     name: String,
     info: [String, Number],
diff --git a/packages/info/index.vue b/packages/info/index.vue
new file mode 100644
index 000000000..26e3cbbf0
--- /dev/null
+++ b/packages/info/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div v-if="isDef(info)" :class="b()">{{ info }}</div>
+</template>
+
+<script>
+import create from '../utils/create-basic';
+
+export default create({
+  name: 'info',
+
+  props: {
+    info: [String, Number]
+  }
+});
+</script>
diff --git a/packages/tabbar-item/index.vue b/packages/tabbar-item/index.vue
index a1bac34ab..a11dccbe7 100644
--- a/packages/tabbar-item/index.vue
+++ b/packages/tabbar-item/index.vue
@@ -2,8 +2,9 @@
   <div :class="b({ active })" @click="onClick">
     <div :class="b('icon', { dot })">
       <slot name="icon" :active="active">
-        <icon v-if="icon" :name="icon" :info="info" />
+        <icon v-if="icon" :name="icon" />
       </slot>
+      <van-info :info="info" />
     </div>
     <div :class="b('text')">
       <slot :active="active"/>
@@ -12,12 +13,17 @@
 </template>
 
 <script>
+import Info from '../info';
 import create from '../utils/create';
 import RouterLink from '../mixins/router-link';
 
 export default create({
   name: 'tabbar-item',
 
+  components: {
+    [Info.name]: Info
+  },
+
   mixins: [RouterLink],
 
   props: {
diff --git a/packages/tabbar/demo/index.vue b/packages/tabbar/demo/index.vue
index 4be8700c0..676bc22dc 100644
--- a/packages/tabbar/demo/index.vue
+++ b/packages/tabbar/demo/index.vue
@@ -11,7 +11,7 @@
 
     <demo-block :title="$t('title2')">
       <van-tabbar v-model="active2">
-        <van-tabbar-item icon="shop">
+        <van-tabbar-item info="3">
           <span>{{ $t('custom') }}</span>
           <img
             slot="icon"
diff --git a/packages/tabbar/en-US.md b/packages/tabbar/en-US.md
index 44fca3e66..2c3c3fe45 100644
--- a/packages/tabbar/en-US.md
+++ b/packages/tabbar/en-US.md
@@ -35,7 +35,7 @@ Use `icon` slot to custom icon
 
 ```html
 <van-tabbar v-model="active">
-  <van-tabbar-item icon="shop">
+  <van-tabbar-item info="3">
     <span>Custom</span>
     <img
       slot="icon"
diff --git a/packages/tabbar/test/__snapshots__/demo.spec.js.snap b/packages/tabbar/test/__snapshots__/demo.spec.js.snap
index 2dfef8d4a..83c2bb1c1 100644
--- a/packages/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -9,6 +9,7 @@ exports[`renders demo correctly 1`] = `
           <i class="van-icon van-icon-shop" style="color:undefined;font-size:undefined;">
             <!---->
           </i>
+          <!---->
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
@@ -17,22 +18,25 @@ exports[`renders demo correctly 1`] = `
           <i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;">
             <!---->
           </i>
+          <!---->
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon">
           <i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;">
-            <div class="van-icon__info">5</div>
+            <!---->
           </i>
+          <div class="van-info">5</div>
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon">
           <i class="van-icon van-icon-gold-coin" style="color:undefined;font-size:undefined;">
-            <div class="van-icon__info">20</div>
+            <!---->
           </i>
+          <div class="van-info">20</div>
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
@@ -43,6 +47,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon">
           <img src="https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png">
+          <div class="van-info">3</div>
         </div>
         <div class="van-tabbar-item__text"><span>自定义</span></div>
       </div>
@@ -51,6 +56,7 @@ exports[`renders demo correctly 1`] = `
           <i class="van-icon van-icon-chat" style="color:undefined;font-size:undefined;">
             <!---->
           </i>
+          <!---->
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
@@ -59,6 +65,7 @@ exports[`renders demo correctly 1`] = `
           <i class="van-icon van-icon-records" style="color:undefined;font-size:undefined;">
             <!---->
           </i>
+          <!---->
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
diff --git a/packages/tabbar/zh-CN.md b/packages/tabbar/zh-CN.md
index a14d8c9db..0e291f767 100644
--- a/packages/tabbar/zh-CN.md
+++ b/packages/tabbar/zh-CN.md
@@ -37,7 +37,7 @@ export default {
 
 ```html
 <van-tabbar v-model="active">
-  <van-tabbar-item icon="shop">
+  <van-tabbar-item info="3">
     <span>自定义</span>
     <img
       slot="icon"
diff --git a/packages/vant-css/src/badge.css b/packages/vant-css/src/badge.css
index f92067abc..db0c071f1 100644
--- a/packages/vant-css/src/badge.css
+++ b/packages/vant-css/src/badge.css
@@ -41,19 +41,12 @@
   }
 
   &__info {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    color: $white;
-    font-size: 10px;
-    font-weight: normal;
-    transform: scale(0.8);
-    text-align: center;
-    box-sizing: border-box;
-    padding: 0 6px;
-    min-width: 18px;
-    line-height: 18px;
-    border-radius: 9px;
-    background-color: $red;
+    left: auto;
+    top: 4px;
+    right: 4px;
+    font-size: 12px;
+    min-width: 1.5em;
+    line-height: 1.5em;
+    transform: scale(0.7);
   }
 }
diff --git a/packages/vant-css/src/base.css b/packages/vant-css/src/base.css
index 1a389c4db..5aa7f28b1 100644
--- a/packages/vant-css/src/base.css
+++ b/packages/vant-css/src/base.css
@@ -8,6 +8,7 @@
 @import "./common/clearfix.css";
 @import "./common/hairline.css";
 @import "./common/animation.css";
+@import './info.css';
 @import './icon.css';
 @import './loading.css';
 @import './button.css';
diff --git a/packages/vant-css/src/icon.css b/packages/vant-css/src/icon.css
index 3e7ca4f7b..bf1a085f6 100644
--- a/packages/vant-css/src/icon.css
+++ b/packages/vant-css/src/icon.css
@@ -14,23 +14,6 @@
   font-size: inherit;
   text-rendering: auto;
 
-  &__info {
-    color: #fff;
-    left: 100%;
-    top: -.5em;
-    font-size: .5em;
-    padding: 0 .3em;
-    text-align: center;
-    min-width: 1.2em;
-    line-height: 1.2;
-    position: absolute;
-    border-radius: .6em;
-    box-sizing: border-box;
-    background-color: $red;
-    transform: translateX(-50%);
-    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
-  }
-
   &::before {
     display: inline-block;
   }
diff --git a/packages/vant-css/src/info.css b/packages/vant-css/src/info.css
new file mode 100644
index 000000000..3a6038f8a
--- /dev/null
+++ b/packages/vant-css/src/info.css
@@ -0,0 +1,18 @@
+@import './common/var.css';
+
+.van-info {
+  color: #fff;
+  left: 100%;
+  top: -.5em;
+  font-size: .5em;
+  padding: 0 .3em;
+  text-align: center;
+  min-width: 1.2em;
+  line-height: 1.2;
+  position: absolute;
+  border-radius: .6em;
+  box-sizing: border-box;
+  background-color: $red;
+  transform: translateX(-50%);
+  font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+}
diff --git a/packages/vant-css/src/tabbar.css b/packages/vant-css/src/tabbar.css
index 8551a4955..ec8194c7c 100644
--- a/packages/vant-css/src/tabbar.css
+++ b/packages/vant-css/src/tabbar.css
@@ -24,8 +24,8 @@
 
     &__icon {
       font-size: 18px;
-      margin-bottom: 5px;
       position: relative;
+      margin-bottom: 5px;
 
       .van-icon {
         display: block;
@@ -46,6 +46,7 @@
 
       img {
         height: 18px;
+        display: block;
       }
     }