100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue使用element-ui的el-input监听不了回车事件解决

vue使用element-ui的el-input监听不了回车事件解决

时间:2020-12-12 07:25:34

相关推荐

vue使用element-ui的el-input监听不了回车事件解决

转自:/u014520745/article/details/71746343

仅用于学习,不可商用!!!

vue使用element-ui的el-input监听不了回车事件,原因应该是element-ui自身封装了一层input标签之后,把原来的事件隐藏了,所以如下代码运行是无响应的:

<el-input v-model="form.loginName" placeholder="账号" @keyup.enter="doLogin"></el-input>1

解决方法需要在事件后面加上.native

<el-input v-model="form.loginName" placeholder="账号" @keyup.enter.native="doLogin"></el-input>

正常的自己写的input标签添加键盘事件

<!DOCTYPEhtml> <html> <head> <title></title> <metacharset="utf-8"> <scriptsrc="vue.js"></script> <scripttype="text/javascript"> window.onload=function(){ varvm=newVue({ el:'#box', methods:{ show:function(ev){ if(ev.keyCode==13){ alert('你按回车键了'); } }, } }); } </script> </head> <body> <divid="box"> <inputtype="text"placeholder="请输入"@keyup="show($event)"> <inputtype="text"placeholder="请输入"@keyup.13="show($event)"> </div> </body> </html> 当按下键盘的时候,执行show方法,然后再去执行相应的业务。

两个input的效果都是一样的 如果按13 也就是按键 enter 才会执行弹窗!!

@keyup.13 回车

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键

原文链接:/zycbloger/p/6423132.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。