From b1f01c2fb79d89e4edf9b56ba769b9052974b6d8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 11 Sep 2019 17:29:08 +0800
Subject: [PATCH] feat(SidebarItem): add dot prop (#4432)

---
 src/sidebar-item/index.js                        |  3 ++-
 src/sidebar/README.md                            |  9 +++++----
 src/sidebar/README.zh-CN.md                      | 11 ++++++-----
 src/sidebar/demo/index.vue                       | 10 +++++-----
 src/sidebar/test/__snapshots__/demo.spec.js.snap |  6 +++---
 5 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js
index 3711310d2..ab4034bce 100644
--- a/src/sidebar-item/index.js
+++ b/src/sidebar-item/index.js
@@ -10,6 +10,7 @@ export default createComponent({
 
   props: {
     ...routeProps,
+    dot: Boolean,
     info: [Number, String],
     title: String,
     disabled: Boolean
@@ -42,7 +43,7 @@ export default createComponent({
       >
         <div class={bem('text')}>
           {this.title}
-          <Info info={this.info} class={bem('info')} />
+          <Info dot={this.dot} info={this.info} class={bem('info')} />
         </div>
       </a>
     );
diff --git a/src/sidebar/README.md b/src/sidebar/README.md
index 8720be841..59acd1987 100644
--- a/src/sidebar/README.md
+++ b/src/sidebar/README.md
@@ -32,12 +32,12 @@ export default {
 };
 ```
 
-### Show Badge
+### Show Info
 
 ```html
 <van-sidebar v-model="activeKey">
-  <van-sidebar-item title="Title" info="8" />
-  <van-sidebar-item title="Title" info="99" />
+  <van-sidebar-item title="Title" dot />
+  <van-sidebar-item title="Title" info="5" />
   <van-sidebar-item title="Title" info="99+" />
 </van-sidebar>
 ```
@@ -61,7 +61,8 @@ export default {
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
 | title | Content | *string* | `''` | - |
-| info | Info Message | *string \| number* | `''` | - |
+| dot | Whether to show red dot | *boolean* | `false` | 2.2.1 |
+| info | Content of the badge | *string \| number* | `''` | - |
 | disabled | Whether to be disabled | *boolean* | `false` | 2.2.0 |
 | url | Link | *string* | - | - |
 | to | Target route of the link, same as to of vue-router | *string \| object* | - | 2.0.4 |
diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md
index 481b99173..27121dc80 100644
--- a/src/sidebar/README.zh-CN.md
+++ b/src/sidebar/README.zh-CN.md
@@ -34,14 +34,14 @@ export default {
 };
 ```
 
-### 显示徽标
+### 提示信息
 
-通过`info`属性设置徽标内容
+设置`dot`属性后，会在右上角展示一个小红点。设置`info`属性后，会在右上角展示相应的徽标
 
 ```html
 <van-sidebar v-model="activeKey">
-  <van-sidebar-item title="标签名称" info="8" />
-  <van-sidebar-item title="标签名称" info="99" />
+  <van-sidebar-item title="标签名称" dot />
+  <van-sidebar-item title="标签名称" info="5" />
   <van-sidebar-item title="标签名称" info="99+" />
 </van-sidebar>
 ```
@@ -65,7 +65,8 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | title | 内容 | *string* | `''` | - |
-| info | 提示消息 | *string \| number* | `''` | - |
+| dot | 是否显示右上角小红点 | *boolean* | `false` | 2.2.1 |
+| info | 右上角徽标的内容 | *string \| number* | - | - |
 | disabled | 是否禁用该项 | *boolean* | `false` | 2.2.0 |
 | url | 点击后跳转的链接地址 | *string* | - | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | 2.0.4 |
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index efef0f0fc..b0f3ece59 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -11,10 +11,10 @@
       </van-grid-item>
 
       <van-grid-item>
-        <h3 class="demo-sidebar-title">{{ $t('showBadge') }}</h3>
+        <h3 class="demo-sidebar-title">{{ $t('showInfo') }}</h3>
         <van-sidebar v-model="activeKey2">
-          <van-sidebar-item :title="$t('title')" info="8" />
-          <van-sidebar-item :title="$t('title')" info="99" />
+          <van-sidebar-item :title="$t('title')" dot />
+          <van-sidebar-item :title="$t('title')" info="5" />
           <van-sidebar-item :title="$t('title')" info="99+" />
         </van-sidebar>
       </van-grid-item>
@@ -36,11 +36,11 @@ export default {
   i18n: {
     'zh-CN': {
       title: '标签名',
-      showBadge: '显示徽标',
+      showInfo: '提示信息',
       disabled: '禁用选项'
     },
     'en-US': {
-      showBadge: 'Show Badge',
+      showInfo: 'Show Info',
       disabled: 'Disabled'
     }
   },
diff --git a/src/sidebar/test/__snapshots__/demo.spec.js.snap b/src/sidebar/test/__snapshots__/demo.spec.js.snap
index e9b4d49a5..e2a143cc2 100644
--- a/src/sidebar/test/__snapshots__/demo.spec.js.snap
+++ b/src/sidebar/test/__snapshots__/demo.spec.js.snap
@@ -23,12 +23,12 @@ exports[`renders demo correctly 1`] = `
     </div>
     <div class="van-grid-item" style="flex-basis: 50%;">
       <div class="van-grid-item__content van-grid-item__content--center">
-        <h3 class="demo-sidebar-title">显示徽标</h3>
+        <h3 class="demo-sidebar-title">提示信息</h3>
         <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
-            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">8</div>
+            <div class="van-sidebar-item__text">标签名<div class="van-info van-info--dot van-sidebar-item__info"></div>
             </div>
           </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">99</div>
+            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">5</div>
             </div>
           </a> <a class="van-sidebar-item">
             <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">99+</div>