element 输入框点击事件_ElementUI的input事件问题

element 输入框点击事件_ElementUI的input事件问题最近用ElementUI的el-input组件,然后发现一个问题,就是我在输入框后,加一个icon的button,然后我希望这个输入框可以触发两个事件,第一个是,输入完,按键盘回车键的事件,第二个是,输入完,点icon的button的click事件。然后翻阅文档,发现可以给input加@change事件,这样按回车可以搜索,然后可以把icon的button写成slot的方式然后给button加@c…

大家好,又见面了,我是你们的朋友全栈君。

最近用ElementUI的el-input组件,然后发现一个问题,

就是我在输入框后,加一个icon的button,

然后我希望这个输入框可以触发两个事件,

第一个是,输入完,按键盘回车键的事件,

第二个是,输入完,点icon的button的click事件。

然后翻阅文档,发现可以给input加@change事件,这样按回车可以搜索,然后可以把icon的button写成slot的方式然后给button加@click事件,这样按钮也能搜索。

但是问题来了,我给input加了@change事件,但是他这个change很坑,因为他change事件里不光包含回车,居然还有失焦。。。

这个时候我们想一下,用户按了回车,change事件触发,这没问题。

但是用户如果输入完,鼠标点右边的icon的button。。。完了。。。这change(因为失焦)和click(因为点击了button)一起触发。。我特么。。。我人都傻了。。这什么鬼设定。。

有没有大佬有办法的,我感觉这个change带失焦好恶心。。

相关数据:

1.ElementUI el-input组件的事件

https://element.eleme.cn/#/zh…

2.我的相关代码如下:

v-model=”str”

size=”small”

@change=”handleSearchEvent”

placeholder=”请输入搜索关键字” >

slot=”append”

@click=”handleSearchEvent”

icon\=”el-icon-search” />

handleSearchEvent() {

console.log(this.str)

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/132288.html原文链接:https://javaforall.net

(0)
上一篇 2022年4月30日 下午5:40
下一篇 2022年4月30日 下午5:40


相关推荐

  • 平均数中位数众数的实际意义_频率分布直方图平均数

    平均数中位数众数的实际意义_频率分布直方图平均数平均数:反映了一组数据的平均大小,常用来一代表数据的总体“平均水平”。中位数:像一条分界线,将数据分成前半部分和后半部分,因此用来代表一组数据的“一般水平”。众数:反映了出现次数最多的数据,用来代表一组数据的“多数水平”。平均数:与每一个数据都有关,其中任何数据的变动都会相应引起平均数的变动。主要缺点是易受极端值的影响,这里的极端值是指偏大或偏小数,当出现偏大数时,平均数将会被抬高,当出现…

    2025年12月13日
    4
  • 如何反编译dll文件

    如何反编译dll文件DLL DynamicLinkL 文件为动态链接库文件 又称 应用程序拓展 是软件文件类型 下载并解压 NETReflector 下面下载为绿色 7 3 0 18 版本 注 此为英文版 百度有汉化版下载 链接 https pan baidu com s 1eoWFe62wA uOdn3wTQ7e w 密码 gt87

    2025年11月13日
    4
  • Ubuntu 14.04 Desktop的Raid1安装总结

    Ubuntu 14.04 Desktop的Raid1安装总结安装基于Ubuntu14.04Desktop的Raid1。由于采用UEFI/GPT方式作为系统启动方式,在安装过程中出现了很多异常情况。本文记录安装的过程。

    2022年7月15日
    25
  • SQL更改表字段为自增标识

    下面是SQL语句:推荐:http://www.cnblogs.com/roucheng/p/mssqlindex.html

    2021年12月25日
    46
  • Redfish协议测试工具–Postman

    Redfish协议测试工具–Postman1 工具和资料获取 2 简单使用说明 1 GET 类举例 2 PATCH 类举例 3 常见命令 1 工具和资料获取 Postman 工具获取服务器 Redfish 接口说明文档使用前必读接口文档中 适用的产品 查看自己的服务器是否支持此协议 2 简单使用说明 1 GET 类举例查看系统信息 SystemOvervi 查看文档 实操 2 PATCH 类举例首先获取指定用户信息 查看文档 要有 Etag 获取方式是通

    2025年9月24日
    5
  • (一)python爬虫验证码识别(去除干扰线)

    (一)python爬虫验证码识别(去除干扰线)论如何用 python 识别验证码 干扰线类型 1 开发环境与工具 python27 sklearn pytesser opencv 等 pycharmwindo 数据集用 request 库爬虫抓取某一网站验证码 1200 张 并做好标注 3 验证码识别大概步骤转化成灰度图去背景噪声图片分割 1 转化成灰度图 im cv2

    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号