other / mew-iview

Commit 78fc1e14f13dc14b18e166071ee165183f467502

Authored by zhigang.li
1 parent 7d4b325b

update tag custom color

Showing 2 changed files with 18 additions and 27 deletions   Show diff stats
Inline Side-by-side
src/components/tag/tag.vue
  Show/Hide comments   View file @78fc1e1
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <div :class="classes" @click.stop="check" :style="wraperStyles"> 3 <div :class="classes" @click.stop="check" :style="wraperStyles">
4 <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span> 4 <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
5 <span :class="textClasses" :style="textColorStyle"><slot></slot></span> 5 <span :class="textClasses" :style="textColorStyle"><slot></slot></span>
6 - <Icon v-if="closable" type="ios-close-empty" :color="lineColor" @click.native.stop="close"></Icon> 6 + <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close-empty" @click.native.stop="close"></Icon>
7 </div> 7 </div>
8 </transition> 8 </transition>
9 </template> 9 </template>
@@ -71,38 +71,38 @@ @@ -71,38 +71,38 @@
71 dotClasses () { 71 dotClasses () {
72 return `${prefixCls}-dot-inner`; 72 return `${prefixCls}-dot-inner`;
73 }, 73 },
74 - showDot () {  
75 - return !!this.type && this.type === 'dot';  
76 - },  
77 - lineColor () { 74 + iconClass () {
78 if (this.type === 'dot') { 75 if (this.type === 'dot') {
79 return ''; 76 return '';
80 } else if (this.type === 'border') { 77 } else if (this.type === 'border') {
81 - return this.color !== undefined ? this.transferColor(this.color) : ''; 78 + return `${prefixCls}-color-${this.color}`;
82 } else { 79 } else {
83 return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : ''; 80 return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : '';
84 } 81 }
85 }, 82 },
86 - borderColor () { 83 + showDot () {
  84 + return !!this.type && this.type === 'dot';
  85 + },
  86 + lineColor () {
87 if (this.type === 'dot') { 87 if (this.type === 'dot') {
88 return ''; 88 return '';
89 } else if (this.type === 'border') { 89 } else if (this.type === 'border') {
90 - return this.color !== undefined ? this.transferColor(this.color) : ''; 90 + return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
91 } else { 91 } else {
92 - return ''; 92 + return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : '';
93 } 93 }
94 }, 94 },
  95 + dotColor () {
  96 + return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
  97 + },
95 textColorStyle () { 98 textColorStyle () {
96 return oneOf(this.color, initColorList) ? {} : {color: this.lineColor}; 99 return oneOf(this.color, initColorList) ? {} : {color: this.lineColor};
97 }, 100 },
98 - mainColor () {  
99 - return this.color !== undefined ? this.transferColor(this.color) : '';  
100 - },  
101 bgColorStyle () { 101 bgColorStyle () {
102 - return oneOf(this.color, initColorList) ? {} : {background: this.mainColor}; 102 + return oneOf(this.color, initColorList) ? {} : {background: this.dotColor};
103 }, 103 },
104 defaultTypeColor () { 104 defaultTypeColor () {
105 - return (this.type !== 'dot' && this.type !== 'border') ? (this.color !== undefined ? this.transferColor(this.color) : '') : ''; 105 + return (this.type !== 'dot' && this.type !== 'border') ? (this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '') : '';
106 } 106 }
107 }, 107 },
108 methods: { 108 methods: {
@@ -122,19 +122,6 @@ @@ -122,19 +122,6 @@
122 } else { 122 } else {
123 this.$emit('on-change', checked, this.name); 123 this.$emit('on-change', checked, this.name);
124 } 124 }
125 - },  
126 - transferColor (name) {  
127 - if (oneOf(name, initColorList)) {  
128 - switch (name) {  
129 - case 'red': return '#ed3f14';  
130 - case 'green': return '#19be6b';  
131 - case 'yellow': return '#ff9900';  
132 - case 'blue': return '#2d8cf0';  
133 - case 'default': return '';  
134 - }  
135 - } else {  
136 - return name;  
137 - }  
138 } 125 }
139 } 126 }
140 }; 127 };
src/styles/components/tag.less
  Show/Hide comments   View file @78fc1e1
@@ -30,15 +30,19 @@ @@ -30,15 +30,19 @@
30 &-color{ 30 &-color{
31 &-red{ 31 &-red{
32 color: @error-color !important; 32 color: @error-color !important;
  33 + border-color: @error-color !important;
33 } 34 }
34 &-green{ 35 &-green{
35 color: @success-color !important; 36 color: @success-color !important;
  37 + border-color: @success-color !important;
36 } 38 }
37 &-blue{ 39 &-blue{
38 color: @link-color !important; 40 color: @link-color !important;
  41 + border-color: @link-color !important;
39 } 42 }
40 &-yellow{ 43 &-yellow{
41 color: @warning-color !important; 44 color: @warning-color !important;
  45 + border-color: @warning-color !important;
42 } 46 }
43 &-white{ 47 &-white{
44 color: rgb(255, 255, 255) !important; 48 color: rgb(255, 255, 255) !important;