[Improvement] Icon add 'info' prop (#447)

docs/demos/views/icon.vue

@@ -2,7 +2,7 @@
   <demo-section>
     <demo-block :title="$t('title')">
       <van-col span="8" v-for="icon in icons" :key="icon">
-        <van-icon :name="icon"></van-icon>
+        <van-icon :name="icon" />
         <span>{{ icon }}</span>
       </van-col>
     </demo-block>

docs/markdown/en-US/icon.md

@@ -28,3 +28,4 @@ import 'vant/lib/vant-css/icon-local.css';
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | name | Icon name | `String` | `''` | - |
+| info | Info message | `String` | `''` | - |

docs/markdown/zh-CN/icon.md

@@ -28,4 +28,5 @@ import 'vant/lib/vant-css/icon-local.css';
 
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
-| name | icon名称 | `String` | `''` | - |
+| name | 图标名称 | `String` | `''` | - |
+| info | 图标右上角文字提示 | `String` | `''` | - |

packages/icon/index.vue

@@ -1,6 +1,7 @@
 <template>
   <i class="van-icon" :class="`van-icon-${name}`" v-on="$listeners">
     <slot></slot>
+    <div v-if="info" class="van-icon__info">{{ info }}</div>
   </i>
 </template>
 
@@ -11,7 +12,8 @@ export default {
   install,
   name: 'van-icon',
   props: {
-    name: String
+    name: String,
+    info: String
   }
 };
 </script>

packages/tabbar-item/index.vue

@@ -4,7 +4,7 @@
       <slot name="icon" :active="active">
         <icon v-if="icon" :name="icon" />
       </slot>
-      <div v-if="info" class="van-tabbar-item__info">{{ info }}</div>
+      <div v-if="info" class="van-icon__info">{{ info }}</div>
     </div>
     <div class="van-tabbar-item__text">
       <slot :active="active"></slot>
@@ -42,8 +42,9 @@ export default create({
   },
 
   methods: {
-    onClick() {
+    onClick(event) {
       this.$parent.onChange(this.$parent.items.indexOf(this));
+      this.$emit('click', event);
       this.routerLink();
     }
   }

packages/vant-css/scripts/icon-template.css

@@ -1,3 +1,5 @@
+@import './common/var.css';
+
 @font-face {
   font-style: normal;
   font-weight: normal;
@@ -11,6 +13,23 @@
   font-size: inherit;
   text-rendering: auto;
 
+  &__info {
+    color: #fff;
+    left: 50%;
+    top: -.5em;
+    font-size: .5em;
+    margin-left: .8em;
+    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;
+    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+  }
+
   &:before {
     display: inline-block;
   }

packages/vant-css/src/icon.css

@@ -1,3 +1,5 @@
+@import './common/var.css';
+
 @font-face {
   font-style: normal;
   font-weight: normal;
@@ -6,11 +8,29 @@
 }
 
 .van-icon {
+  position: relative;
   display: inline-block;
   font: normal normal normal 14px/1 "vant-icon";
   font-size: inherit;
   text-rendering: auto;
 
+  &__info {
+    color: #fff;
+    left: 50%;
+    top: -.5em;
+    font-size: .5em;
+    margin-left: .8em;
+    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;
+    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+  }
+
   &:before {
     display: inline-block;
   }

packages/vant-css/src/tabbar.css

@@ -49,22 +49,6 @@
       }
     }
 
-    &__info {
-      color: #fff;
-      top: -5px;
-      right: -100%;
-      font-size: 12px;
-      transform: scale(.8);
-      box-sizing: border-box;
-      padding: 0 3px;
-      text-align: center;
-      min-width: 18px;
-      line-height: 18px;
-      border-radius: 9px;
-      background-color: $red;
-      position: absolute;
-    }
-
     &--active {
       color: $blue;
     }