vue.js项目 el-input 组件监听回车键实现搜索功能示例

更新时间：2018年08月25日 08:59:35 作者：Aimee芊

今天小编就为大家分享一篇vue.js项目 el-input 组件监听回车键实现搜索功能示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

基于element-ui 组件开发的vue.js项目，实现回车键发起搜索，和原生的input 标签使用方法不一样：

el-input 监听键盘按下状态得用@keyup.enter.native,如果是非el-input 组件，可以直接用@keyup.enter

<el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIconClick" @keyup.enter.native="searchEnterFun"> </el-input>


<input placeholder="搜索" type="text" @keyup.enter="searchEnterFun">

在methods方法集里，写上监听的方法，当获取的keyCode 为13时，表示按下了回车键，如果需要监听空格或者其他键，换成别的键值

searchEnterFun:function(e){
   var keyCode = window.event? e.keyCode:e.which;
  // console.log('回车搜索',keyCode,e);
   if(keyCode == 13 && this.input){
   this.$router.push({path:'/Share?keywords='+this.input});
   }

  }

which 和 keyCode 属性提供了解决浏览器的兼容性的方法。

keyCode属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码

注意：

在 Firefox 中，keyCode 属性在 onkeypress 事件中是无效的 (返回 0)。浏览器兼容问题，可以一起使用 which 和 keyCode 属性来解决：

var keyCode = window.event ? e.keyCode:e.which;

which 属性返回onkeypress事件触发的键的值的字符代码，或者 onkeydown 或 onkeyup 事件的键的代码

浏览器支持：谷歌、火狐、ie9、safari、欧朋

以上这篇vue.js项目 el-input 组件监听回车键实现搜索功能示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue2安装tailwindcss的详细步骤
这篇文章主要介绍了vue2安装tailwindcss，本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
vue3+vite+tdesign实现日历式可编辑的排课班表填写功能
本文介绍了如何使用Vue3和tdesign实现一个日历式、可编辑的排班填写功能,开发过程中面临了年份和月份下拉框的实现、周期显示以及可编辑日历的样式和数据获取等挑战,感兴趣的朋友一起看看吧
2025-01-01
vue+rem自定义轮播图效果
这篇文章主要为大家详细介绍了vue+rem自定义轮播图效果，手指触摸左滑和右滑，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-06-06
vue.js入门教程之绑定class和style样式
小编之前介绍了通过vue.js计算属性，不知道大家都学会了吗。那这篇文章中我们将一起学习vue.js实现绑定class和style样式，有需要的朋友们可以参考借鉴。
2016-09-09
vue登录注册实例详解
在本篇内容里小编给大家分享的是关于vue登录注册的相关实例内容以及写法分析，有需要朋友们可以学习下。
2019-09-09
vue 需求 data中的数据之间的调用操作
这篇文章主要介绍了vue 需求 data中的数据之间的调用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue中使用echarts的示例
这篇文章主要介绍了vue中使用echarts的步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01
vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天)
这篇文章主要介绍了vue项目实现会议预约功能(包含某天的某个时间段和某月的某几天),本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-02-02
vue3父组件和子组件如何传值实例详解
近期学习vue3的父子组件之间的传值,发现跟vue2.x的父子组件之间的传值并没有太大的区别,下面这篇文章主要给大家介绍了关于vue3父组件和子组件如何传值的相关资料,需要的朋友可以参考下
2022-08-08
vue中定义全局声明vscode插件提示找不到问题解决
这篇文章主要为大家介绍了vue中定义全局声明vscode插件提示找不到问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05