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中使用第二種方法，由於二級頁面中的鍵盤事件會覆蓋第一個彈框中的事件，在二級彈框中要監聽二級彈框的顯示和消失，每次顯現時要從新註冊鍵盤事件