vue中键盘回车事件的不同使用方法
让我们一起来绕坑,有时候我们会遇到当我们为input加些键盘事件的时候并不起效,下面让我们来看看原因吧!
首先了解一下vue中常用的键盘事件
- @keydown 键盘按下时触发
- @kekup 键盘抬起时触发
- @keypress 键盘按住时触发
- @kekup.enter 回车
- @kekup.up 上键
- @kekup .down 下键
- @kekup .left 左键
- @kekup .right 右键
- @kekup .delete 删除键
当我们使用@keyup.enter
为input添加键盘事件的时候,如果你使用的是原生的input那么是可以的,但是如果你使用的是element-ui,那么需要加上native限制符,因为element-ui把input进行了封装,原事件就不起作用了。
原生写法和在element-ui中的写法:
常规的使用方法:
在模板中定义事件名称,并传入参数,如下代码
js中代码
当按下键盘的时候,执行submit方法,然后再去执行相应的业务。
如果ev.keyCode等于13,也就是按了enter键(回车键)然后执行if里的逻辑代码