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
| <script>
| export default {
| name: 'ElTag',
| props: {
| text: String,
| closable: Boolean,
| type: String,
| hit: Boolean,
| disableTransitions: Boolean,
| color: String,
| size: String,
| effect: {
| type: String,
| default: 'light',
| validator(val) {
| return ['dark', 'light', 'plain'].indexOf(val) !== -1;
| }
| }
| },
| methods: {
| handleClose(event) {
| event.stopPropagation();
| this.$emit('close', event);
| },
| handleClick(event) {
| this.$emit('click', event);
| }
| },
| computed: {
| tagSize() {
| return this.size || (this.$ELEMENT || {}).size;
| }
| },
| render(h) {
| const { type, tagSize, hit, effect } = this;
| const classes = [
| 'el-tag',
| type ? `el-tag--${type}` : '',
| tagSize ? `el-tag--${tagSize}` : '',
| effect ? `el-tag--${effect}` : '',
| hit && 'is-hit'
| ];
| const tagEl = (
| <span
| class={ classes }
| style={{ backgroundColor: this.color }}
| on-click={ this.handleClick }>
| { this.$slots.default }
| {
| this.closable && <i class="el-tag__close el-icon-close" on-click={ this.handleClose }></i>
| }
| </span>
| );
|
| return this.disableTransitions ? tagEl : <transition name="el-zoom-in-center">{ tagEl }</transition>;
| }
| };
| </script>
|
|
