Element Timeline時(shí)間線怎么實(shí)現(xiàn)

這篇文章給大家分享的是有關(guān)Element Timeline時(shí)間線怎么實(shí)現(xiàn)的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

組件—時(shí)間線

基礎(chǔ)用法

<div class="block">
  <div class="radio">
    排序：
    <el-radio-group v-model="reverse">
      <el-radio :label="true">倒序</el-radio>
      <el-radio :label="false">正序</el-radio>
    </el-radio-group>
  </div>

  <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
</div>

<script>
  export default {
    data() {
      return {
        reverse: true,
        activities: [{
          content: '活動(dòng)按期開始',
          timestamp: '2018-04-15'
        }, {
          content: '通過審核',
          timestamp: '2018-04-13'
        }, {
          content: '創(chuàng)建成功',
          timestamp: '2018-04-11'
        }]
      };
    }
  };
</script>

?定義節(jié)點(diǎn)樣式

<div class="block">
  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :icon="activity.icon"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>
</div>

<script>
  export default {
    data() {
      return {
        activities: [{
          content: '支持使用圖標(biāo)',
          timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        }, {
          content: '支持自定義顏色',
          timestamp: '2018-04-03 20:46',
          color: '#0bbd87'
        }, {
          content: '支持自定義尺寸',
          timestamp: '2018-04-03 20:46',
          size: 'large'
        }, {
          content: '默認(rèn)樣式的節(jié)點(diǎn)',
          timestamp: '2018-04-03 20:46'
        }]
      };
    }
  };
</script>

?定義時(shí)間戳

<div class="block">
  <el-timeline>
    <el-timeline-item timestamp="2018/4/12" placement="top">
      <el-card>
        <h5>更新 Github 模板</h5>
        <p>王小虎 提交于 2018/4/12 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/3" placement="top">
      <el-card>
        <h5>更新 Github 模板</h5>
        <p>王小虎 提交于 2018/4/3 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/2" placement="top">
      <el-card>
        <h5>更新 Github 模板</h5>
        <p>王小虎 提交于 2018/4/2 20:46</p>
      </el-card>
    </el-timeline-item>
  </el-timeline>
</div>

Timeline Attributes

Timeline-item Attributes

Timeline-Item Slot

感謝各位的閱讀！關(guān)于“Element Timeline時(shí)間線怎么實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！