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


相关推荐

  • MySQL——SQL练习题

    MySQL——SQL练习题

    2021年5月20日
    152
  • BeanCopier类[通俗易懂]

    BeanCopier类[通俗易懂]网上学习了一番BeanCopier类。cglib是一款比较底层的操作java字节码的框架。下面通过拷贝bean对象来测试BeanCopier的特性:publicclassOrderEntity{privateintid;privateStringname;//Gettersandsettersareom…

    2025年9月13日
    4
  • anaconda+pycharm的安装与配置教程

    anaconda+pycharm的安装与配置教程注:anaconda是自带Python解释器和Python编辑器于一身的,但是Python编辑器中pycharm更好用,所以本教程是写给自己的,每次重新安装anaconda和pycharm的时候有的要注意的地方都记不住了1.安装anaconda1.1.去官网下载anaconda的安装包(官网:https://www.anaconda.com/products/individual)在官网下载很忙的话可以去这里https://mirrors.tuna.tsinghua.edu.cn/下1.2.安装过

    2022年8月28日
    4
  • facebook录制本人视频_机器人视频

    facebook录制本人视频_机器人视频Facebook让机器人“观看”上万次视频后,学会了绕道走路

    2022年4月22日
    37
  • Oracle数据库备份与还原

    Oracle数据库备份与还原Oracle数据库备份与还原一、逻辑备份1.某一用户(DBA权限)全库备份:2.某一用户(DBA权限)备份库中某些用户:3.某一用户备份自身:4.某一用户备份自身某些表对象:5.某一用户(具有DBA权限)备份其他用户某些表对象:二、逻辑还原1.使用全库备份文件还原:①使用全库备份文件还原库:②使用全库备份文件还原库内某些用户(被还原用户应存在):③使用全库备份文件还原库内某些用户某些表:2.使用某些用户备份文件还原:①使用某些用户备份文件还原库内某些用户(被还原用户应存在):②使用某些用户备份文件还原库内某

    2022年7月12日
    19
  • 利用nginx搭建RTMP视频点播、直播、HLS服务器

    利用nginx搭建RTMP视频点播、直播、HLS服务器开发环境Ubuntu14.04servernginx-1.8.1nginx-rtmp-modulenginx的服务器的搭建安装nginx的依赖库sudoapt-getupdatesudoapt-getinstalllibpcre3libpcre3-devsudoapt-getinstallopenssllibssl-dev配置并编译nginx使用nginx的默

    2022年6月13日
    25

发表回复

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

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