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 3 <div :class="classes" @click.stop="check" :style="wraperStyles">
4 4 <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
5 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 7 </div>
8 8 </transition>
9 9 </template>
... ... @@ -71,38 +71,38 @@
71 71 dotClasses () {
72 72 return `${prefixCls}-dot-inner`;
73 73 },
74   - showDot () {
75   - return !!this.type && this.type === 'dot';
76   - },
77   - lineColor () {
  74 + iconClass () {
78 75 if (this.type === 'dot') {
79 76 return '';
80 77 } else if (this.type === 'border') {
81   - return this.color !== undefined ? this.transferColor(this.color) : '';
  78 + return `${prefixCls}-color-${this.color}`;
82 79 } else {
83 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 87 if (this.type === 'dot') {
88 88 return '';
89 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 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 98 textColorStyle () {
96 99 return oneOf(this.color, initColorList) ? {} : {color: this.lineColor};
97 100 },
98   - mainColor () {
99   - return this.color !== undefined ? this.transferColor(this.color) : '';
100   - },
101 101 bgColorStyle () {
102   - return oneOf(this.color, initColorList) ? {} : {background: this.mainColor};
  102 + return oneOf(this.color, initColorList) ? {} : {background: this.dotColor};
103 103 },
104 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 108 methods: {
... ... @@ -122,19 +122,6 @@
122 122 } else {
123 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 30 &-color{
31 31 &-red{
32 32 color: @error-color !important;
  33 + border-color: @error-color !important;
33 34 }
34 35 &-green{
35 36 color: @success-color !important;
  37 + border-color: @success-color !important;
36 38 }
37 39 &-blue{
38 40 color: @link-color !important;
  41 + border-color: @link-color !important;
39 42 }
40 43 &-yellow{
41 44 color: @warning-color !important;
  45 + border-color: @warning-color !important;
42 46 }
43 47 &-white{
44 48 color: rgb(255, 255, 255) !important;
... ...