van-datetime-picker 自定义时间

要自定义时间选择器（van-datetime-picker），你需要使用van-datetime-picker组件的属性和事件来实现。下面是一个示例代码和解释，帮助你自定义时间选择器：

<template>
  <div>
    <van-datetime-picker
      v-model="value"
      type="time"
      :formatter="formatter"
      :columns-order="columnsOrder"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: new Date(),
      columnsOrder: ['minute', 'second'], // 自定义时间选择器的列顺序
    };
  },
  methods: {
    formatter(type, value) {
      if (type === 'minute') {
        return `${value}分`; // 自定义分钟的格式
      }
      if (type === 'second') {
        return `${value}秒`; // 自定义秒的格式
      }
      return value;
    },
    onConfirm(value) {
      console.log(value); // 在确认选择后触发的事件，你可以在这里处理选择的时间值
    },
  },
};
</script>

在上面的示例中，我们使用了`v-model`指令来绑定时间选择器的值到`value`属性。`type`属性设置为`time`表示我们只选择时间。`formatter`属性用于自定义显示的时间格式，我们根据类型（minute或second）返回自定义格式。`columnsOrder`属性设置为我们想要的列顺序，这里我们只选择了分钟和秒钟。`@confirm`事件在确认选择后触发，我们可以在这里处理选择的时间值。

你可以根据需要修改上述代码，并根据van-datetime-picker的文档进行更多自定义。希望对你有帮助！