详解在vue项目当中绑定键盘事件
在vue项目当中，有时会遇到为文本输入框或者button按钮绑定键盘事件，最常见的就是enter回车事件。按照vue官网给出的方法是：
v-on:keyup.enter
简写：
@keyup.enter
如果是绑定在组件上的话，需要加native修饰符
<el-input
v-focus
:placeholder="$t('enterPoolName')"
v-model.trim="strPool"
:maxlength="100"
@keyup.enter.native="handleSearchMember"
>
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
但是，这种方式只能是在获取焦点的时候起作用，如果失去焦点，则无法执行键盘事件。
如果，项目有需求在失去焦点的时候，仍然能够执行相应的键盘事件，完成既定的行为动作，诸如提交表单登录等等。
那就需要采取常规的方法，将键盘事件绑定在document文档上，然后通过获取键盘上各个按键的值，进行键盘事件的执行响应。
mounted() {
const that = this;
document.addEventListener('keydown', that.handleWatchEnter);
},
methods: {
handleWatchEnter(e) {
var key = window.event ? e.keyCode : e.which;
console.log(key);
if (key === 13) {
// 这里执行相应的行为动作
console.log('++++');
}
},
}
vue中的扣键盘事件
@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)
获取按键的键码 e.keyCode
@keyup.13 按回车键
@keyup.enter 回车
@keyup.up 上键
@keyup.down下键
@keyup.left 左键
@keyup.right 右键
@keyup.delete 删除键
页:
[1]