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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • JAVA队列( Queue ) 详解[通俗易懂]

    JAVA队列( Queue ) 详解[通俗易懂]什么是队列?队列是一种特殊的线性表,遵循先入先出、后入后出的基本原则,一般来说,它只允许在表的前端进行删除操作,而在表的后端进行插入操作,但是java的某些队列运行在任何地方插入删除;比如我们常用的LinkedList集合,它实现了Queue接口,因此,我们可以理解为LinkedList就是一个队列;java队列特性队列主要分为阻塞和非阻塞,有界和无界、单向链表和双向链表之分;阻塞和非阻塞阻塞队列入列(删除元素)时,如果元素数量超过队列总数…

    2022年7月9日
    35
  • latex参考文献上标怎么打_latex的上下角标

    latex参考文献上标怎么打_latex的上下角标1、使用\supercite{}2、加入以下语句,引用时直接使用\cite{}原文链接:https://www.latexstudio.net/archives/7686.html\makeatletter\def\@cite#1#2{\textsuperscript{[{#1\if@tempswa,#2\fi}]}}\makeatother

    2025年10月10日
    4
  • 关于VMware无法输入许可证密钥的方法

    关于VMware无法输入许可证密钥的方法首先,把电脑里的VMware卸载掉设置—-应用—-找到VMware——修改—-删除VMware不要保留任何配置文件其次,找到你的VMware安装文件,要知道它在哪或者把它放在一个比较好找的地方打开任务管理器—左上角文件—-运行新任务—然后按图片走等待安装完毕后就能正常输入许可证密钥了…

    2025年11月15日
    3
  • 网站挂马检测 php,Python实现的检测网站挂马程序

    网站挂马检测 php,Python实现的检测网站挂马程序#pythoncheck_change.pyUsage:pythoncheck_change.pyupdate/home/wwwrootpythoncheck_change.pycheck/home/wwwroot#pythoncheck_change.pyupdate/data/www#生成站点的md5值#echo”>/data/www/sitema…

    2022年9月30日
    3
  • UVA 12627 – Erratic Expansion

    UVA 12627 – Erratic Expansion

    2022年2月4日
    44
  • xampp的安装教程

    xampp的安装教程1、准备xampp安装包并新建一个空文件夹如:xampp2、启动xampp,开始安装,安装过程如下图所示:点击yes,后如下图点击next,进行下一步,将软件安装到刚刚新建的空文件夹xampp中,接下,疯狂点击next,在该界面稍等一会,正在安装安装完成后,打开安装的xampp文件夹,内容如下:3、运行xampp.exe,界面如下XAMPP安装完毕后如图,Apache和Mysql勾选,发现运行正常即可。(注意:首次启动前要将Apache和MySQL前面的ModulesS

    2022年7月15日
    27

发表回复

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

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