breaking change: rename Info to Badge

components.js

@@ -4,7 +4,7 @@ module.exports = [
   'cell',
   'cell-group',
   'icon',
-  'info',
+  'badge',
   'image',
   'col',
   'row',

src/action-bar-icon/index.js

@@ -1,8 +1,8 @@
-import { createNamespace, isDef } from '../utils';
+import { createNamespace } from '../utils';
 import { route, routeProps } from '../utils/router';
 import { ChildrenMixin } from '../mixins/relation';
-import Info from '../info';
 import Icon from '../icon';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('action-bar-icon');
 
@@ -15,7 +15,6 @@ export default createComponent({
     text: String,
     icon: String,
     color: String,
-    info: [Number, String],
     badge: [Number, String],
     iconClass: null,
   },
@@ -29,13 +28,11 @@ export default createComponent({
     },
 
     genIcon() {
-      const info = isDef(this.badge) ? this.badge : this.info;
-
       if (this.$slots.icon) {
         return (
           <div class={bem('icon')}>
             {this.$slots.icon()}
-            <Info dot={this.dot} info={info} />
+            <Badge dot={this.dot} badge={this.badge} />
           </div>
         );
       }
@@ -45,8 +42,8 @@ export default createComponent({
           class={[bem('icon'), this.iconClass]}
           tag="div"
           dot={this.dot}
-          info={info}
           name={this.icon}
+          badge={this.badge}
           color={this.color}
         />
       );

src/action-bar/README.zh-CN.md

@@ -98,7 +98,6 @@ export default {
 | icon-class | 图标额外类名 | _any_ | - |
 | dot `2.5.5` | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |

src/action-bar/test/__snapshots__/demo.spec.js.snap

@@ -27,17 +27,17 @@ exports[`renders demo correctly 1`] = `
     <div class="van-action-bar">
       <div role="button" tabindex="0" class="van-action-bar-icon">
         <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
-          <div class="van-info van-info--dot"></div>
+          <div class="van-badge van-badge--dot"></div>
         </div>客服
       </div>
       <div role="button" tabindex="0" class="van-action-bar-icon">
         <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
-          <div class="van-info">5</div>
+          <div class="van-badge">5</div>
         </div>购物车
       </div>
       <div role="button" tabindex="0" class="van-action-bar-icon">
         <div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
-          <div class="van-info">12</div>
+          <div class="van-badge">12</div>
         </div>店铺
       </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning">
         <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>

src/action-bar/test/__snapshots__/index.spec.js.snap

@@ -24,14 +24,14 @@ exports[`Icon render icon slot 1`] = `
 
 exports[`Icon render icon slot with dot 1`] = `
 <div role="button" tabindex="0" class="van-action-bar-icon">
-  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-info van-info--dot"></div>
+  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-badge van-badge--dot"></div>
   </div>Text
 </div>
 `;
 
-exports[`Icon render icon slot with info 1`] = `
+exports[`Icon render icon slot with badge 1`] = `
 <div role="button" tabindex="0" class="van-action-bar-icon">
-  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-info">1</div>
+  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-badge">1</div>
   </div>Text
 </div>
 `;

src/action-bar/test/index.spec.js

@@ -50,12 +50,12 @@ test('Icon render icon slot', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('Icon render icon slot with info', () => {
+test('Icon render icon slot with badge', () => {
   const wrapper = mount({
     render(h) {
       return h(Icon, {
         props: {
-          info: '1',
+          badge: '1',
         },
         scopedSlots: {
           default: () => 'Text',

src/badge/index.js

@@ -0,0 +1,21 @@
+import { isDef, createNamespace } from '../utils';
+
+const [createComponent, bem] = createNamespace('badge');
+
+export default createComponent({
+  props: {
+    dot: Boolean,
+    badge: [Number, String],
+  },
+
+  render() {
+    const { dot, badge } = this;
+    const showBadge = isDef(badge) && badge !== '';
+
+    if (!dot && !showBadge) {
+      return;
+    }
+
+    return <div class={bem({ dot })}>{dot ? '' : badge}</div>;
+  },
+});

src/badge/index.less

@@ -0,0 +1,29 @@
+@import '../style/var';
+
+.van-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+  min-width: @badge-size;
+  padding: @badge-padding;
+  color: @badge-color;
+  font-weight: @badge-font-weight;
+  font-size: @badge-font-size;
+  font-family: @badge-font-family;
+  line-height: 1.2;
+  text-align: center;
+  background-color: @badge-background-color;
+  border: @badge-border-width solid @white;
+  border-radius: @badge-size;
+  transform: translate(50%, -50%);
+  transform-origin: 100%;
+
+  &--dot {
+    width: @badge-dot-size;
+    min-width: 0;
+    height: @badge-dot-size;
+    background-color: @badge-dot-color;
+    border-radius: 100%;
+  }
+}

src/badge/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not render when badge is empty string 1`] = ``;
+
+exports[`should not render when badge is empty undefined 1`] = ``;
+
+exports[`should render when badge is zero 1`] = `<div class="van-badge">0</div>`;

src/badge/test/index.spec.js

@@ -0,0 +1,32 @@
+import Badge from '..';
+import { mount } from '../../../test';
+
+test('should not render when badge is empty string', () => {
+  const wrapper = mount(Badge, {
+    propsData: {
+      badge: '',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should not render when badge is empty undefined', () => {
+  const wrapper = mount(Badge, {
+    propsData: {
+      badge: undefined,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should render when badge is zero', () => {
+  const wrapper = mount(Badge, {
+    propsData: {
+      badge: 0,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

src/grid-item/index.js

@@ -7,8 +7,8 @@ import { route, routeProps } from '../utils/router';
 import { ChildrenMixin } from '../mixins/relation';
 
 // Components
-import Info from '../info';
 import Icon from '../icon';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('grid-item');
 
@@ -75,7 +75,7 @@ export default createComponent({
         return (
           <div class={bem('icon-wrapper')}>
             {this.$slots.icon()}
-            <Info dot={this.dot} info={this.badge} />
+            <Badge dot={this.dot} badge={this.badge} />
           </div>
         );
       }
@@ -83,10 +83,10 @@ export default createComponent({
       if (this.icon) {
         return (
           <Icon
-            name={this.icon}
             dot={this.dot}
-            info={this.badge}
+            name={this.icon}
             size={this.parent.iconSize}
+            badge={this.badge}
             class={bem('icon')}
             classPrefix={this.iconPrefix}
           />

src/grid/README.zh-CN.md

@@ -135,7 +135,6 @@ Vue.use(GridItem);
 | icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info `2.2.1` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |

src/grid/test/__snapshots__/demo.spec.js.snap

@@ -182,12 +182,12 @@ exports[`renders demo correctly 1`] = `
     <div class="van-grid van-hairline--top">
       <div class="van-grid-item" style="flex-basis: 50%;">
         <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
-            <div class="van-info van-info--dot"></div>
+            <div class="van-badge van-badge--dot"></div>
           </i><span class="van-grid-item__text">文字</span></div>
       </div>
       <div class="van-grid-item" style="flex-basis: 50%;">
         <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
-            <div class="van-info">99+</div>
+            <div class="van-badge">99+</div>
           </i><span class="van-grid-item__text">文字</span></div>
       </div>
     </div>

src/grid/test/__snapshots__/index.spec.js.snap

@@ -15,7 +15,7 @@ exports[`render icon-slot 1`] = `
     <div class="van-grid-item__content van-grid-item__content--center van-hairline">
       <div class="van-grid-item__icon-wrapper">
         <div>Custom Icon</div>
-        <div class="van-info">1</div>
+        <div class="van-badge">1</div>
       </div>
     </div>
   </div>

src/grid/test/index.spec.js

@@ -49,7 +49,7 @@ test('render icon-slot', () => {
   const wrapper = mount({
     template: `
       <van-grid icon-size="10">
-        <van-grid-item info="1">
+        <van-grid-item badge="1">
           <template #icon>
             <div>Custom Icon</div>
           </template>

src/icon/README.zh-CN.md

@@ -93,7 +93,6 @@ import 'vant/lib/icon/local.css';
 | name | 图标名称或图片链接 | _string_ | - |
 | dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | color | 图标颜色 | _string_ | `inherit` |
 | size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `inherit` |
 | class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |

src/icon/index.js

@@ -1,8 +1,5 @@
-// Utils
 import { addUnit, createNamespace } from '../utils';
-
+import Badge from '../badge';
-// Components
-import Info from '../info';
 
 const [createComponent, bem] = createNamespace('icon');
 
@@ -30,7 +27,7 @@ export default createComponent({
   render() {
     const { name } = this;
     const imageIcon = isImage(name);
-  
+
     return (
       <this.tag
         class={[
@@ -44,11 +41,8 @@ export default createComponent({
       >
         {this.$slots.default?.()}
         {imageIcon && <img class={bem('image')} src={name} />}
-        <Info
+        <Badge dot={this.dot} badge={this.badge} />
-          dot={this.dot}
-          info={this.badge}
-        />
       </this.tag>
     );
-  }
+  },
 });

src/icon/test/__snapshots__/index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`dot prop 1`] = `
 <i class="van-icon van-icon-undefined">
-  <div class="van-info van-info--dot"></div>
+  <div class="van-badge van-badge--dot"></div>
 </i>
 `;
 

src/info/index.js

@@ -1,22 +0,0 @@
-// Utils
-import { isDef, createNamespace } from '../utils';
-
-const [createComponent, bem] = createNamespace('info');
-
-export default createComponent({
-  props: {
-    dot: Boolean,
-    info: [Number, String],
-  },
-
-  render() {
-    const { dot, info } = this;
-    const showInfo = isDef(info) && info !== '';
-
-    if (!dot && !showInfo) {
-      return;
-    }
-
-    return <div class={bem({ dot })}>{dot ? '' : info}</div>;
-  },
-});

src/info/index.less

@@ -1,29 +0,0 @@
-@import '../style/var';
-
-.van-info {
-  position: absolute;
-  top: 0;
-  right: 0;
-  box-sizing: border-box;
-  min-width: @info-size;
-  padding: @info-padding;
-  color: @info-color;
-  font-weight: @info-font-weight;
-  font-size: @info-font-size;
-  font-family: @info-font-family;
-  line-height: 1.2;
-  text-align: center;
-  background-color: @info-background-color;
-  border: @info-border-width solid @white;
-  border-radius: @info-size;
-  transform: translate(50%, -50%);
-  transform-origin: 100%;
-
-  &--dot {
-    width: @info-dot-size;
-    min-width: 0;
-    height: @info-dot-size;
-    background-color: @info-dot-color;
-    border-radius: 100%;
-  }
-}

src/info/test/__snapshots__/index.spec.js.snap

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should not render when info is empty string 1`] = ``;
-
-exports[`should not render when info is empty undefined 1`] = ``;
-
-exports[`should render when info is zero 1`] = `<div class="van-info">0</div>`;

src/info/test/index.spec.js

@@ -1,32 +0,0 @@
-import Info from '..';
-import { mount } from '../../../test';
-
-test('should not render when info is empty string', () => {
-  const wrapper = mount(Info, {
-    propsData: {
-      info: '',
-    },
-  });
-
-  expect(wrapper).toMatchSnapshot();
-});
-
-test('should not render when info is empty undefined', () => {
-  const wrapper = mount(Info, {
-    propsData: {
-      info: undefined,
-    },
-  });
-
-  expect(wrapper).toMatchSnapshot();
-});
-
-test('should render when info is zero', () => {
-  const wrapper = mount(Info, {
-    propsData: {
-      info: 0,
-    },
-  });
-
-  expect(wrapper).toMatchSnapshot();
-});

src/sidebar-item/index.js

@@ -1,7 +1,7 @@
 import { createNamespace } from '../utils';
 import { ChildrenMixin } from '../mixins/relation';
 import { route, routeProps } from '../utils/router';
-import Info from '../info';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('sidebar-item');
 
@@ -45,7 +45,7 @@ export default createComponent({
       >
         <div class={bem('text')}>
           {this.title}
-          <Info dot={this.dot} info={this.badge} class={bem('info')} />
+          <Badge dot={this.dot} badge={this.badge} class={bem('badge')} />
         </div>
       </a>
     );

src/sidebar/README.zh-CN.md

@@ -108,7 +108,6 @@ export default {
 | title | 内容 | _string_ | `''` |
 | dot `v2.2.1` | 是否显示右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | disabled `v2.2.0` | 是否禁用该项 | _boolean_ | `false` |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to `v2.0.4` | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |

src/sidebar/test/__snapshots__/demo.spec.js.snap

@@ -25,13 +25,13 @@ exports[`renders demo correctly 1`] = `
       <div class="van-grid-item__content van-grid-item__content--center">
         <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-info--dot van-sidebar-item__info"></div>
+            <div class="van-sidebar-item__text">标签名<div class="van-badge van-badge--dot van-sidebar-item__badge"></div>
             </div>
           </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">5</div>
+            <div class="van-sidebar-item__text">标签名<div class="van-badge van-sidebar-item__badge">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>
+            <div class="van-sidebar-item__text">标签名<div class="van-badge van-sidebar-item__badge">99+</div>
             </div>
           </a></div>
       </div>

src/style/var.less

@@ -113,6 +113,18 @@
 @address-list-item-radio-icon-color: @red;
 @address-list-edit-icon-size: 20px;
 
+// Badge
+@badge-size: 16px;
+@badge-color: @white;
+@badge-padding: 0 3px;
+@badge-font-size: @font-size-sm;
+@badge-font-weight: @font-weight-bold;
+@badge-border-width: @border-width-base;
+@badge-background-color: @red;
+@badge-dot-color: @red;
+@badge-dot-size: 8px;
+@badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
+
 // Button
 @button-mini-height: 24px;
 @button-mini-font-size: @font-size-xs;
@@ -409,18 +421,6 @@
 @index-bar-index-line-height: @line-height-xs;
 @index-bar-index-active-color: @green;
 
-// Info
-@info-size: 16px;
-@info-color: @white;
-@info-padding: 0 3px;
-@info-font-size: @font-size-sm;
-@info-font-weight: @font-weight-bold;
-@info-border-width: @border-width-base;
-@info-background-color: @red;
-@info-dot-color: @red;
-@info-dot-size: 8px;
-@info-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
-
 // Image
 @image-placeholder-text-color: @gray-6;
 @image-placeholder-font-size: @font-size-md;

src/tab/README.zh-CN.md

@@ -254,7 +254,6 @@ export default {
 | disabled | 是否禁用标签 | _boolean_ | `false` |
 | dot `v2.3.0` | 是否在标题右上角显示小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info `v2.3.0` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | name `v2.0.6` | 标签名称，作为匹配的标识符 | _number \| string_ | 标签的索引值 |
 | url `v2.2.1` | 点击后跳转的链接地址 | _string_ | - |
 | to `v2.2.1` | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |

src/tab/index.js

@@ -11,7 +11,6 @@ export default createComponent({
     ...routeProps,
     dot: Boolean,
     name: [Number, String],
-    info: [Number, String],
     badge: [Number, String],
     title: String,
     titleStyle: null,

src/tab/test/__snapshots__/index.spec.js.snap

@@ -105,7 +105,7 @@ exports[`dot prop 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
       <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
-        <div class="van-info van-info--dot"></div>
+        <div class="van-badge van-badge--dot"></div>
         </span></div>
       <div class="van-tabs__line"></div>
     </div>
@@ -116,12 +116,12 @@ exports[`dot prop 1`] = `
 </div>
 `;
 
-exports[`info prop 1`] = `
+exports[`badge prop 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
       <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
-        <div class="van-info">10</div>
+        <div class="van-badge">10</div>
         </span></div>
       <div class="van-tabs__line"></div>
     </div>

src/tab/test/index.spec.js

@@ -246,11 +246,11 @@ test('dot prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('info prop', () => {
+test('badge prop', () => {
   const wrapper = mount({
     template: `
       <van-tabs>
-        <van-tab info="10">Text</van-tab>
+        <van-tab badge="10">Text</van-tab>
       </van-tabs>
     `,
   });

src/tabbar-item/index.js

@@ -7,7 +7,7 @@ import { ChildrenMixin } from '../mixins/relation';
 
 // Components
 import Icon from '../icon';
-import Info from '../info';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('tabbar-item');
 
@@ -19,7 +19,6 @@ export default createComponent({
     dot: Boolean,
     icon: String,
     name: [Number, String],
-    info: [Number, String],
     badge: [Number, String],
     iconPrefix: String,
   },
@@ -71,10 +70,7 @@ export default createComponent({
       <div class={bem({ active })} style={{ color }} onClick={this.onClick}>
         <div class={bem('icon')}>
           {this.genIcon(active)}
-          <Info
+          <Badge dot={this.dot} badge={this.badge} />
-            dot={this.dot}
-            info={isDef(this.badge) ? this.badge : this.info}
-          />
         </div>
         <div class={bem('text')}>
           {this.$slots.default ? this.$slots.default({ active }) : null}

src/tabbar-item/index.less

@@ -31,7 +31,7 @@
     color: @tabbar-item-active-color;
   }
 
-  .van-info {
+  .van-badge {
     margin-top: @padding-base;
   }
 }

src/tabbar/README.zh-CN.md

@@ -184,7 +184,6 @@ export default {
 | icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |

src/tabbar/test/__snapshots__/demo.spec.js.snap

@@ -86,14 +86,14 @@ exports[`renders demo correctly 1`] = `
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
             <!----></i>
-          <div class="van-info van-info--dot"></div>
+          <div class="van-badge van-badge--dot"></div>
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
             <!----></i>
-          <div class="van-info">5</div>
+          <div class="van-badge">5</div>
         </div>
         <div class="van-tabbar-item__text">
           标签
@@ -102,7 +102,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
             <!----></i>
-          <div class="van-info">20</div>
+          <div class="van-badge">20</div>
         </div>
         <div class="van-tabbar-item__text">
           标签
@@ -114,7 +114,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
       <div class="van-tabbar-item van-tabbar-item--active">
         <div class="van-tabbar-item__icon"><img src="https://img.yzcdn.cn/vant/user-active.png">
-          <div class="van-info">3</div>
+          <div class="van-badge">3</div>
         </div>
         <div class="van-tabbar-item__text"><span>自定义</span></div>
       </div>

src/tabs/Title.js

@@ -1,5 +1,5 @@
 import { createNamespace, isDef } from '../utils';
-import Info from '../info';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('tab');
 
@@ -7,9 +7,9 @@ export default createComponent({
   props: {
     dot: Boolean,
     type: String,
-    info: [Number, String],
     color: String,
     title: String,
+    badge: [Number, String],
     isActive: Boolean,
     disabled: Boolean,
     scrollable: Boolean,
@@ -59,11 +59,11 @@ export default createComponent({
         </span>
       );
 
-      if (this.dot || (isDef(this.info) && this.info !== '')) {
+      if (this.dot || (isDef(this.badge) && this.badge !== '')) {
         return (
           <span class={bem('text-wrapper')}>
             {Text}
-            {<Info dot={this.dot} info={this.info} />}
+            {<Badge dot={this.dot} badge={this.badge} />}
           </span>
         );
       }

src/tabs/index.js

@@ -373,7 +373,7 @@ export default createComponent({
           }}
           dot={item.dot}
           type={type}
-          info={isDef(item.badge) ? item.badge : item.info}
+          badge={item.badge}
           title={item.title}
           color={this.color}
           style={item.titleStyle}

src/tree-select/index.js

@@ -1,5 +1,5 @@
 // Utils
-import { createNamespace, addUnit, isDef } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 
 // Components
 import Icon from '../icon';
@@ -58,8 +58,8 @@ export default createComponent({
       const Navs = items.map((item) => (
         <SidebarItem
           dot={item.dot}
-          info={isDef(item.badge) ? item.badge : item.info}
           title={item.text}
+          badge={item.badge}
           disabled={item.disabled}
           class={[bem('nav-item'), item.className]}
         />

src/tree-select/test/__snapshots__/demo.spec.js.snap

@@ -71,10 +71,10 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tree-select" style="height: 55vw;">
       <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">浙江<div class="van-info van-info--dot van-sidebar-item__info"></div>
+          <div class="van-sidebar-item__text">浙江<div class="van-badge van-badge--dot van-sidebar-item__badge"></div>
           </div>
         </a><a class="van-sidebar-item van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">江苏<div class="van-info van-sidebar-item__info">5</div>
+          <div class="van-sidebar-item__text">江苏<div class="van-badge van-sidebar-item__badge">5</div>
           </div>
         </a></div>
       <div class="van-tree-select__content">

src/tree-select/test/__snapshots__/index.spec.js.snap

@@ -25,10 +25,10 @@ exports[`height prop 1`] = `
 </div>
 `;
 
-exports[`nav info 1`] = `
+exports[`nav badge 1`] = `
 <div class="van-tree-select" style="height: 300px;">
   <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
-      <div class="van-sidebar-item__text">group1<div class="van-info van-sidebar-item__info">3</div>
+      <div class="van-sidebar-item__text">group1<div class="van-badge van-sidebar-item__badge">3</div>
       </div>
     </a></div>
   <div class="van-tree-select__content"></div>

src/tree-select/test/index.spec.js

@@ -151,13 +151,13 @@ test('height prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('nav info', () => {
+test('nav badge', () => {
   const wrapper = mount(TreeSelect, {
     propsData: {
       items: [
         {
           text: 'group1',
-          info: 3,
+          badge: 3,
         },
       ],
     },