欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2021年10月01日 09:08:34   作者:ForeverJPB.  
本文主要介紹了Element Timeline時(shí)間線的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

組件—時(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>
        <h4>更新 Github 模板</h4>
        <p>王小虎 提交于 2018/4/12 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/3" placement="top">
      <el-card>
        <h4>更新 Github 模板</h4>
        <p>王小虎 提交于 2018/4/3 20:46</p>
      </el-card>
    </el-timeline-item>
    <el-timeline-item timestamp="2018/4/2" placement="top">
      <el-card>
        <h4>更新 Github 模板</h4>
        <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)的文章就介紹到這了,更多相關(guān)Element Timeline時(shí)間線內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Sublime Text新建.vue模板并高亮(圖文教程)

    Sublime Text新建.vue模板并高亮(圖文教程)

    這篇文章主要介紹了Sublime Text新建.vue模板并高亮(圖文教程),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-10-10
  • Vue.js每天必學(xué)之構(gòu)造器與生命周期

    Vue.js每天必學(xué)之構(gòu)造器與生命周期

    Vue.js每天必學(xué)之構(gòu)造器與生命周期,告訴大家什么是Vue.js構(gòu)造器與生命周期,感興趣的小伙伴們可以參考一下
    2016-09-09
  • vue項(xiàng)目中api接口管理總結(jié)

    vue項(xiàng)目中api接口管理總結(jié)

    本篇文章給大家介紹了vue項(xiàng)目中API接口管理的相關(guān)知識(shí)點(diǎn),以及相關(guān)JS代碼分析,有興趣的朋友參考下。
    2018-04-04
  • vue中使用Tinymce的示例代碼

    vue中使用Tinymce的示例代碼

    這篇文章主要介紹了vue中使用Tinymce的示例,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-08-08
  • 實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例

    實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例

    這篇文章主要介紹了實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • 解析Vue2.0雙向綁定實(shí)現(xiàn)原理

    解析Vue2.0雙向綁定實(shí)現(xiàn)原理

    本篇文章主要介紹了解析Vue2.0雙向綁定實(shí)現(xiàn)原理,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-02-02
  • Vue匿名插槽與作用域插槽的合并和覆蓋行為

    Vue匿名插槽與作用域插槽的合并和覆蓋行為

    這篇文章主要介紹了Vue基礎(chǔ)-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-04-04
  • vue驗(yàn)證碼(identify)插件使用方法詳解

    vue驗(yàn)證碼(identify)插件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了vue驗(yàn)證碼插件使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue+jsplumb實(shí)現(xiàn)工作流程圖的項(xiàng)目實(shí)踐

    vue+jsplumb實(shí)現(xiàn)工作流程圖的項(xiàng)目實(shí)踐

    本文主要介紹了vue+jsplumb實(shí)現(xiàn)工作流程圖的項(xiàng)目實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • 離線搭建vue環(huán)境運(yùn)行項(xiàng)目完整步驟

    離線搭建vue環(huán)境運(yùn)行項(xiàng)目完整步驟

    這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運(yùn)行項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2023-06-06

最新評(píng)論