遇到一個需求，頁面內要自定義快捷鍵，這就需要可以有地方設定和展示快捷鍵，找了一圈Element UI發現沒有能稍微改改就能用的元件，所以自己動手寫了一個。
這個只有快捷鍵展示功能，快捷鍵實際繫結生效的話是依賴傳回的快捷鍵資料，由另外的元件處理的。目前只測試了Chrome的環境。

效果如下：

關鍵點

雖然看起來像是一個Input但在元件內實際上是展示一個標籤效果，還需要有刪除按鈕。這就得在輸入框內放下html程式碼，瀏覽器的Input元件顯然不適合，這就只能自己仿一個類Input元件效果了。

focus、blur、選中高亮效果

非Input這類元件是沒有focus、blur、選中高亮效果這些效果的，還好瀏覽器有預留實現方式，網上也早已有網友提供方案，在div里加上tabindex="0"屬性，就能讓div獲得這些效果。

tabindex屬性規定了Tab按鍵的順序，寫0的話是會按元件預設順序被選中的，如果寫-1則始終無法被選中。因為本身是仿Input元件形式，能被Tab獲取也剛好很合理。

然後加上CSS的獲取焦點的邊框效果、滑鼠移動到此顯示文字型別指標

.shortcut-key-input {
 cursor: text;
 transition: border-color 0.2s cubic-bezier(0.645,0.045,0.355,1);
}
.shortcut-key-input:focus {
 border-color: #188cff;
 box-shadow: 0 0 4px rgba(24,140,255,0.38);
}

文字提示

當沒有內容時需要跟Input一樣，可以預設顯示文字提示。這也是放一個div在裡面，用Vue控制，如果輸出的標籤變數有資料時，就不讓此元素顯示。

游標閃動效果

這個比較好處理，在類Input裡面放一個偽元素，當獲取焦點的時候新增此偽元素，然後再給此元素一個CSS3的動畫，就有游標閃動的效果了。

@keyframes Blink {
 0% { opacity: 0; }
 100% { opacity: 1; }
}
.shortcut-key-input.cursor::after {
 content: "|";
 animation: Blink 1.2s ease 0s infinite;
 font-size: 18px;
 position: absolute;
 top: 1px;
 left: 8px;
}

按鍵捕獲

按鍵捕獲主要靠keydown事件，其中傳回的event裡會標記是否按下alt、ctrl(control)等資訊，所以做組合按鍵依賴此資訊就可以實現。
因為每次按鍵都會觸發事件，所以要遮蔽掉功能鍵的事件。程式碼只實現了一個非功能鍵的組合，需要多功能鍵可以另外建立變數判斷連續按鍵的情況然後處理。

  handleKeydown(e) {
   const { altKey,ctrlKey,shiftKey,key,code } = e;
   if (!CODE_CONTROL.includes(key)) {
    if (!this.keyRange.includes(code)) return;
    let controlKey = "";
    [
     { key: altKey,text: "Alt" },{ key: ctrlKey,text: "Ctrl" },{ key: shiftKey,text: "Shift" }
    ].forEach(curKey => {
     if (curKey.key) {
      if (controlKey) controlKey += "+";
      controlKey += curKey.text;
     }
    });
    if (key) {
     if (controlKey) controlKey += "+";
     controlKey += key.toUpperCase();
    }
    this.addHotkey({ text: controlKey,controlKey: { altKey,code } });
   }
   e.preventDefault();
  },

CODE_CONTROL是另外預設的按鍵code碼集合，方便處理。本來用的是keyCode的，但keyCode已經被廢棄了，推薦的是code。
addHotkey就是新增到相應變數的函式，其中主要出判斷一下是否有重複的快捷鍵。
然後預留了一個外部驗證的介面，為了多快捷鍵的時候可以判斷是否有重複。
還有一個max介面，可以限制每個元件的快捷鍵個數。

  addHotkey(data) {
   if (this.list.length && this.list.some(item => data.text === item.text)) return;
   if (this.list.length && this.list.length.toString() === this.max.toString()) return;
   if (!this.verify(data)) return;
   this.list.push(data);
  }

線上預覽

https://codesandbox.io/s/vue-hotkeyinput-90m2k

以上就是vue實現一個獲取按鍵展示快捷鍵效果的Input元件的詳細內容，更多關於vue 展示快捷鍵的資料請關注我們其它相關文章！