ElementUI的input事件问题

最近用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.我的相关代码如下:

<el-input 
    v-model="str"        
    size="small" 
    @change="handleSearchEvent" 
    placeholder="请输入搜索关键字" >
    <el-button 
      slot="append" 
      @click="handleSearchEvent" 
      icon\="el-icon-search" />
</el-input\>
handleSearchEvent() {
    console.log(this.str)
}
阅读 10.2k
2 个回答

解决方式 刚刚编写的 例子

这和 element ui 没什么关系,你应该用 @input, change 事件本身的规范就是在有可能在 blur 的时候处触发
参考 https://developer.mozilla.org...

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏