feat(Tab): add info prop (#5274)

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

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 |

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 |

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,

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>

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

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>
     );

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}