From a6fea1bc6f9db93cf1596d6903f693d8fe1ab8d0 Mon Sep 17 00:00:00 2001
From: ShuaiKang Zhang <zhangshuaikang_zsk@youzan.com>
Date: Thu, 19 Sep 2019 17:46:42 +0800
Subject: [PATCH] feat(Icon): add dot prop (#2063)

---
 packages/common/style/var.less | 2 ++
 packages/icon/README.md        | 8 ++++++--
 packages/icon/index.ts         | 1 +
 packages/icon/index.wxml       | 3 ++-
 packages/info/index.less       | 8 ++++++++
 packages/info/index.ts         | 1 +
 packages/info/index.wxml       | 8 +++++---
 7 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 35b31265..05d0b794 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -87,6 +87,8 @@
 @info-font-weight: 500;
 @info-border-width: 1px;
 @info-background-color: @red;
+@info-dot-color: @red;
+@info-dot-size: 8px;
 @info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
 
 // NavBar
diff --git a/packages/icon/README.md b/packages/icon/README.md
index b2443048..b2eeb16c 100644
--- a/packages/icon/README.md
+++ b/packages/icon/README.md
@@ -25,9 +25,12 @@
 <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
 ```
 
-### 显示徽标
+### 提示信息
 
- ```html
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
+
+```html
+<van-icon name="chat" dot />
 <van-icon name="chat" info="9" />
 <van-icon name="chat" info="99+" />
 ```
@@ -39,6 +42,7 @@
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |-----------|-----------|-----------|-------------|-------------|
 | name | 图标名称或图片链接 | *string* | - | - |
+| dot | 是否显示图标右上角小红点 | *boolean* | `false` | - |
 | info | 图标右上角文字提示 | *string \| number* | - | - |
 | color | 图标颜色 | *string* | `inherit` | - |
 | size | 图标大小，如 `20px`，`2em`，默认单位为`px` | *string \| number* | `inherit` | - |
diff --git a/packages/icon/index.ts b/packages/icon/index.ts
index ef515ac9..1878549c 100644
--- a/packages/icon/index.ts
+++ b/packages/icon/index.ts
@@ -3,6 +3,7 @@ import { addUnit } from '../common/utils';
 
 VantComponent({
   props: {
+    dot: Boolean,
     info: null,
     size: {
       type: null,
diff --git a/packages/icon/index.wxml b/packages/icon/index.wxml
index 2028681d..c568b58e 100644
--- a/packages/icon/index.wxml
+++ b/packages/icon/index.wxml
@@ -4,7 +4,8 @@
   bind:tap="onClick"
 >
   <van-info
-    wx:if="{{ info !== null }}"
+    wx:if="{{ info !== null || dot }}"
+    dot="{{ dot }}"
     info="{{ info }}"
     custom-class="van-icon__info"
   />
diff --git a/packages/info/index.less b/packages/info/index.less
index 7891117e..6840267e 100644
--- a/packages/info/index.less
+++ b/packages/info/index.less
@@ -21,4 +21,12 @@
   .theme(background-color, '@info-background-color');
   .theme(border, '@info-border-width solid @white');
   .theme(border-radius, '@info-size');
+
+  &--dot {
+    min-width: 0;
+    border-radius: 100%;
+    .theme(width, '@info-dot-size');
+    .theme(height, '@info-dot-size');
+    .theme(background-color, '@info-dot-color');
+  }
 }
diff --git a/packages/info/index.ts b/packages/info/index.ts
index a90bcf73..0dbe9036 100644
--- a/packages/info/index.ts
+++ b/packages/info/index.ts
@@ -2,6 +2,7 @@ import { VantComponent } from '../common/component';
 
 VantComponent({
   props: {
+    dot: Boolean,
     info: null,
     customStyle: String
   }
diff --git a/packages/info/index.wxml b/packages/info/index.wxml
index bf175a09..3112dfc9 100644
--- a/packages/info/index.wxml
+++ b/packages/info/index.wxml
@@ -1,5 +1,7 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
 <view
-  wx:if="{{ info !== null && info !== '' }}"
-  class="custom-class van-info"
+  wx:if="{{ info !== null && info !== '' || dot }}"
+  class="custom-class van-info {{ utils.bem('info', { dot }) }}"
   style="{{ customStyle }}"
->{{ info }}</view>
+>{{ dot ? '' : info }}</view>