ant-design-vue 时间线使用踩坑及解决

简介

ant-design-vue 是基于 Vue.js 的 UI 组件库，其中时间线组件可以方便地呈现时间序列。本文主要讲解在使用 ant-design-vue 时间线组件过程中的常见问题及解决方案。

踩坑

1. 设置时间线节点图标为空时，图标仍然显示圆形

在 ant-design-vue 时间线组件中，可以通过设置节点的 icon 属性来指定节点图标。当想要设置节点图标为空时，可以将 icon 属性设置为 null。但是，在设置为 null 后，节点仍然显示圆形。

解决方案：

可以通过设置 icon 属性的值为一个空字符来将节点图标设置为空，即 :icon="' '"。

示例代码：

<template>
  <a-timeline>
    <a-timeline-item
      :icon="' '"
      color="blue"
    >
      Node1
    </a-timeline-item>
    <a-timeline-item
      :icon="' '"
      color="gray"
    >
      Node2
    </a-timeline-item>
  </a-timeline>
</template>

1. 设置时间线节点时间格式

在时间线节点中，可以通过设置 label 属性来显示节点的时间信息。但是，默认情况下，使用的时间格式是 “年-月-日 时:分:秒”的格式，有时需要使用其他时间格式。

解决方案：

可以通过两种方式来改变时间线节点的时间格式。

第一种方式是使用时间格式化工具，例如 moment.js。将时间转换为需要的格式，然后作为 label 属性的值。示例代码如下：

<template>
  <a-timeline>
    <a-timeline-item
      :label="moment('2022-01-01 12:00:00').format('YYYY年M月D日')"
    >
      Node1
    </a-timeline-item>
    <a-timeline-item
      :label="moment().format('YYYY年M月D日')"
    >
      Node2
    </a-timeline-item>
  </a-timeline>
</template>
<script>
import moment from 'moment';
export default {
  data() {
    return {
      moment: moment
    }
  }
}
</script>

第二种方式是使用 slot 来自定义时间格式。示例代码如下：

<template>
  <a-timeline>
    <a-timeline-item>
      <template #label>
        {{ formatDate('2022-01-01 12:00:00') }}
      </template>
      Node1
    </a-timeline-item>
    <a-timeline-item>
      <template #label>
        {{ formatDate() }}
      </template>
      Node2
    </a-timeline-item>
  </a-timeline>
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    formatDate(time = moment().format()) {
      return moment(time).format('YYYY年M月D日');
    }
  }
}
</script>

结论

使用 ant-design-vue 时间线组件时，需要注意设置节点图标为空的方式和自定义节点的时间格式的方法。掌握这些技巧可以让时间线组件更适配不同的场景需求。