feat(Icon): add dot prop (#2063)

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

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` | - |

packages/icon/index.ts

@@ -3,6 +3,7 @@ import { addUnit } from '../common/utils';
 
 VantComponent({
   props: {
+    dot: Boolean,
     info: null,
     size: {
       type: null,

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"
   />

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');
+  }
 }

packages/info/index.ts

@@ -2,6 +2,7 @@ import { VantComponent } from '../common/component';
 
 VantComponent({
   props: {
+    dot: Boolean,
     info: null,
     customStyle: String
   }

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>