Vue 用Vant实现时间选择器

要在Vue中使用Vant实现时间选择器，需要先安装Vant组件库，然后在Vue组件中引入相关的时间选择器组件。

首先，在命令行中使用以下命令安装Vant：

npm install vant -S

然后在Vue组件中引入相关的时间选择器组件，例如：

<template>
  <van-datetime-picker
    v-model="currentDate"
    type="datetime"
    :min-date="minDate"
    :max-date="maxDate"
    title="选择时间"
    :formatter="formatter"
  />
</template>

<script>
  export default {
    data() {
      return {
        currentDate: new Date(),
        minDate: new Date(2010, 0, 1),
        maxDate: new Date(2022, 11, 31),
      };
    },
    methods: {
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`;
        } else if (type === 'month') {
          return `${value}月`;
        } else if (type === 'day') {
          return `${value}日`;
        } else if (type === 'hour') {
          return `${value}时`;
        } else if (type === 'minute') {
          return `${value}分`;
        }
        return value;
      },
    },
  };
</script>

在上面的代码中，我们使用了Vant的`van-datetime-picker`组件来实现时间选择器。我们设置了组件的`type`为`datetime`，表示选择的是日期和时间。我们还设置了`min-date`和`max-date`来限制可选的时间范围。

最后，我们还定义了一个`formatter`方法，用来自定义显示的时间格式。

以上就是使用Vant实现时间选择器的基本步骤。