目前时间组件还属于实验室组件，要使用需要单独引入，具体使用方式查看官网
创建公共时间选择器组件
common-time-pickers.vue 子组件页面
<template><div><v-dialog v-model="props.timeItem.isShow" activator="parent" width="auto"><v-time-pickerv-if="props.timeItem.isShow"v-model="timeVal"use-secondsformat="24hr"color="primary"class="pa-0"@update:hour="updateHour"@update:minute="updateMinute"@update:second="updateSecond"><template v-slot:title><!-- title null --></template><template v-slot:actions><div class="mt-6"><v-btn @click="emit('close')">取消</v-btn><v-btn color="primary" @click="saveTime">确认</v-btn></div></template></v-time-picker></v-dialog></div>
</template><script setup>
const props = defineProps({timeItem: {type: Object,default: () => {return {isShow: false,time: "00:00:00",index: 0, //操作索引，可不传type: "", //操作类型};},},
});const emit = defineEmits(["update:timeItem", "close"]);const timeVal = ref(props.timeItem.time);const hours = ref(0);
const minutes = ref(0);
const seconds = ref(0);watch(toRef(props, "timeItem"),(newVal) => {if (newVal.isShow) {timeVal.value = newVal.time;// const [h, m, s] = newVal.time.split(':');// hours.value = parseInt(h, 10);// minutes.value = parseInt(m, 10);// seconds.value = parseInt(s, 10);// updateTimeVal();}},{ deep: true }
);// 因为组件中使用了use-second，默认只有在“秒”发生改变时，v-model中的值才会更新，
// 所以需要额外绑定“时”、“分”、“秒” 的事件进行处理
const updateHour = (val) => {hours.value = val;updateTimeVal("hour");
};const updateMinute = (val) => {minutes.value = val;updateTimeVal("minute");
};const updateSecond = (val) => {seconds.value = val;updateTimeVal("second");
};const updateTimeVal = (updatedPart) => {let [currentHours, currentMinutes, currentSeconds] = timeVal.value.split(":");// 确保每次更新时不改变其他值，否则修改“时”或其他值时，可能会导致“分”和“秒”被联动更改if (updatedPart === "hour") {currentHours = padZero(hours.value);} else if (updatedPart === "minute") {currentMinutes = padZero(minutes.value);} else if (updatedPart === "second") {currentSeconds = padZero(seconds.value);}timeVal.value = `${currentHours}:${currentMinutes}:${currentSeconds}`;// console.log("更新了++++", timeVal.value);
};const padZero = (num) => {return num < 10 ? "0" + num : num.toString();
};const saveTime = () => {emit("close");emit("update:timeItem", {time: timeVal.value,index: props.timeItem.index,type: props.timeItem.type,});
};
</script><style lang="scss" scoped></style>页面效果
我这里修改的是表格中的开始时间和结束时间，属于数组中值需要遍历，如果你只需要设置单个值，可不传索引
父组件中使用
vue中
<template><div><!--输入框调用子组件，可以有多个输入框，这里只演示一个，item.endTime是输入框同步的时间，也会更新到子组件中，index是操作的对象索引，如果不传递需要对selecteTime方法稍作修改，endTime是修改的对象键值，方便拿到返回值时更新父组件的值--><v-text-fieldv-model="item.endTime"readonlyhide-detailsdensity="compact"@click="selecteTime(item.endTime, index, 'endTime')"></v-text-field><!--引入组件--><common-time-pickers:timeItem="timeItem"@close="timeItem.isShow = false"@update:timeItem="updateTimeItem"/></div>
</template>
script中
import commonTimePickers from "@/components/common-time-pickers.vue"<script setup>
const timeItem = ref({});// 输入框触发，选择时间
const selecteTime = (time, index, type) => {timeItem.value = {isShow: true,//打开弹框time,//时间，需要同步更新到子组件中index,//修改的对象索引（非必须）type,//修改的对象字段类型};
};//确认更新时间
const updateTimeItem = (payload) => {timeItem.value.isShow = false;const { time, index, type } = payload;// console.log("确定时间>>>", payload);// 使用展开运算符和计算属性名更新对象// 更新desserts数组中索引为index的type字段值（已经可以收到时间子组件传递过来的最新的值了，根据自己的需求更改父组件中值）desserts.value[index] = { ...desserts.value[index], [type]: time };
};</script>
