在 Vant4 中,van-datetime-picker 组件可以用于选择日期和时间,包括时间选择。以下是一个简单的例子,演示如何在 Vant4 中使用时间选择器:

首先,确保你已经安装了 Vant4:
npm install vant@next

然后,在你的 Vue 组件中引入 van-datetime-picker:
<template>
  <div>
    <van-datetime-picker
      v-model="selectedTime"
      type="time"
      title="选择时间"
      :min-hour="minHour"
      :max-hour="maxHour"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import { DatetimePicker } from 'vant';
import 'vant/lib/index.css'; // 引入样式

export default {
  components: {
    [DatetimePicker.name]: DatetimePicker,
  },
  setup() {
    const selectedTime = ref(new Date());
    const minHour = ref(0); // 设置最小小时
    const maxHour = ref(23); // 设置最大小时

    return {
      selectedTime,
      minHour,
      maxHour,
    };
  },
};
</script>

在上面的例子中,我们使用了 van-datetime-picker 组件,并通过 v-model 指令将选中的时间与一个 Vue 变量 selectedTime 进行双向绑定。

我们设置了 type 属性为 "time",表示选择的是时间。通过 title 属性设置选择器的标题,通过 min-hour 和 max-hour 属性设置可选的最小和最大小时。

你可以根据实际需求,进一步设置其他属性来满足你的需求。


转载请注明出处:http://www.zyzy.cn/article/detail/5816/Vant