Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
lonelyR3 opened this issue Jul 22, 2024 · 3 comments
Open
1 task done

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

lonelyR3 opened this issue Jul 22, 2024 · 3 comments
Labels
bug Something isn't working

Comments

@lonelyR3
Copy link

lonelyR3 commented Jul 22, 2024

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

<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

是否使用当前最新版本?

  • 我已确认是使用当前的最新版本并已按要求提供复现链接与示例代码。
@lonelyR3 lonelyR3 added the bug Something isn't working label Jul 22, 2024
@xlz26296
Copy link
Contributor

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

@lonelyR3
Copy link
Author

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

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

@lonelyR3
Copy link
Author

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants