Vue鍵盤事件之"@keyup.ctrl" 和 "@keyup.17"

首先，我們先來看看鍵盤和鍵盤代碼表的對應

 

 可以看出Control （也就是ctrl）對應的控制代碼是17

那我們來看看 Vue中的"@keyup.ctrl" 和 "@keyup.17"的區別

首先先通過一個需求
需求背景，ctrl + v 一個用英文逗號隔開的字符串 ，能夠獲取到隔開的每一個字符串，並且生成對應元素項
如圖所示：ctrl + v  1,2,3 

所以我們使用的代碼事件是 @keyup.ctrl.86 也就是監聽ctrl + v事件
不過手速為王者級別的同學會發現，為什么粘貼下去沒有生成？ 就像下面這樣：



這不就是相當於日常的ctrl + v嗎？ 所以我們聯想到@key.ctrl.86綁定的事件是不是沒有執行
經過斷點等測試，發現確實沒有執行。
於是乎我們還是查查官方文檔
果不其然

 

 

 文檔告訴我們，修飾鍵與常規鍵在keyup配合使用時，修飾鍵需要處於按住狀態
也就是我們@keyup.ctrl.86 執行的ctrl+v事件必須要保證ctrl案件處於按住狀態后，再按v才能執行我們所綁定的事件！ 
因此，之前手速過快的同學，雖然完整的執行了ctrl+v粘貼字符，卻沒有在按v的時候保持ctrl鍵為按住狀態
因此沒法觸發我們綁定的事件！

 
上述文檔告訴我們，如果想釋放ctrl就觸發事件，我們可以使用keyup.17來替換keyup.ctrl
但是請注意，keyup.17並不能再直接綁定86案件，例如@keyup.17.86,這樣是執行不了ctrl+v事件的

上述情景的代碼我就不貼出來，大家可以簡單綁定一個只包含console.log或者alert事件去調試，只要手速快，ctrl松開得及時，事件就不會執行！！ 

下面，我們就來說說如何正確綁定ctrl+v事件，又不怕手速過快~~ 
我的想法是這樣的：
　　1.ctrl可以通過@keyup.17單獨觸發，那就單獨使用ctrl.17綁定事件
　　2.v按鍵的觸發可以用js事件監聽去執行,
也就是按ctrl觸發事件后，我們再對v按鍵進行監聽，相當於整個ctrl+v被拆分成2部分,但是同樣能夠執行ctrl+v事件，並且不需要按住ctrl 

接下來上參考代碼： (思路比較關鍵，代碼不重要，所以這次不上完全代碼咯)

html中的Dom元素做對應的綁定

@keyup.17="split(text)"

 

split方法函數：

split(txt: string) {
        if (txt != '' && this.keyCode === 'v') {
　　　　　　　// 下面寫啥就不重要了，大家忽略掉

            let _this = this;
            let valueList: Array<any> = [];
            let txtList = txt.split(",");
            if (this.upperCase) {
                this.upperCaseText(this.value);
            }
            forEach(txtList, function(text) {
                valueList.push(trim(text).split("\n"));
            });
            valueList = compact(flattenDeep(valueList));
            forEach(valueList, function (text) {
                if (!_this.hasPrefix(trim(text))) {
                    text = `${_this.fill}${trim(text)}`;
                }
                if (_this.value.indexOf(trim(text)) == -1) {
                    _this.value.push(trim(text));
                }
            });
            this.text = "";
        }
        this.$emit("input", this.value);
    }

 

監聽v按鍵，通過v按鍵的監聽返回keyCode: 

created() {
        let _this = this;
        document.addEventListener('keydown', function(event) {
            _this.keyCode = event.key;
        });
    }

有更好的方法，歡迎提出哈~~