Timeline 时间轴

Props

timeline

Demo

template

<div class="timeline-demo">
  <timeline :color="color">
    <timeline-item>
      <h4 class="recent">【广东】 广州市 已发出</h4>
      <p class="recent">2016-04-17 12:00:00</p>
    </timeline-item>
    <timeline-item>
      <h4> 申通快递员 广东广州 收件员 xxx 已揽件</h4>
      <p>2016-04-16 10:23:00</p>
    </timeline-item>
    <timeline-item>
      <h4> 商家正在通知快递公司揽件</h4>
      <p>2016-04-15 9:00:00</p>
    </timeline-item>
  </timeline>
</div>

动态改变条目数量

template

<div class="timeline-demo">
  <timeline>
    <timeline-item v-for="i in count">
      <h4 :class="[i === 0 ? 'recent' : '']">Timeline Node NaN</h4>
      <p :class="[i === 0 ? 'recent' : '']">index NaN</p>
    </timeline-item>
  </timeline>
  <x-button type="primary" @click="count = 6"> Set to 6 nodes</x-button>
  <x-button type="primary" @click="count = 3"> Set to 3 nodes</x-button>
</div>

script

export default {
  data () {
    return {
      count: 3
    }
  }
}

style

.timeline-demo p {
    color: #888;
    font-size: 0.8rem;
  }
  .timeline-demo h4 {
    color: #666;
    font-weight: normal;
  }
  .timeline-demo .recent {
    color: rgb(4, 190, 2);
  }</code></pre>