Timeline 时间线

一、基础用法

image

相关代码

<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>

二、顺序时间线

有时希望每个时间节点都携带上数字，成为步骤条一样的时间线

image

相关代码

<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>

三、步骤条样式的时间线

提供一个active数字，就能判断当前时间节点是否完成，如果完成会变成√

image

相关代码

<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

可根据实际场景⾃定义节点图标。

image

相关代码

<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才能起作用。