vue3 element-plus格式化TimePicker的model值

在 Vue 3 中使用 Element Plus 的 TimePicker 组件时，可以使用 `v-model` 指令绑定时间选择器的值。由于 `v-model` 默认绑定的是 Date 类型的值，因此需要对其进行格式化。

可以通过 `model-value-format` 和 `value-format` 属性来控制时间选择器的值和显示格式。

下面是一个示例代码：

<template>
  <el-time-picker v-model="time" :model-value-format="modelValueFormat" :value-format="valueFormat"></el-time-picker>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const time = ref(null);

    const modelValueFormat = (val) => {
      if (!val) return null;
      const hour = val.getHours().toString().padStart(2, '0');
      const minute = val.getMinutes().toString().padStart(2, '0');
      return `${hour}:${minute}`;
    };

    const valueFormat = (val) => {
      if (!val) return null;
      const [hour, minute] = val.split(':');
      const date = new Date();
      date.setHours(hour);
      date.setMinutes(minute);
      return date;
    };

    return {
      time,
      modelValueFormat,
      valueFormat,
    };
  },
};
</script>

在上面的代码中，我们使用了 `ref` 创建了一个响应式的 `time` 变量，用于保存时间选择器的值。同时，我们定义了两个函数 `modelValueFormat` 和 `valueFormat`，用于格式化 `v-model` 绑定的值和时间选择器的显示格式。

`modelValueFormat` 函数的作用是将时间选择器的值格式化为字符串，例如 `12:30`。在函数中，我们使用 `getHours()` 和 `getMinutes()` 方法获取小时和分钟，并使用 `padStart()` 方法将其转换为两位数的字符串。

`valueFormat` 函数的作用是将时间选择器显示的字符串格式化为 Date 对象。在函数中，我们使用 `split()` 方法将字符串分割成小时和分钟的数组，然后使用 `setHours()` 和 `setMinutes()` 方法将其设置到一个新的 Date 对象中。

最后，在模板中，我们使用 `v-model` 指令将时间选择器的值绑定到 `time` 变量上，并使用 `model-value-format` 和 `value-format` 属性指定格式化函数。