From d25ddc19144e998912576c7cd529bece823703cb Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 15 Dec 2019 22:06:24 +0800
Subject: [PATCH] feat(Tab): add info prop (#5274)

---
 src/grid/README.md                            |  2 +-
 src/tab/README.md                             |  2 ++
 src/tab/README.zh-CN.md                       |  1 +
 src/tab/index.js                              |  1 +
 src/tab/test/__snapshots__/index.spec.js.snap | 14 ++++++++++++++
 src/tab/test/index.spec.js                    | 12 ++++++++++++
 src/tabs/Title.js                             |  3 ++-
 src/tabs/index.js                             |  3 ++-
 8 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/grid/README.md b/src/grid/README.md
index d19bc8d82..8a6c7d41c 100644
--- a/src/grid/README.md
+++ b/src/grid/README.md
@@ -116,7 +116,7 @@ Vue.use(Grid).use(GridItem);
 | text | Text | *string* | - | - |
 | icon | Icon name or URL | *string* | - | - |
 | dot | Whether to show red dot | *boolean* | `false` | 2.2.1 |
-| info | Content of the badge | *string \| number* | `''` | 2.2.1 |
+| info | Content of the badge | *string \| number* | - | 2.2.1 |
 | url | Link URL | *string* | - | - |
 | to | Target route of the link, same as to of vue-router | *string \| object* | - | - |
 | replace | If true, the navigation will not leave a history record | *boolean* | `false` | - |
diff --git a/src/tab/README.md b/src/tab/README.md
index 477c9078c..5748ec380 100644
--- a/src/tab/README.md
+++ b/src/tab/README.md
@@ -202,6 +202,8 @@ In swipeable mode, you can switch tabs with swipe gestrue in the content
 | title | Title | *string* | - | - |
 | title-style | Custom title style | *any*  | - | 2.2.14 |
 | disabled | Whether to disable tab | *boolean* | `false` | - |
+| dot | Whether to show red dot on the title | *boolean* | `false` | 2.3.0 |
+| info | Content of the badge on the title | *string \| number* | - | 2.3.0 |
 | url | Link | *string* | - | 2.2.1 |
 | to | Target route of the link, same as to of vue-router | *string \| object* | - | 2.2.1 |
 | replace | If true, the navigation will not leave a history record | *boolean* | `false` | 2.2.1 |
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index 2dd193dcd..e316d1ef7 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -207,6 +207,7 @@ export default {
 | title-style | 自定义标题样式 | *any*  | - | 2.2.14 |
 | disabled | 是否禁用标签 | *boolean* | `false` | - |
 | dot | 是否在标题右上角显示小红点 | *boolean* | `false` | 2.3.0 |
+| info | 标题右上角徽标的内容 | *string \| number* | - | 2.3.0 |
 | url | 点击后跳转的链接地址 | *string* | - | 2.2.1 |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | 2.2.1 |
 | replace | 是否在跳转时替换当前页面历史 | *boolean* | `false` | 2.2.1 |
diff --git a/src/tab/index.js b/src/tab/index.js
index cec139c7e..7ddc50834 100644
--- a/src/tab/index.js
+++ b/src/tab/index.js
@@ -10,6 +10,7 @@ export default createComponent({
   props: {
     ...routeProps,
     dot: Boolean,
+    info: [Number, String],
     name: [Number, String],
     title: String,
     titleStyle: null,
diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap
index 541a9ff34..67e3bbd97 100644
--- a/src/tab/test/__snapshots__/index.spec.js.snap
+++ b/src/tab/test/__snapshots__/index.spec.js.snap
@@ -114,6 +114,20 @@ exports[`dot prop 1`] = `
 </div>
 `;
 
+exports[`info prop 1`] = `
+<div class="van-tabs van-tabs--line">
+  <div class="van-tabs__wrap van-hairline--top-bottom">
+    <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+      <div role="tab" aria-selected="true" class="van-tab van-tab--active van-ellipsis"><span class="van-tab__text"><div class="van-info">10</div></span></div>
+      <div class="van-tabs__line"></div>
+    </div>
+  </div>
+  <div class="van-tabs__content">
+    <div role="tabpanel" class="van-tab__pane">Text</div>
+  </div>
+</div>
+`;
+
 exports[`lazy render 1`] = `
 <div class="van-tabs van-tabs--line">
   <div>
diff --git a/src/tab/test/index.spec.js b/src/tab/test/index.spec.js
index 7d469f133..02a66f49b 100644
--- a/src/tab/test/index.spec.js
+++ b/src/tab/test/index.spec.js
@@ -251,3 +251,15 @@ test('dot prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('info prop', () => {
+  const wrapper = mount({
+    template: `
+      <van-tabs>
+        <van-tab info="10">Text</van-tab>
+      </van-tabs>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/tabs/Title.js b/src/tabs/Title.js
index a06c2d280..2f6043284 100644
--- a/src/tabs/Title.js
+++ b/src/tabs/Title.js
@@ -7,6 +7,7 @@ export default createComponent({
   props: {
     dot: Boolean,
     type: String,
+    info: [Number, String],
     color: String,
     title: String,
     isActive: Boolean,
@@ -76,7 +77,7 @@ export default createComponent({
       >
         <span class={bem('text')}>
           {this.slots() || this.title}
-          <Info dot={this.dot} />
+          <Info dot={this.dot} info={this.info} />
         </span>
       </div>
     );
diff --git a/src/tabs/index.js b/src/tabs/index.js
index 867af7208..1a5eac26e 100644
--- a/src/tabs/index.js
+++ b/src/tabs/index.js
@@ -268,8 +268,9 @@ export default createComponent({
       <Title
         ref="titles"
         refInFor
-        dot={item.dot}
         type={type}
+        dot={item.dot}
+        info={item.info}
         title={item.title}
         color={this.color}
         style={item.titleStyle}