chenhaodong / mew-iview

Commit 2ec843335072688091be6ebbbaa03b6a44917acd

Authored by Aresn
Committed by GitHub
2 parents 8a0cb3ce d649c177

Merge pull request #2644 from lison16/tag 

close #2406
Showing 3 changed files with 79 additions and 14 deletions   Show diff stats
Inline Side-by-side
examples/routers/tag.vue
  Show/Hide comments   View file @2ec8433
... ... @@ -14,6 +14,11 @@
14 14 <Tag closable color="red" checkable>标签三</Tag>
15 15 <Tag closable color="yellow" checkable>标签四</Tag>
16 16 <br><br>
  17 + <Tag closable color="#EF6AFF" checkable>标签一</Tag>
  18 + <Tag type="border" closable color="#EF6AFF" checkable>标签二</Tag>
  19 + <Tag type="dot" closable color="#EF6AFF" checkable>标签三</Tag>
  20 + <Tag closable color="default" checkable>标签四</Tag>
  21 + <br><br>
17 22 <Tag type="border" closable color="blue" checkable>标签一</Tag>
18 23 <Tag type="border" closable color="green">标签二</Tag>
19 24 <Tag type="border" closable color="red">标签三</Tag>
... ...
src/components/tag/tag.vue
  Show/Hide comments   View file @2ec8433
1 1 <template>
2 2 <transition name="fade">
3   - <div :class="classes" @click.stop="check">
4   - <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>
  3 + <div :class="classes" @click.stop="check" :style="wraperStyles">
  4 + <span :class="dotClasses" v-if="showDot" :style="bgColorStyle"></span>
  5 + <span :class="textClasses" :style="textColorStyle"><slot></slot></span>
  6 + <Icon v-if="closable" :class="iconClass" :color="lineColor" type="ios-close-empty" @click.native.stop="close"></Icon>
5 7 </div>
6 8 </transition>
7 9 </template>
8 10 <script>
9 11 import Icon from '../icon';
10 12 import { oneOf } from '../../utils/assist';
11   -
12 13 const prefixCls = 'ivu-tag';
13   -
  14 + const initColorList = ['blue', 'green', 'red', 'yellow', 'default'];
14 15 export default {
15 16 name: 'Tag',
16 17 components: { Icon },
... ... @@ -28,9 +29,8 @@
28 29 default: true
29 30 },
30 31 color: {
31   - validator (value) {
32   - return oneOf(value, ['blue', 'green', 'red', 'yellow', 'default']);
33   - }
  32 + type: String,
  33 + default: 'default'
34 34 },
35 35 type: {
36 36 validator (value) {
... ... @@ -58,14 +58,51 @@
58 58 }
59 59 ];
60 60 },
  61 + wraperStyles () {
  62 + return oneOf(this.color, initColorList) ? {} : {background: this.defaultTypeColor, borderColor: this.lineColor, color: this.lineColor};
  63 + },
61 64 textClasses () {
62   - return `${prefixCls}-text`;
  65 + return [
  66 + `${prefixCls}-text`,
  67 + this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '',
  68 + (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? `${prefixCls}-color-white` : ''
  69 + ];
63 70 },
64 71 dotClasses () {
65 72 return `${prefixCls}-dot-inner`;
66 73 },
  74 + iconClass () {
  75 + if (this.type === 'dot') {
  76 + return '';
  77 + } else if (this.type === 'border') {
  78 + return `${prefixCls}-color-${this.color}`;
  79 + } else {
  80 + return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : '';
  81 + }
  82 + },
67 83 showDot () {
68 84 return !!this.type && this.type === 'dot';
  85 + },
  86 + lineColor () {
  87 + if (this.type === 'dot') {
  88 + return '';
  89 + } else if (this.type === 'border') {
  90 + return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
  91 + } else {
  92 + return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : '';
  93 + }
  94 + },
  95 + dotColor () {
  96 + return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
  97 + },
  98 + textColorStyle () {
  99 + return oneOf(this.color, initColorList) ? {} : {color: this.lineColor};
  100 + },
  101 + bgColorStyle () {
  102 + return oneOf(this.color, initColorList) ? {} : {background: this.dotColor};
  103 + },
  104 + defaultTypeColor () {
  105 + return (this.type !== 'dot' && this.type !== 'border') ? (this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '') : '';
69 106 }
70 107 },
71 108 methods: {
... ... @@ -88,4 +125,4 @@
88 125 }
89 126 }
90 127 };
91 128 -</script>
  129 +</script>
92 130 \ No newline at end of file
... ...
src/styles/components/tag.less
  Show/Hide comments   View file @2ec8433
... ... @@ -27,6 +27,28 @@
27 27 }
28 28 }
29 29  
  30 + &-color{
  31 + &-red{
  32 + color: @error-color !important;
  33 + border-color: @error-color;
  34 + }
  35 + &-green{
  36 + color: @success-color !important;
  37 + border-color: @success-color;
  38 + }
  39 + &-blue{
  40 + color: @link-color !important;
  41 + border-color: @link-color;
  42 + }
  43 + &-yellow{
  44 + color: @warning-color !important;
  45 + border-color: @warning-color;
  46 + }
  47 + &-white{
  48 + color: rgb(255, 255, 255) !important;
  49 + }
  50 + }
  51 +
30 52 &-dot{
31 53 height: 32px;
32 54 line-height: 32px;
... ... @@ -54,13 +76,13 @@
54 76 &-border{
55 77 height: 24px;
56 78 line-height: 24px;
57   - border: 1px solid @border-color-split !important;
58   - color: @text-color !important;
  79 + border: 1px solid @border-color-split;
  80 + color: @border-color-split;
59 81 background: #fff !important;
60 82 position: relative;
61 83  
62 84 .@{tag-close-prefix-cls} {
63   - color: #666 !important;
  85 + color: #666;
64 86 margin-left: 12px !important;
65 87 }
66 88  
... ... @@ -68,7 +90,7 @@
68 90 content: "";
69 91 display: none;
70 92 width: 1px;
71   - background: @border-color-split;
  93 + background: currentColor;
72 94 position: absolute;
73 95 top: 0;
74 96 bottom: 0;
... ... @@ -137,7 +159,7 @@
137 159 &,
138 160 a,
139 161 a:hover {
140   - color: @text-color;
  162 + // color: @text-color;
141 163 }
142 164  
143 165 &-text {
... ... @@ -146,6 +168,7 @@
146 168 margin: 0 -8px;
147 169 padding: 0 8px;
148 170 }
  171 + color: @text-color;
149 172 }
150 173  
151 174 .@{tag-close-prefix-cls} {
... ...