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)文章
實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例
這篇文章主要介紹了實(shí)現(xiàn)一個(gè)Vue自定義指令懶加載的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06vue+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)目完整步驟
這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運(yùn)行項(xiàng)目的相關(guān)資料,文中通過實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06