Merge branch '2.x' into dev

src/badge/README.md

@@ -76,3 +76,20 @@ app.use(Badge);
 | Name    | Description  |
 | ------- | ------------ |
 | default | Default slot |
+
+### Less Variables
+
+How to use: [Custom Theme](#/en-US/theme).
+
+| Name | Default Value | Description |
+| --- | --- | --- |
+| @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` | - |

src/badge/README.zh-CN.md

@@ -89,3 +89,20 @@ app.use(Badge);
 | ------- | ---------------- |
 | default | 徽标包裹的子元素 |
 | content | 自定义徽标内容   |
+
+### 样式变量
+
+组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
+
+| 名称 | 默认值 | 描述 |
+| --- | --- | --- |
+| @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` | - |

src/badge/index.js

@@ -0,0 +1,69 @@
+import { isDef, createNamespace } from '../utils';
+import { isNumeric } from '../utils/validate/number';
+
+const [createComponent, bem] = createNamespace('badge');
+
+export default createComponent({
+  props: {
+    dot: Boolean,
+    max: [Number, String],
+    color: String,
+    content: [Number, String],
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  methods: {
+    hasContent() {
+      return !!(
+        this.$scopedSlots.content ||
+        (isDef(this.content) && this.content !== '')
+      );
+    },
+
+    renderContent() {
+      const { dot, max, content } = this;
+
+      if (!dot && this.hasContent()) {
+        if (this.$scopedSlots.content) {
+          return this.$scopedSlots.content();
+        }
+
+        if (isDef(max) && isNumeric(content) && +content > max) {
+          return `${max}+`;
+        }
+
+        return content;
+      }
+    },
+
+    renderBadge() {
+      if (this.hasContent() || this.dot) {
+        return (
+          <div
+            class={bem({ dot: this.dot, fixed: !!this.$scopedSlots.default })}
+            style={{ background: this.color }}
+          >
+            {this.renderContent()}
+          </div>
+        );
+      }
+    },
+  },
+
+  render() {
+    if (this.$scopedSlots.default) {
+      const { tag } = this;
+      return (
+        <tag class={bem('wrapper')}>
+          {this.$scopedSlots.default()}
+          {this.renderBadge()}
+        </tag>
+      );
+    }
+
+    return this.renderBadge();
+  },
+});