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

---

前言

提示：

---

一、背景

• 背景：
  • 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 = false
    formData.time = inputValue
  }

  function timeClick() {
    timeOpen.value = true
  }
</script>

3.图示逻辑

---

总结

ant design vue TimePicker 不支持change事件设置值，只能在失去焦点的时候间接获取的处理方式，注意需要点点击点时候加上禁止冒泡

原文地址：https://blog.csdn.net/weixin_44784401/article/details/143055810

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！