组件
开发的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
组件
监听回车键实现搜索功能示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解.vue文件中监听input输入事件(oninput)vue使用element-ui的el-input监听不了回车事件的解决方法vue点击input弹出带搜索键盘并监听该元素的方法
我们点击 npm run dev 的时候,这就是启动 Vue 工程项目,那么它启动过程是什么样的呢? Vue 项目启动过程,本文简要介绍。
在执行 npm run dev 的时候,会在当前目录中寻找 package.json 文件,包含项目的 名称版本 、 项目依赖 等相关信息。
从下图中可以看到, 启动 npm run dev 命令后,会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。
webpack.dev.conf.js 中引入了很多模块的内容,其中就包括 config 目录下服务器环境的配置文件。
可以看到,在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置,默认启动端口是 8080 ,这里可以进行修改。
index.html 的内容很简单,主要是提供一个 div 给 vue 挂载。
main.js 中, 引入了 vue 、 App 和 router 模块, 创建了一个 Vue 对象,并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下, 并绑定了一个路由配置。
上面 main.js 把 App.vue 模板的内容,放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到,这个页面的内容由一个 logo 和一个待放置内容的 router-view , router-view 的内容将由 router 配置决定。
查看 route 目录下的 index.js ,我们发现这里配置了一个路由, 在访问路径 / 的时候, 会把 HelloWorld 模板的内容放置到上面的 router-view 中。
HelloWorld 中主要是一些 Vue 介绍显示内容。
所以,页面关系组成是 index.html 包含 App.vue,App.vue 包含 HelloWorld.vue 。
到这,我们开始安装 router 、 vuex 。
Ctrl+C 退出启动,继续执行 vue-cli ,脚手架安装插件 router 和 vuex 开始。
输入一个大写Y,按下Enter
vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
Vuex 主要有五部分:
① 安装 vuex
接下来我们在 src目录 下创建一个 vuex 文件夹
并在 vuex文件夹 下创建一个 store.js 文件
文件夹目录 长得是这个样子
在保证我们处于我们项目下,在命令行输入下面命令,然后,安装 vuex 。
② vuex 的关系图
③ 开始使用,在 mian.js 中,引入 vuex
④然后告知 vue 开始使用 vuex (Vue.use(Vuex))
在 store.js 文件中,引入 vuex 并且使用 vuex ,这里注意我的变量名是大写 Vue 和 Vuex
⑤接下来,在main.js中引入store
到这里算是,以及完成了。
我们再重新看一下此时的项目结构,多了router.js和store.js,其它相关的文件也被修改