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


相关推荐

  • Matlab求解非线性规划,fmincon函数的用法总结「建议收藏」

    Matlab求解非线性规划,fmincon函数的用法总结「建议收藏」Matlab求解非线性规划,fmincon函数的用法总结1.简介在matlab中,fmincon函数可以求解带约束的非线性多变量函数(Constrainednonlinearmultivariablefunction)的最小值,即可以用来求解非线性规划问题matlab中,非线性规划模型的写法如下\[min\f(x)\\s.t.\begin{equation}…

    2022年6月6日
    82
  • \t\t让世界最小linux系统—-ttylinux成为一个小型http服务器[通俗易懂]

    \t\t让世界最小linux系统—-ttylinux成为一个小型http服务器[通俗易懂]我们首先要让ttylinux的网络功能可用:第1步:启动虚拟机;以用户名:root和密码:root登录到ttylinux;编辑网络接口配置文件启动虚拟机的网卡;指令如下:  cd/etc/network.d  //进入网卡配置文件目录  cpsampleinterface.eth0  //把例子文件拷贝为eth0接口的配置文件  viinterface.eth0  //编辑eth0配置文

    2022年8月12日
    6
  • 程序员们千万不要接私活(程序员找私活的平台)

    点击上方“码农突围”,马上关注,每天上午8:50准时推送这里是码农充电第一站,回复“666”,获取一份专属大礼包真爱,请设置“星标”或点个“在看”作者:程序员新视界来源:…

    2022年4月11日
    137
  • A*算法之八数码问题 python解法

    A*算法之八数码问题python解法文章目录A*算法之八数码问题python解法问题描述A*算法与八数码问题状态空间的定义各种操作的定义启发式函数的定义人工智能课程中学习了A*算法,在耗费几小时完成了八数码问题和野人传教士问题之后,决定写此文章来记录一下,避免忘记问题描述在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字。棋盘中留有一个空格,空格用0来表示。空格周围的棋子可以移到空格中。要求解的问题是:给出一种初始布局(初始状态)和目标布局(为了使题目简单,设目标状态为12380

    2022年4月6日
    63
  • Docker镜像相关命令

    Docker镜像相关命令1、查看docker版本 docker version 2、列出本地主机上的镜像: docker images REPOSITORY:表示镜像的仓库源 TAG:镜像的标签 IMAGE ID:镜像ID CREATED:镜像创建时间 SIZE:镜像大小3、查询镜像 docker search 镜像名称…

    2022年6月13日
    29
  • 图片加载失败替换图片解决方案

    图片加载失败替换图片解决方案图片加载失败在不同浏览器表现有差异,比如google可能会一片空白、img的宽高是0*0,ie会在图片位置会出现一个碎片图标,火狐会显示一个边框像这样:一个页面如果很多这种好难看,一般会用默认图片替换显示,解决方法:1、css方案:不好使。在img的伪类加替换图片,但火狐的img没有伪类,google有,有时候就算给img标签加了width、height也没有,图片加载失败img的宽高…

    2022年6月2日
    130

发表回复

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

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