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)

}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132288.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • vue的双向绑定是什么_vue绑定数据的两种方式

    vue的双向绑定是什么_vue绑定数据的两种方式<img:src=”`http://localhost:8088/java/publicCarUse/activitiFlow?processInstanceId=${processInstanceId}`”/>

  • 数据库泄露导致信息泄露_数据库经历的五个阶段

    数据库泄露导致信息泄露_数据库经历的五个阶段前言最近用了公司某框架,部署到现场后,现场运维开始维护现场数据,在不断操作的过程中,系统崩溃,查看后台日志,druid连接池已经获取不到连接。于是开始了排查之旅。在此记录。排查开始首先后台的报错

  • linux go环境搭建_golang后端框架

    linux go环境搭建_golang后端框架1.下载go语言包,go1.9.2.linux-amd64.tar.gzhttps://www.golangtc.com/download2.解压安装[root@localhostlocal]#pwd/usr/local[root@localhostlocal]#tar-xzvfgo1.9.2.linux-amd64.tar.gz [root@localhostlocal]#c…

    2022年10月10日
  • mac sh文件_android获取apk位置

    mac sh文件_android获取apk位置在嵌入百度地图SDK的时候需要配置“发布版SHA1”和“开发版SHA1”,这两个是不一样的。这里是基于mac电脑,开发工具androidstudio.1、首先打开Terminal窗口,会直接定位到当前的目录下。2、获取开发版的sha1,直接输入命令,获取到sha1:keytool-list-v-keystore~/.android/debug…

  • vuejs环境搭建_vue搭建论坛

    vuejs环境搭建_vue搭建论坛前端框架vue开放环境搭建

  • ov7725摄像头人脸识别_ov7725摄像头

    ov7725摄像头人脸识别_ov7725摄像头OV7725摄像头软件实现简单的二值化处理项目使用的摄像头型号:​ 正点原子OV7725摄像头模块,带FIFO的摄像头模块。图像二值化化的个人见解:​ 常见的图片格式:​ 黑白图片、灰度图片、彩色图片。不同的图片的格式类型主要的不同点在每个像素点需要几位的二位数来表示。黑白图片每个像素不是0就是1,0代表黑颜色,1代表白颜色。灰度图像每个像素需要一个字节表示(8位二进制)每个像素可以量化…

发表回复

您的电子邮箱地址不会被公开。

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