【Element Plus系列】解决 DatePicker 组件清空时,触发两次change

问题描述

el-date-picker 组件在 Element Plus 库中用于日期选择(daterange、datetimerange、monthrange、yearrange),并且在选择日期范围时确实会触发两次 change 事件。这是因为,当用户选择了范围的开始时,会立即触发一次 change 事件。而当用户选择了范围的结束时,又会触发一次 change 事件。

解决方案

为了解决这个问题,可以采取以下几种策略:

延迟更新

html 复制代码
<script setup lang="ts">
import { ElementPlus } from '@element-plus/icons-vue';
import { version as epVersion } from 'element-plus';
import { ref, version as vueVersion } from 'vue';
const value2 = ref("");
let debounceTimer = null;

const handleChangeDebounced = (val:any) => {
  handleChange(val);
}
const handleChange = (val:any) => {
  // 清除已经设置的定时器,以防止多个事件被延迟执行
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    console.log('Date changed:', val);
  }, 300); // 延迟300毫秒执行
};
</script>

<template>
  <p>
    <el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>
    Element Plus {{ epVersion }} + Vue {{ vueVersion }}
  </p>
  <el-divider/>
   <el-date-picker
      v-model.lazy="value2"
      type="datetimerange"
      range-separator="To"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="handleChangeDebounced"
    />
</template>

【注意】这种方案适合所有时间范围选择(daterange、datetimerange、monthrange、yearrange),但考虑到 JavaScript 是单线程的,如果在指定的时间点上有大量代码正在执行,setTimeout 里的函数可能会被延迟执行。每一个 setTimeou t都是在增加一个新的JavaScript任务,绝对的会影响浏览器主线程的,会造成一定程度达到卡机。

change、clear事件结合

html 复制代码
<script setup lang="ts">
import { ElementPlus } from '@element-plus/icons-vue'
import { version as epVersion } from 'element-plus'
import { ref, version as vueVersion } from 'vue'

const value1 = ref("");
const handlerDateChange = (val:any) => {
  if(val){
    console.log(8)
  }
}

const handlerDateClear = () => {
  console.log(12)
}
</script>

<template>
  <p>
    <el-icon color="var(--el-color-primary)"><ElementPlus /></el-icon>
    Element Plus {{ epVersion }} + Vue {{ vueVersion }}
  </p>

  <el-date-picker
    v-model="value1"
    type="monthrange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @change="handlerDateChange"
    @clear="handlerDateClear"
    />
</template>

【注意】这种方案适合daterange、monthrange、yearrange等三种时间范围选择。

相关推荐
前端李二牛5 分钟前
现代CSS属性兼容性问题及解决方案
前端·css
星光不问赶路人9 分钟前
TypeScript 模块扩展
vue.js·typescript
贰月不是腻月21 分钟前
凭什么说我是邪修?
前端
中等生24 分钟前
一文搞懂 JavaScript 原型和原型链
前端·javascript
前端李二牛25 分钟前
现代化图片组件设计思路与实现方案
前端·html
黑椒牛肉焖饭25 分钟前
web第一次作业
前端·javascript·html
一枚前端小能手43 分钟前
Vue3 开发中的5个实用小技巧
前端
Sawtone43 分钟前
shadcn/ui:我到底是不是组件库啊😭图文 + 多个场景案例详解 shadcn + tailwind 颠覆性组件开发,小伙伴直呼高端
前端·面试
柏成43 分钟前
qiankun 微前端框架🐳
前端·javascript·vue.js
Sherry0071 小时前
终极指南:彻底搞懂 React 的 useMemo 和 useCallback!(译)
前端·react.js