Antd Vue：时间选择器的使用

2023-02-14 周二

文档地址

基础用法

<a-time-picker :value="time" @change="onChange" />

设置选择器展示格式

默认为时分秒

TimePicker 浮层中的列会随着 format 变化，当略去 format 中的某部分时，浮层中对应的列也会消失。

// 十分
<a-time-picker :value="value " @change="onChange"  format="HH:mm"/>

数据格式

没有值

赋值为null即可

有值

该组件的change事件会有两个形参

  methods: {
    onChange(time, timeString) {
      this.value = time;
      console.log(time, timeString);
    },
  },

这两个参数分别是：

1. time：moment对象

举个例子

time

赋值

如果将value赋值为moment对象，则<a-time-picker>可以直接使用该值渲染。

2. timeString：moment对象，根据<a-time-picker>组件中format设定好的规则，转化后得到的值

举个例子，规则是 HH：mm

则timeString为：12:12

赋值

如果将value赋值为 timeString，则<a-time-picker>需要对该值再进行转化。

<a-time-picker :value="moment(value, 'HH:mm')"/>