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


相关推荐

  • 面试必备之乐观锁与悲观锁

    面试必备之乐观锁与悲观锁推荐阅读:如何在技术领域持续成长后端程序员必备的Linux基础知识后端必备——数据通信知识(RPC、消息队列)一站式总结何谓悲观锁与乐观锁乐观锁对应于生活中乐观的人总是想着事情往好的方向发展,悲观锁对应于生活中悲观的人总是想着事情往坏的方向发展。这两种人各有优缺点,不能不以场景而定说一种人好于另外一种人。悲观锁总是假设最坏的情况,每次去拿数据的时候都认为…

    2022年6月24日
    23
  • 乱码_idea控制台中文乱码解决不了

    乱码_idea控制台中文乱码解决不了IntelliJIDEA如果不进行配置的话,运行程序时控制台中文乱码问题会非常严重,甚至影响我们对信息的获取和程序的跟踪。通过历年的开发经验,在本文中我总结出四点用于解决控制台中文乱码问题的方法,希望有助于大家。

    2025年6月12日
    14
  • 解决H5页面在微信浏览器中打开 input file 在安卓上没有拍照选项

    解决H5页面在微信浏览器中打开 input file 在安卓上没有拍照选项有时候我们会在微信公众号里开发会遇到上传图片的功能,当你写<inputtype="file">的时候,在IOS上可以成功调起拍照和图库两块,在安卓手机上只能调取图库而没有拍照功能,解决办法:给input加上accept属性<inputtype="file"accept="image/*"/> //调用相机,图片或者相册(两者都行)加上了capture=…

    2022年7月17日
    22
  • 音视频传输基本知识[通俗易懂]

    音视频传输基本知识[通俗易懂]音视频传输时的基本步骤:1.发起会话(Sip协议)2.编码(硬件编码、软件编码)3.传输(RTP)4.解码(硬件解码、软件解码)5结束会话(Sip协议)视频格式视频格式可以分为适合本地播放的本地影像视频和适合在网络中播放的网络流媒体影像视频两大类。尽管后者在播放的稳定性和播放画面质量上可能没有前者优秀,但网络流媒体影像视频的广泛传播性使之正被广泛应用于视频点播、网络演示

    2022年10月3日
    0
  • ICP证书_dwcc2018怎么用

    ICP证书_dwcc2018怎么用输入44 21 2 4 84 0100 99 98 972 210000 100005 30 0 0 0 1696RichmanImpossible代码#include<bits/stdc++.h>using namespace std;typedef long long ll;const int N = 1e5 + 10;int a[N];int main(){ int T; cin>>T; while(T -..

    2022年8月11日
    1
  • dw中css制作导航,Dreamweaver导航条按钮制作方法

    dw中css制作导航,Dreamweaver导航条按钮制作方法核心提示:教你Dreamweaver用表格巧妙制作导航条按钮看到上面的导航条了吗?你可以点击一下看看它的效果,请注意,这可是用表格做出来的,你相信吗?其实代码很简单,现在让我们来看看该怎么做。1.首先创建一个1×6的表格,参数为:border=0cellspacing=3cellpadding=0;2.在这个表格的每个单元格内分别插入一个表格,宽度和高度设为100%;3.建立一个CSS样式.u…

    2022年7月22日
    9

发表回复

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

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