Badge add new prop: color

examples/routers/badge.vue

@@ -90,6 +90,33 @@
                 <a href="#" class="demo-badge"></a>
             </Badge>
         </div>
+        <Divider></Divider>
+        <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" />
+        <br />
+        <Badge color="blue" text="blue" />
+        <Badge color="green" text="green" />
+        <Badge color="red" text="red" />
+        <Badge color="yellow" text="yellow" />
+        <Badge color="pink" text="pink" />
+        <Badge color="magenta" text="magenta" />
+        <Badge color="volcano" text="volcano" />
+        <Badge color="orange" text="orange" />
+        <Badge color="gold" text="gold" />
+        <Badge color="lime" text="lime" />
+        <Badge color="cyan" text="cyan" />
+        <Badge color="geekblue" text="geekblue" />
+        <Badge color="purple" text="purple" />
+        <br />
+        <Badge color="#2db7f5" text="#2db7f5" />
+        <Badge color="#f50" text="#f50" />
     </div>
 </template>
 <script>

src/components/badge/badge.vue

@@ -3,8 +3,8 @@
         <slot></slot>
         <sup :class="dotClasses" :style="styles" v-show="badge"></sup>
     </span>
-    <span v-else-if="status" :class="classes" class="ivu-badge-status" ref="badge">
+    <span v-else-if="status || color" :class="classes" class="ivu-badge-status" ref="badge">
-        <span :class="statusClasses"></span>
+        <span :class="statusClasses" :style="statusStyles"></span>
         <span class="ivu-badge-status-text"><slot name="text">{{ text }}</slot></span>
     </span>
     <span v-else :class="classes" ref="badge">
@@ -15,6 +15,7 @@
 </template>
 <script>
     import { oneOf } from '../../utils/assist';
+    const initColorList = ['blue', 'green', 'red', 'yellow', 'pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
     const prefixCls = 'ivu-badge';
 
     export default {
@@ -50,6 +51,9 @@
             },
             offset: {
                 type: Array
+            },
+            color: {
+                type: String
             }
         },
         computed: {
@@ -82,10 +86,14 @@
                 return [
                     `${prefixCls}-status-dot`,
                     {
-                        [`${prefixCls}-status-${this.status}`]: !!this.status
+                        [`${prefixCls}-status-${this.status}`]: !!this.status,
+                        [`${prefixCls}-status-${this.color}`]: !!this.color && oneOf(this.color, initColorList)
                     }
                 ];
             },
+            statusStyles () {
+                return oneOf(this.color, initColorList) ? {} : { backgroundColor: this.color};
+            },
             styles () {
                 const style = {};
                 if (this.offset && this.offset.length === 2) {

src/styles/components/badge.less

@@ -127,6 +127,18 @@
             font-size: @font-size-small;
             margin-left: 6px;
         }
+
+        @colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;
+
+        .make-color-classes(@i: length(@colors)) when (@i > 0) {
+            .make-color-classes(@i - 1);
+            @color: extract(@colors, @i);
+            @darkColor: '@{color}-6';
+            &-@{color} {
+                background-color: @@darkColor;
+            }
+        }
+        .make-color-classes();
     }
 }