Timeline 時(shí)間線(xiàn)
一蛉鹿、基礎(chǔ)用法
image
相關(guān)代碼
<template>
<my-timeline>
<my-timeline-item timestamp="2021-07-01"> 第一天 </my-timeline-item>
<my-timeline-item timestamp="2021-07-02"> 第二天 </my-timeline-item>
<my-timeline-item timestamp="2021-07-03"> 第三天 </my-timeline-item>
</my-timeline>
</template>
<script>
import MyTimeline from "@/components/common/timeline/MyTimeline.vue";
import MyTimelineItem from "@/components/common/timeline/MyTimelineItem.vue";
export default {
name: "Test",
components: {
MyTimeline,
MyTimelineItem,
},
setup() {
return {};
},
};
</script>
二瓢阴、順序時(shí)間線(xiàn)
有時(shí)希望每個(gè)時(shí)間節(jié)點(diǎn)都攜帶上數(shù)字络拌，成為步驟條一樣的時(shí)間線(xiàn)
image
相關(guān)代碼
<template>
<my-timeline>
<my-timeline-item :number="1" timestamp="2021-07-01">
第一天
</my-timeline-item>
<my-timeline-item :number="2" timestamp="2021-07-02">
第二天
</my-timeline-item>
<my-timeline-item :number="3" timestamp="2021-07-03">
第三天
</my-timeline-item>
</my-timeline>
</template>
<script>
import MyTimeline from "@/components/common/timeline/MyTimeline.vue";
import MyTimelineItem from "@/components/common/timeline/MyTimelineItem.vue";
export default {
name: "Test",
components: {
MyTimeline,
MyTimelineItem,
},
setup() {
return {};
},
};
</script>
三鬼癣、步驟條樣式的時(shí)間線(xiàn)
提供一個(gè)active數(shù)字饵骨，就能判斷當(dāng)前時(shí)間節(jié)點(diǎn)是否完成翘悉，如果完成會(huì)變成√
image
相關(guān)代碼
<template>
<my-timeline :active="2">
<my-timeline-item :number="1" timestamp="2021-07-01">
第一天
</my-timeline-item>
<my-timeline-item :number="2" timestamp="2021-07-02">
第二天
</my-timeline-item>
<my-timeline-item :number="3" timestamp="2021-07-03">
第三天
</my-timeline-item>
</my-timeline>
</template>
<script>
import MyTimeline from "@/components/common/timeline/MyTimeline.vue";
import MyTimelineItem from "@/components/common/timeline/MyTimelineItem.vue";
export default {
name: "Test",
components: {
MyTimeline,
MyTimelineItem,
},
setup() {
return {};
},
};
</script>
四、自定icon
可根據(jù)實(shí)際場(chǎng)景?定義節(jié)點(diǎn)圖標(biāo)居触。
image
相關(guān)代碼
<template>
<my-timeline :active="4">
<my-timeline-item :number="1" timestamp="2021-07-01">
第一天
</my-timeline-item>
<my-timeline-item :number="2" timestamp="2021-07-02">
第二天
</my-timeline-item>
<my-timeline-item :number="3" timestamp="2021-07-03">
<template #icon>
<i class="el-icon-circle-close" style="color: #f56c6c"></i>
</template>
第三天
</my-timeline-item>
</my-timeline>
</template>
<script>
import 'element-plus/lib/theme-chalk/index.css'
import MyTimeline from "@/components/common/timeline/MyTimeline.vue";
import MyTimelineItem from "@/components/common/timeline/MyTimelineItem.vue";
export default {
name: "Test",
components: {
MyTimeline,
MyTimelineItem,
},
setup() {
return {};
},
};
</script>
注意此處使用到了elementplus的icon妖混，引入elementplus的css才能起作用包吝。
