vue键盘回车请求

56 阅读 0 评论 37 点赞

我是靠谱客的博主娇气酸奶，最近开发中收集的这篇文章主要介绍vue键盘回车请求，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

原文地址：Vue按回车键进行搜索_前端小白LL的博客-CSDN博客_vue 回车搜索

Vue项目按回车键进行搜索
最近有一个需求，为了用户方便进行搜索数据的时候不想点击搜索按钮，想要在表单内输入完成之后直接按回车键进行搜索。根据vue+ElementUUi完成。

下面直接上代码
一、第一种方法：
1、现在el-input里面添加这一行代码

@keyup.enter.native="seachEnter"
在这里插入图片描述

2、写seachEnter事件

seachEnter(e) {
var keyCode = window.event ? e.keyCode : e.which;
if (keyCode == 13) {
this.getShopList(); //搜索按钮的回调
}
},

以上就是vue搜索时按回车键的功能实现

今天突然发现这样写还有一点bug，在第一次按回车进行搜索时会刷新页面，下面是解决方法。

<el-form @submit.native.prevent> //@submit.native.prevent要在外层的el-form中加上这段代码就可以了
</el-form>
1
2
二、第二种方法

<el-form
@keyup.enter.native="handleSearchDatasetList" //这里要和搜索的事件名称一样
@submit.native.prevent //这句话禁止第一次进入页面回车搜索的时候刷新页面
:model="tableQuery"
label-width="80px"
inline
size="mini"
>
......
<el-form-item>
<el-button type="primary" @click="handleSearchDatasetList"
   >搜索</el-button
   >
   </el-form-item>
</el-form>
handleSearchDatasetList(){
   ..... //搜索逻辑
}