Vue中监听事件
一，在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件
<input @keyup.enter="function">
| 属性名 | 键值 |
|---|---|
| .delete | delete（删除）/BackSpace（退格） |
| .tab | Tab |
| .enter | Enter（回车） |
| .esc | Esc（退出） |
| .space | Space（空格键） |
| .left | Left（左箭头） |
| .up | Up（上箭头） |
| .right | Right（右箭头） |
| .down | Down（下箭头） |
| .ctrl | Ctrl |
| .alt | Alt |
| .shift | Shift |
| contextmenu.prevent | 鼠标右击 |
二，Vue也支持组合写法
| 组合写法 | 按键组合 |
|---|---|
| @keyup.alt.67 | Alt + C |
| @click.ctrl.enter | Ctrl + Enter |
三，如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用到.native修饰符了，如：
<el-inputv-model="inputName"@keyup.enter.native="searchFile(params)">
el-input>
如果遇到.native修饰符也无效的情况，可能就需要用到$listeners了，具体用法请参考Vue官方文档：将原生事件绑定到组件。
四、textarea阻止浏览器默认换行操作
<el-inputclass="textarea"type="textarea"placeholder="请输入内容"v-model="textarea"show-word-limit@input="inputFn"@keydown.native="listen($event)">
js
listen (event) {if (event.keyCode === 13) {event.preventDefault();// 阻止浏览器默认换行操作return false}}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！