other / mew-iview

  <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>