Badge add status

examples/routers/badge.vue

@@ -25,6 +25,24 @@
         <Badge text="hot">
             <Button type="ghost">Hello</Button>
         </Badge>
+        <br><br>
+        <div>
+            <Badge status="success" />
+            <Badge status="error" />
+            <Badge status="default" />
+            <Badge status="processing" />
+            <Badge status="warning" />
+            <br />
+            <Badge status="success" text="Success" />
+            <br />
+            <Badge status="error" text="Error" />
+            <br />
+            <Badge status="default" text="Default" />
+            <br />
+            <Badge status="processing" text="Processing" />
+            <br />
+            <Badge status="warning" text="Warning" />
+        </div>
     </div>
 </template>
 <script>

src/components/badge/badge.vue

@@ -3,6 +3,10 @@
         <slot></slot>
         <sup :class="dotClasses" v-show="badge"></sup>
     </span>
+    <span v-else-if="status" :class="classes" class="ivu-badge-status" ref="badge">
+        <span :class="statusClasses"></span>
+        <span class="ivu-badge-status-text">{{ text }}</span>
+    </span>
     <span v-else :class="classes" ref="badge">
         <slot></slot>
         <sup v-if="hasCount" :class="countClasses" v-show="badge">{{ finalCount }}</sup>
@@ -58,6 +62,14 @@
                     }
                 ];
             },
+            statusClasses () {
+                return [
+                    `${prefixCls}-status-dot`,
+                    {
+                        [`${prefixCls}-status-${this.status}`]: !!this.status
+                    }
+                ];
+            },
             finalCount () {
                 if (this.text !== '') return this.text;
                 return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count;

src/styles/components/badge.less

@@ -53,4 +53,62 @@
         z-index: 10;
         box-shadow: 0 0 0 1px #fff;
     }
+
+    &-status {
+        line-height: inherit;
+        vertical-align: baseline;
+
+        &-dot {
+            width: 6px;
+            height: 6px;
+            display: inline-block;
+            border-radius: 50%;
+            vertical-align: middle;
+            position: relative;
+            top: -1px;
+        }
+        &-success {
+            background-color: @success-color;
+        }
+        &-processing {
+            background-color: @processing-color;
+            position: relative;
+            &:after {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                border: 1px solid @processing-color;
+                content: '';
+                animation: aniStatusProcessing 1.2s infinite ease-in-out;
+            }
+        }
+        &-default {
+            background-color: @normal-color;
+        }
+        &-error {
+            background-color: @error-color;
+        }
+        &-warning {
+            background-color: @warning-color;
+        }
+        &-text {
+            color: @text-color;
+            font-size: @font-size-small;
+            margin-left: 8px;
+        }
+    }
+}
+
+@keyframes aniStatusProcessing {
+    0% {
+        transform: scale(0.8);
+        opacity: 0.5;
+    }
+    100% {
+        transform: scale(2.4);
+        opacity: 0;
+    }
 }

src/styles/custom.less

@@ -6,8 +6,10 @@
 @primary-color          : #2d8cf0;
 @info-color             : #2db7f5;
 @success-color          : #19be6b;
+@processing-color       : @primary-color;
 @warning-color          : #ff9900;
 @error-color            : #ed3f14;
+@normal-color           : #d9d9d9;
 @link-color             : #2D8cF0;
 @link-hover-color       : tint(@link-color, 20%);
 @link-active-color      : shade(@link-color, 5%);