1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
| <template>
| <transition name="fade" v-if="fade">
| <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" @click.native.stop="close"></Icon>
| </div>
| </transition>
| <div v-else :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" @click.native.stop="close"></Icon>
| </div>
| </template>
| <script>
| import Icon from '../icon';
| import { oneOf } from '../../utils/assist';
| const prefixCls = 'ivu-tag';
| const initColorList = ['default', 'primary', 'success', 'warning', 'error', 'blue', 'green', 'red', 'yellow', 'pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
| const colorList = ['pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
|
| export default {
| name: 'Tag',
| components: { Icon },
| props: {
| closable: {
| type: Boolean,
| default: false
| },
| checkable: {
| type: Boolean,
| default: false
| },
| checked: {
| type: Boolean,
| default: true
| },
| color: {
| type: String,
| default: 'default'
| },
| type: {
| validator (value) {
| return oneOf(value, ['border', 'dot']);
| }
| },
| name: {
| type: [String, Number]
| },
| fade: {
| type: Boolean,
| default: true
| },
| // 4.0.0
| size: {
| validator (value) {
| return oneOf(value, ['default', 'medium', 'large']);
| },
| default: 'default'
| }
| },
| data () {
| return {
| isChecked: this.checked
| };
| },
| computed: {
| classes () {
| return [
| `${prefixCls}`,
| `${prefixCls}-size-${this.size}`,
| {
| [`${prefixCls}-${this.color}`]: !!this.color && oneOf(this.color, initColorList),
| [`${prefixCls}-${this.type}`]: !!this.type,
| [`${prefixCls}-closable`]: this.closable,
| [`${prefixCls}-checked`]: this.isChecked
| }
| ];
| },
| wraperStyles () {
| return oneOf(this.color, initColorList) ? {} : {background: this.isChecked ? this.defaultTypeColor : 'transparent', borderWidth: '1px', borderStyle: 'solid', borderColor: ((this.type !== 'dot' && this.type !== 'border' && this.isChecked) ? this.borderColor : this.lineColor), color: this.lineColor};
| },
| textClasses () {
| return [
| `${prefixCls}-text`,
| this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '',
| (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked && colorList.indexOf(this.color) < 0 ? `${prefixCls}-color-white` : '') : ''
| ];
| },
| dotClasses () {
| return `${prefixCls}-dot-inner`;
| },
| iconClass () {
| if (this.type === 'dot') {
| return '';
| } else if (this.type === 'border') {
| return oneOf(this.color, initColorList) ? `${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)') : '';
| }
| },
| borderColor () {
| return this.color !== undefined ? (this.color === 'default' ? '' : this.color) : '';
| },
| dotColor () {
| return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
| },
| textColorStyle () {
| return oneOf(this.color, initColorList) ? {} : ((this.type !== 'dot' && this.type !== 'border') ? (this.isChecked ? {color: this.lineColor} : {}) : {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: {
| close (event) {
| if (this.name === undefined) {
| this.$emit('on-close', event);
| } else {
| this.$emit('on-close', event, this.name);
| }
| },
| check () {
| if (!this.checkable) return;
| const checked = !this.isChecked;
| this.isChecked = checked;
| if (this.name === undefined) {
| this.$emit('on-change', checked);
| } else {
| this.$emit('on-change', checked, this.name);
| }
| }
| },
| watch: {
| checked (val) {
| this.isChecked = val;
| }
| }
| };
| </script>
|
|
