Vue项目element ui 回车多次触发

最新推荐文章于 2024-12-02 16:32:37 发布

原创最新推荐文章于 2024-12-02 16:32:37 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript #前端框架 #elementui

Vue 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了如何在Vue.js应用中利用el-input组件和keyup.enter.native事件处理函数实现搜索功能。当输入值改变或回车键被按下时，handleEnterSearch方法会被触发，执行搜索逻辑。用户可以通过调整v-model绑定的值来定制搜索行为。

实现多次搜索，或者键入值改变等需求，需要利用键盘使用el-input 中的 change 事件只有当value值改变或者不同时才会再次触发，所以可以利用keyup.enter.native

代码如下：

<el-input

 v-model="searchValue"

placeholder="请输入关键字查询"

@keyup.enter.native="handleEnterSearch"

clearable

></el-input>

解释：el-input keyup.enter.native是一个Vue.js指令，用于监听el-input组件上的 "enter "按键事件。.native修饰符被用来表示该事件应该被绑定到组件的根元素。这个指令通常用于在用户在输入框中输入文本后按下回车键时触发搜索或提交动作。

不论value值是改变与否，只要敲击回车就会调用

函数代码：

handleEnterSearch(e) {
   let keyCode = window.event ? e.keyCode : e.which;
   if (keyCode == 13 && this.searchValue) {
         this.changeCurrentPage(1); //自行改变逻辑代码
   }
}

然后用键值符进行改变即可，判断处的 this.searchValue 为v-model双向绑定值，对应更改为自己的值即可

最后附上键值表