ant design vue TimePicker时间选择器不点击确认也可以设置值

文章目录

前言
一、背景
二、操作步骤
- 1.复现前的准备工作
- - （1）vue版本和ant design vue 版本
  - （2）任意ant design vue TimePicker的demo
- 2.解决问题
- - （1）使用change时间（无效）
  - （2）使用blue（失去焦点）
- 3.图示逻辑
总结

前言

提示：

一、背景

背景：
- Ant design vue + vue3的项目，每次选择时间，都需要点击确认后才会赋值，不然会重置为之前的。而文档中并没有关系不点击确认就可以获取值的方式：例如默认为空，点击时间为00:05，点击确定，值为00:05，点击其他地方，值重置为空。
- - 技术定位：初级

二、操作步骤

1.复现前的准备工作

（1）vue版本和ant design vue 版本

"ant-design-vue": "^3.2.20",
"vue": "^3.2.33",

（2）任意ant design vue TimePicker的demo

代码就不贴了，官网上都有

2.解决问题

（1）使用change时间（无效）

当你加伤change事件的时候，你选中值会发现，change事件没有触发，有且只有点击【确定】按钮的时候会触发change事件，这和我们的需求有冲突，所以首先排除了

（2）使用blue（失去焦点）


<template><div id="accelerationConfigId" @click.stop="clickHandle"><FormItem name="time" label="调度周期" class="w-45%" :autoLink="false"><TimePicker v-model:value="formData.time" :showNow="false" id="timePickerId":inputReadOnly="true" format="HH:mm" value-format="HH:mm" :open="timeOpen" :hideDisabledOptions="true"placeholder="时间" @blur="(e: Event) => handleBlur(e)" @click.stop="timeClick" /></FormItem></div>
</template><script setup lang="ts">// 监听点击事件function clickHandle() {if (timeOpen.value) {blurTimePicker()}}const handleBlur = (e: Event) => {blurTimePicker()e.preventDefault();}const timeOpen = ref(false)function blurTimePicker() {const timePickerDom = document.getElementById('timePickerId')const inputValue = timePickerDom ? (timePickerDom as HTMLInputElement).value : ''timeOpen.value = falseformData.time = inputValue}function timeClick() {timeOpen.value = true}
</script>