From 7d4b325be875de8222bbbbfdb74e8a27126f5788 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Mon, 18 Dec 2017 17:52:20 +0800
Subject: [PATCH 1/3] close #2406

---
 examples/routers/tag.vue       |  5 +++
 src/components/tag/tag.vue     | 68 +++++++++++++++++++++++++++++-----
 src/styles/components/tag.less | 29 ++++++++++++---
 3 files changed, 88 insertions(+), 14 deletions(-)

diff --git a/examples/routers/tag.vue b/examples/routers/tag.vue
index f29306fe..185b351a 100644
--- a/examples/routers/tag.vue
+++ b/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>
diff --git a/src/components/tag/tag.vue b/src/components/tag/tag.vue
index 1acc31fa..b0e6f646 100644
--- a/src/components/tag/tag.vue
+++ b/src/components/tag/tag.vue
@@ -1,16 +1,17 @@
 <template>
     <transition name="fade">
-        <div :class="classes" @click.stop="check">
-            <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>
+        <div :class="classes" @click.stop="check" :style="wraperStyles">
+            <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) {
-                    return oneOf(value, ['blue', 'green', 'red', 'yellow', 'default']);
-                }
+                type: String,
+                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,7 +122,20 @@
                 } 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;
+                }
             }
         }
     };
-</script>
+</script>
\ No newline at end of file
diff --git a/src/styles/components/tag.less b/src/styles/components/tag.less
index 5f919694..c5c4b45c 100644
--- a/src/styles/components/tag.less
+++ b/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;
-        color: @text-color !important;
+        border: 1px solid @border-color-split;
+        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} {

From 78fc1e14f13dc14b18e166071ee165183f467502 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Wed, 20 Dec 2017 11:24:42 +0800
Subject: [PATCH 2/3] update tag custom color

---
 src/components/tag/tag.vue     | 43 ++++++++++++----------------------
 src/styles/components/tag.less |  4 ++++
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/src/components/tag/tag.vue b/src/components/tag/tag.vue
index b0e6f646..1b4d4abe 100644
--- a/src/components/tag/tag.vue
+++ b/src/components/tag/tag.vue
@@ -3,7 +3,7 @@
         <div :class="classes" @click.stop="check" :style="wraperStyles">
             <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>
+            <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close-empty" @click.native.stop="close"></Icon>
         </div>
     </transition>
 </template>
@@ -71,6 +71,15 @@
             dotClasses () {
                 return `${prefixCls}-dot-inner`;
             },
+            iconClass () {
+                if (this.type === 'dot') {
+                    return '';
+                } else if (this.type === 'border') {
+                    return `${prefixCls}-color-${this.color}`;
+                } else {
+                    return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : '';
+                }
+            },
             showDot () {
                 return !!this.type && this.type === 'dot';
             },
@@ -78,31 +87,22 @@
                 if (this.type === 'dot') {
                     return '';
                 } else if (this.type === 'border') {
-                    return this.color !== undefined ? this.transferColor(this.color) : '';
+                    return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : 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 '';
-                }
+            dotColor () {
+                return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
             },
             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};
+                return oneOf(this.color, initColorList) ? {} : {background: this.dotColor};
             },
             defaultTypeColor () {
-                return (this.type !== 'dot' && this.type !== 'border') ? (this.color !== undefined ? this.transferColor(this.color) : '') : '';
+                return (this.type !== 'dot' && this.type !== 'border') ? (this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '') : '';
             }
         },
         methods: {
@@ -122,19 +122,6 @@
                 } 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;
-                }
             }
         }
     };
diff --git a/src/styles/components/tag.less b/src/styles/components/tag.less
index c5c4b45c..e878caba 100644
--- a/src/styles/components/tag.less
+++ b/src/styles/components/tag.less
@@ -30,15 +30,19 @@
     &-color{
         &-red{
             color: @error-color !important;
+            border-color: @error-color !important;
         }
         &-green{
             color: @success-color !important;
+            border-color: @success-color !important;
         }
         &-blue{
             color: @link-color !important;
+            border-color: @link-color !important;
         }
         &-yellow{
             color: @warning-color !important;
+            border-color: @warning-color !important;
         }
         &-white{
             color: rgb(255, 255, 255) !important;

From d649c177e38f50ece1c1b96bc211c1fbe8161849 Mon Sep 17 00:00:00 2001
From: "zhigang.li" <zhigang.li@tendcloud.com>
Date: Wed, 20 Dec 2017 11:37:24 +0800
Subject: [PATCH 3/3] udpate

---
 src/styles/components/tag.less | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/styles/components/tag.less b/src/styles/components/tag.less
index e878caba..1e77addb 100644
--- a/src/styles/components/tag.less
+++ b/src/styles/components/tag.less
@@ -30,19 +30,19 @@
     &-color{
         &-red{
             color: @error-color !important;
-            border-color: @error-color !important;
+            border-color: @error-color;
         }
         &-green{
             color: @success-color !important;
-            border-color: @success-color !important;
+            border-color: @success-color;
         }
         &-blue{
             color: @link-color !important;
-            border-color: @link-color !important;
+            border-color: @link-color;
         }
         &-yellow{
             color: @warning-color !important;
-            border-color: @warning-color !important;
+            border-color: @warning-color;
         }
         &-white{
             color: rgb(255, 255, 255) !important;