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


相关推荐

  • 预写式日志(Write-Ahead Logging (WAL))

    预写式日志(Write-Ahead Logging (WAL))

    2021年11月25日
    38
  • ya系列圆振动筛_L型厨房设计好不好

    ya系列圆振动筛_L型厨房设计好不好‘资料下载链接’:https://download.csdn.net/download/dwf1354046363/21778034YAH2460型圆振动筛设计摘要目前我国各种选煤厂使用的设备中,振动筛(筛分机)是问题较多、维修量较大的设备之一。这些问题突出表现在筛箱断梁、裂帮、稀油润滑的箱式振动器漏油、齿轮打齿、轴承温升过高、噪声过大等问题,同时伴有传动带跳带、断带等故障。这类问题直接影响了振动筛(筛分机)的使用寿命,严重影响了生产。YAH—2460型圆振动筛可以很好的解决此类问题,因此本

    2022年10月2日
    0
  • springboot—@Async实现异步调用及异步回调Future「建议收藏」

    springboot—@Async实现异步调用及异步回调Future「建议收藏」异步调用相对的是同步调用。同步方法调用的时候必须是按照顺序执行的,上一行代码执行完,才会执行下一行。而异步方法调用是相当于多个线程执行,不需要等待上一行代码的执行结果。首先测试方法同步的情况:controller:packagespringboot_async.async_test;importorg.springframework.beans.factory.annot…

    2022年7月27日
    37
  • Python_基础_(装饰器,*args,**kwargs,高阶函数,函数闭包,函数嵌套)

    Python_基础_(装饰器,*args,**kwargs,高阶函数,函数闭包,函数嵌套)

    2021年6月18日
    101
  • JAVA外文参考文献_java参考文献近五年

    JAVA外文参考文献_java参考文献近五年java论文英文的参考文献相关内容:欢迎浏览,小编为你提供的一篇关于英文毕业论文提纲的毕业论文提纲!1Introduction1.1Significanceoftheresearch1.2Organizationofthethesis2LiteratureReview2.1Researchesonmonolingualmentallexicon2.1…..

    2022年9月30日
    0
  • sql中使用什么语句创建索引_索引的创建方式有

    sql中使用什么语句创建索引_索引的创建方式有创建索引的sql语句是【CREATEINDEXindexNameONtable_name(column_name)】,这是最基本的索引,它没有任何限制。本文操作环境:windows10系统、mysql5.7、thinkpadt480电脑。创建索引的sql语句如下所示:下面是最基本的创建索引的语法,它没有任何限制。CREATEINDEXindexNameONtable_name(column_name)如果是CHAR,VARCHAR类型,length可以小.

    2022年9月6日
    2

发表回复

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

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