当前位置：首页 > article >正文

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

article 2024/10/22 1:29:15

文章目录

前言
一、背景
二、操作步骤
- 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 = false
    formData.time = inputValue
  }

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