首先，确保你已经安装了 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.pingtaimeng.com/article/detail/5816/Vant