Merge pull request #2644 from lison16/tag

close #2406

Merge pull request #2644 from lison16/tag
close #2406
Aresn · GitHub
2 parents 8a0cb3ce d649c177
Showing 3 changed files with 79 additions and 14 deletions Show diff stats
examples/routers/tag.vue
src/components/tag/tag.vue
src/styles/components/tag.less
@@ -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>
 <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" :class="iconClass" :color="lineColor" type="ios-close-empty" @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`;
             },
+            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';
+            },
+            lineColor () {
+                if (this.type === 'dot') {
+                    return '';
+                } else if (this.type === 'border') {
+                    return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
+                } else {
+                    return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : '';
+                }
+            },
+            dotColor () {
+                return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
+            },
+            textColorStyle () {
+                return oneOf(this.color, initColorList) ? {} : {color: this.lineColor};
+            },
+            bgColorStyle () {
+                return oneOf(this.color, initColorList) ? {} : {background: this.dotColor};
+            },
+            defaultTypeColor () {
+                return (this.type !== 'dot' && this.type !== 'border') ? (this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '') : '';
             }
         },
         methods: {
@@ -88,4 +125,4 @@
             }
         }
     };
 -</script>
+</script>
 \ No newline at end of file
@@ -27,6 +27,28 @@
         }
     }
+    &-color{
+        &-red{
+            color: @error-color !important;
+            border-color: @error-color;
+        }
+        &-green{
+            color: @success-color !important;
+            border-color: @success-color;
+        }
+        &-blue{
+            color: @link-color !important;
+            border-color: @link-color;
+        }
+        &-yellow{
+            color: @warning-color !important;
+            border-color: @warning-color;
+        }
+        &-white{
+            color: rgb(255, 255, 255) !important;
+        }
+    }
+
     &-dot{
         height: 32px;
         line-height: 32px;
@@ -54,13 +76,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 +90,7 @@
             content: "";
             display: none;
             width: 1px;
-            background: @border-color-split;
+            background: currentColor;
             position: absolute;
             top: 0;
             bottom: 0;
@@ -137,7 +159,7 @@
     &,
     a,
     a:hover {
-        color: @text-color;
+        // color: @text-color;
     }
     &-text {
@@ -146,6 +168,7 @@
             margin: 0 -8px;
             padding: 0 8px;
         }
+        color: @text-color;
     }
     .@{tag-close-prefix-cls} {