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
| <template>
| <li :class="itemClasses">
| <div :class="tailClasses"></div>
| <div :class="headClasses" :style="customColor" ref="dot"><slot name="dot"></slot></div>
| <div :class="contentClasses">
| <slot></slot>
| </div>
| </li>
| </template>
| <script>
| const prefixCls = 'ivu-timeline';
|
| export default {
| name: 'TimelineItem',
| props: {
| color: {
| type: String,
| default: 'blue'
| }
| },
| data () {
| return {
| dot: false
| };
| },
| mounted () {
| this.dot = this.$refs.dot.innerHTML.length ? true : false;
| },
| computed: {
| itemClasses () {
| return `${prefixCls}-item`;
| },
| tailClasses () {
| return `${prefixCls}-item-tail`;
| },
| headClasses () {
| return [
| `${prefixCls}-item-head`,
| {
| [`${prefixCls}-item-head-custom`]: this.dot,
| [`${prefixCls}-item-head-${this.color}`]: this.headColorShow
| }
| ];
| },
| headColorShow () {
| return this.color == 'blue' || this.color == 'red' || this.color == 'green';
| },
| customColor () {
| let style = {};
| if (this.color) {
| if (!this.headColorShow) {
| style = {
| 'color': this.color,
| 'border-color': this.color
| };
| }
| }
|
| return style;
| },
| contentClasses () {
| return `${prefixCls}-item-content`;
| }
| }
| };
| </script>
|
|
