精品一二区,天天天操操操,一区二区在线

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

效果如下：

vue實現一個獲取按鍵展示快捷鍵效果的Input組件

關鍵點

雖然看起來像是一個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, ctrlKey, shiftKey, key, 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);

									}