vue按钮的确定事件

最近公司要给系统的所有确定按钮添加键盘事件，对于vue使用键盘事件做下总结。

总的来说vue键盘事件分为两种情况：

1.使用vue提供的keyup方法

2.自己通过window.event.keyCode添加

这两种方法各有优缺点，下面仔细分析一下

1.使用vue提供的keyup方法，如果是原生的input，使用 @keyup.enter就可以，若是使用了element-ui，则要加上native限制符，因为element-ui把input进行了封装，事件没有注册上，也就不起作用了

<input keyup.enter="saveQueryConditions" />
<el-button size="small" type="primary" @click="saveQueryConditions"
keyup.enter.native="saveQueryConditions">确定</el-button

复制代码

有时候加上了native键盘事件也没有生效，比如给不是input的其他元素注册事件，这个时候是因为，按钮没有获取焦点，封装一个自定义指令放在全局，获取焦点就行了

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
    // 当被绑定的元素插入到DOM中时
    update: function (el, binding, vnode, oldVnode) {
      console.log(el);
      console.log(binding);
      console.log(vnode);
      console.log(oldVnode);
      // 聚焦元素
    //   el.focus();
    }
});
// 注册完后，直接添加即可
<el-button size="small" type="primary" @click="saveQueryConditions" 
keyup.enter.native="saveQueryConditions" v-focus >确定</el-button
复制代码

这种情况下，确定按钮页面没有切换焦点的操作的时候使用，因为如果有切换焦点的时候，比如输入框的时候，焦点就会切换，键盘事件又不生效，这时就要使用第二种方法

2.原生方法自己写，代码如下：

let that = this;
// Vue.config.keyCodes.enter = 13;
document.onkeydown = function(e) {  // 这里把事件注册在document上就是因为防止聚焦
    let key = window.event.keyCode;
    if (key === 13) {
        that.saveQueryConditions();
    };
};

// 此方法的弊端
1.在页面中有多个确定按钮的时候
2.在弹框中点击确定再弹框里面还有确定按钮，并且都要做键盘事件
复制代码

总结

给确定按钮添加键盘事件的情况：

1.确定按钮存在的弹框页面（不管有多少个都可以使用此方法）没有切换焦点的操作，这个直接使用方法一解决即可

2.确定按钮存在的弹框页面有切换焦点的操作，这个要使用第二种方法

3.确定按钮存在的弹框页面有切换焦点且里面还有确定弹框并还有键盘事件，这个要在父页面中的updata中使用第二种方法，因为二级页面中的键盘事件会覆盖第一个弹框中的事件，在二级弹框中要监听二级弹框的显示和消失，每次显现时要重新注册键盘事件