close #2406

examples/routers/tag.vue

@@ -14,6 +14,11 @@
         <Tag closable color="red" checkable>标签三</Tag>
         <Tag closable color="yellow" checkable>标签四</Tag>
         <br><br>
+        <Tag closable color="#EF6AFF" checkable>标签一</Tag>
+        <Tag type="border" closable color="#EF6AFF" checkable>标签二</Tag>
+        <Tag type="dot" closable color="#EF6AFF" checkable>标签三</Tag>
+        <Tag closable color="default" checkable>标签四</Tag>
+        <br><br>
         <Tag type="border" closable color="blue" checkable>标签一</Tag>
         <Tag type="border" closable color="green">标签二</Tag>
         <Tag type="border" closable color="red">标签三</Tag>

src/components/tag/tag.vue

@@ -1,16 +1,17 @@
 <template>
     <transition name="fade">
-        <div :class="classes" @click.stop="check">
+        <div :class="classes" @click.stop="check" :style="wraperStyles">
-            <span :class="dotClasses" v-if="showDot"></span><span :class="textClasses"><slot></slot></span><Icon v-if="closable" type="ios-close-empty" @click.native.stop="close"></Icon>
+            <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
+            <span :class="textClasses" :style="textColorStyle"><slot></slot></span>
+            <Icon v-if="closable" type="ios-close-empty" :color="lineColor" @click.native.stop="close"></Icon>
         </div>
     </transition>
 </template>
 <script>
     import Icon from '../icon';
     import { oneOf } from '../../utils/assist';
-
     const prefixCls = 'ivu-tag';
-
+    const initColorList = ['blue', 'green', 'red', 'yellow', 'default'];
     export default {
         name: 'Tag',
         components: { Icon },
@@ -28,9 +29,8 @@
                 default: true
             },
             color: {
-                validator (value) {
+                type: String,
-                    return oneOf(value, ['blue', 'green', 'red', 'yellow', 'default']);
+                default: 'default'
-                }
             },
             type: {
                 validator (value) {
@@ -58,14 +58,51 @@
                     }
                 ];
             },
+            wraperStyles () {
+                return oneOf(this.color, initColorList) ? {} : {background: this.defaultTypeColor, borderColor: this.lineColor, color: this.lineColor};
+            },
             textClasses () {
-                return `${prefixCls}-text`;
+                return [
+                    `${prefixCls}-text`,
+                    this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '',
+                    (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? `${prefixCls}-color-white` : ''
+                ];
             },
             dotClasses () {
                 return `${prefixCls}-dot-inner`;
             },
             showDot () {
                 return !!this.type && this.type === 'dot';
+            },
+            lineColor () {
+                if (this.type === 'dot') {
+                    return '';
+                } else if (this.type === 'border') {
+                    return this.color !== undefined ? this.transferColor(this.color) : '';
+                } else {
+                    return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : '';
+                }
+            },
+            borderColor () {
+                if (this.type === 'dot') {
+                    return '';
+                } else if (this.type === 'border') {
+                    return this.color !== undefined ? this.transferColor(this.color) : '';
+                } else {
+                    return '';
+                }
+            },
+            textColorStyle () {
+                return oneOf(this.color, initColorList) ? {} : {color: this.lineColor};
+            },
+            mainColor () {
+                return this.color !== undefined ? this.transferColor(this.color) : '';
+            },
+            bgColorStyle () {
+                return oneOf(this.color, initColorList) ? {} : {background: this.mainColor};
+            },
+            defaultTypeColor () {
+                return (this.type !== 'dot' && this.type !== 'border') ? (this.color !== undefined ? this.transferColor(this.color) : '') : '';
             }
         },
         methods: {
@@ -85,6 +122,19 @@
                 } else {
                     this.$emit('on-change', checked, this.name);
                 }
+            },
+            transferColor (name) {
+                if (oneOf(name, initColorList)) {
+                    switch (name) {
+                        case 'red': return '#ed3f14';
+                        case 'green': return '#19be6b';
+                        case 'yellow': return '#ff9900';
+                        case 'blue': return '#2d8cf0';
+                        case 'default': return '';
+                    }
+                } else {
+                    return name;
+                }
             }
         }
     };

src/styles/components/tag.less

@@ -27,6 +27,24 @@
         }
     }
 
+    &-color{
+        &-red{
+            color: @error-color !important;
+        }
+        &-green{
+            color: @success-color !important;
+        }
+        &-blue{
+            color: @link-color !important;
+        }
+        &-yellow{
+            color: @warning-color !important;
+        }
+        &-white{
+            color: rgb(255, 255, 255) !important;
+        }
+    }
+
     &-dot{
         height: 32px;
         line-height: 32px;
@@ -54,13 +72,13 @@
     &-border{
         height: 24px;
         line-height: 24px;
-        border: 1px solid @border-color-split !important;
+        border: 1px solid @border-color-split;
-        color: @text-color !important;
+        color: @border-color-split;
         background: #fff !important;
         position: relative;
 
         .@{tag-close-prefix-cls} {
-            color: #666 !important;
+            color: #666;
             margin-left: 12px !important;
         }
 
@@ -68,7 +86,7 @@
             content: "";
             display: none;
             width: 1px;
-            background: @border-color-split;
+            background: currentColor;
             position: absolute;
             top: 0;
             bottom: 0;
@@ -137,7 +155,7 @@
     &,
     a,
     a:hover {
-        color: @text-color;
+        // color: @text-color;
     }
 
     &-text {
@@ -146,6 +164,7 @@
             margin: 0 -8px;
             padding: 0 8px;
         }
+        color: @text-color;
     }
 
     .@{tag-close-prefix-cls} {