`;
-exports[`Icon render icon slot with info 1`] = `
+exports[`Icon render icon slot with badge 1`] = `
-
`;
diff --git a/src/action-bar/test/index.spec.js b/src/action-bar/test/index.spec.js
index e49915da8..1db44eaeb 100644
--- a/src/action-bar/test/index.spec.js
+++ b/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',
diff --git a/src/badge/index.js b/src/badge/index.js
new file mode 100644
index 000000000..35620c38d
--- /dev/null
+++ b/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
{dot ? '' : badge}
;
+ },
+});
diff --git a/src/badge/index.less b/src/badge/index.less
new file mode 100644
index 000000000..31fb14856
--- /dev/null
+++ b/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%;
+ }
+}
diff --git a/src/badge/test/__snapshots__/index.spec.js.snap b/src/badge/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..f1dda6f62
--- /dev/null
+++ b/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`] = `
0
`;
diff --git a/src/badge/test/index.spec.js b/src/badge/test/index.spec.js
new file mode 100644
index 000000000..276a3c2ab
--- /dev/null
+++ b/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();
+});
diff --git a/src/grid-item/index.js b/src/grid-item/index.js
index c003d9dbb..dea4ddc70 100644
--- a/src/grid-item/index.js
+++ b/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 (
{this.$slots.icon()}
-
+
);
}
@@ -83,10 +83,10 @@ export default createComponent({
if (this.icon) {
return (
diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md
index 1dd484706..82225a88d 100644
--- a/src/grid/README.zh-CN.md
+++ b/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` |
diff --git a/src/grid/test/__snapshots__/demo.spec.js.snap b/src/grid/test/__snapshots__/demo.spec.js.snap
index b917973ee..95f2bd6e5 100644
--- a/src/grid/test/__snapshots__/demo.spec.js.snap
+++ b/src/grid/test/__snapshots__/demo.spec.js.snap
@@ -182,12 +182,12 @@ exports[`renders demo correctly 1`] = `
diff --git a/src/grid/test/__snapshots__/index.spec.js.snap b/src/grid/test/__snapshots__/index.spec.js.snap
index 92eb96f44..1387be1b9 100644
--- a/src/grid/test/__snapshots__/index.spec.js.snap
+++ b/src/grid/test/__snapshots__/index.spec.js.snap
@@ -15,7 +15,7 @@ exports[`render icon-slot 1`] = `
diff --git a/src/grid/test/index.spec.js b/src/grid/test/index.spec.js
index 166640e38..78f15a3ed 100644
--- a/src/grid/test/index.spec.js
+++ b/src/grid/test/index.spec.js
@@ -49,7 +49,7 @@ test('render icon-slot', () => {
const wrapper = mount({
template: `