x-extends/vxe-pc-ui

关于<vxe-input>控件blur事件与clear冲突的bug

lonelyR3 opened this issue · 3 comments

可复现的链接(包含复现链接与示例代码):

<vxe-input v-model="testParam" type="integer" @blur="handleEditBlur(testParam)" />

问题描述与截图:

问题描述:在编辑状态下,点击clear按钮(默认的那个输入框尾部的X按钮,清除文本框内容),会触发blur事件,但是此时clear事件还没有执行,导致传入blur事件的参数是清除之前的参数。
具体问题:如下列代码中,希望得到的是点击clear的叉叉,先执行清除事件清除row.deliveryQty的值,然后再执行blur事件,使传入handleEditBlur方法中的row的deliveryQty是清除后的值(即空)。
具体使用截图:
image
image
image
推测原因:因为blur事件绑定的是input,而input和clear是兄弟层级,没有包含关系,如下图
image
故点击clear的icon的时候,首先触发了input的blur,然后才执行clear-icon的清除事件,导致传入blur的参数是清除前的参数

文字版代码:
<vxe-column
field="deliveryQty"
title="发货数量"
:edit-render="{ autofocus: '.vxe-input--inner', placeholder: '请输入' }"

<template #edit="{ row }">
<vxe-input v-model="row.deliveryQty" type="integer" @blur="handleEditBlur(row)" />


图片版代码:
image

PixPin_2024-05-10_09-43-00

期望的结果:

控件点击clear-icon时,先触发清空再触发blur

操作系统:

win 11

浏览器版本:

chrome 126.0.6478.128(正式版本) (64 位)

vue 版本:

3.3.4

vxe-pc-ui 版本:

4.0.78

vxe-table 版本:

4.7.46

是否使用当前最新版本?

  • 我已确认是使用当前的最新版本并已按要求提供复现链接与示例代码。

建议使用 change 事件,blur 不一定可控

建议使用 change 事件,blur 不一定可控

使用change事件的话消耗有点大,如果做保存功能的话每次键盘输入都要执行一次保存,输入54321就会保存5次。还是希望失焦的时候才执行。

建议使用 change 事件,blur 不一定可控

现在的问题是clear的时候blur事件触发的比清除早