Blame view

components/timeline/timeline-item.vue 1.81 KB
7fa943eb   梁灏   init
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
  <template>
      <li :class="itemClasses">
          <div :class="tailClasses"></div>
          <div :class="headClasses" :style="customColor">
              <slot name="dot"></slot>
          </div>
          <div :class="contentClasses">
              <slot></slot>
          </div>
      </li>
  </template>
  <script>
      const prefixCls = 'ivu-timeline';
  
      export default {
          props: {
              color: {
                  type: String,
                  default: 'blue'
              }
          },
          data () {
              return {
                  dot: false
              }
          },
          ready () {
              this.dot = this.$children.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>