项目中在搜索商品时,在没有搜索按钮的情况下,刚开始是写的当用户输入完成后,input框失去焦点blur事件处理,产品提议用户输入后,按enter回车键返回搜索结果。

  • vue中失去焦点事件写法:@blur
  • vue中enter回车键事件写法:@keyup.enter.native
    在这里插入图片描述
<el-input v-model="searchName" @keyup.enter.native="toSearch()" placeholder="请输入搜索的名称"></el-input>
toSearch(){
 	console.log("搜索名称是:",this.searchName)
}

补充知识点:

  • keydown、keyup 属于键盘事件,input 属于文本事件

详细说明:

  • keydown:当用户按下键盘上的任意按键时触发,如果按住不放,会重复触发此事件。
  • keyup:当用户释放键盘上的按键时触发。
  • input:当元素内容发生改变时触发,这些元素指input、select、textarea 和指定了 contenteditable 属性的元素。

举例:

  • 当我们在一个输入框中输入文本时,会依次触发下列事件:keydown 事件 ——> input 事件 ——> keyup 事件。
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐