遇到一個(gè)需求，頁(yè)面內(nèi)要自定義快捷鍵，這就需要可以有地方設(shè)置和展示快捷鍵，找了一圈Element UI發(fā)現(xiàn)沒有能稍微改改就能用的組件，所以自己動(dòng)手寫了一個(gè)。這個(gè)只有快捷鍵展示功能，快捷鍵實(shí)際綁定生效的話是依賴傳回的快捷鍵數(shù)據(jù)，由另外的組件處理的。目前只測(cè)試了Chrome的環(huán)境。

效果如下：

雖然看起來(lái)像是一個(gè)Input但在組件內(nèi)實(shí)際上是展示一個(gè)標(biāo)簽效果，還需要有刪除按鈕。這就得在輸入框內(nèi)放下html代碼，瀏覽器的Input組件顯然不適合，這就只能自己仿一個(gè)類Input組件效果了。

非Input這類組件是沒有focus、blur、選中高亮效果這些效果的，還好瀏覽器有預(yù)留實(shí)現(xiàn)方式，網(wǎng)上也早已有網(wǎng)友提供方案，在div里加上tabindex='0'屬性，就能讓div獲得這些效果。

tabindex屬性規(guī)定了Tab按鍵的順序，寫0的話是會(huì)按組件默認(rèn)順序被選中的，如果寫-1則始終無(wú)法被選中。因?yàn)楸旧硎欠翴nput組件形式，能被Tab獲取也剛好很合理。

然后加上CSS的獲取焦點(diǎn)的邊框效果、鼠標(biāo)移動(dòng)到此顯示文本類型指針

.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);}文本提示

當(dāng)沒有內(nèi)容時(shí)需要跟Input一樣，可以默認(rèn)顯示文本提示。這也是放一個(gè)div在里面，用Vue控制，如果輸出的標(biāo)簽變量有數(shù)據(jù)時(shí)，就不讓此元素顯示。

這個(gè)比較好處理，在類Input里面放一個(gè)偽元素，當(dāng)獲取焦點(diǎn)的時(shí)候添加此偽元素，然后再給此元素一個(gè)CSS3的動(dòng)畫，就有光標(biāo)閃動(dòng)的效果了。

@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里會(huì)標(biāo)記是否按下alt、ctrl(control)等信息，所以做組合按鍵依賴此信息就可以實(shí)現(xiàn)。因?yàn)槊看伟存I都會(huì)觸發(fā)事件，所以要屏蔽掉功能鍵的事件。代碼只實(shí)現(xiàn)了一個(gè)非功能鍵的組合，需要多功能鍵可以另外建立變量判斷連續(xù)按鍵的情況然后處理。

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是另外預(yù)設(shè)的按鍵code碼集合，方便處理。本來(lái)用的是keyCode的，但keyCode已經(jīng)被廢棄了，推薦的是code。addHotkey就是添加到相應(yīng)變量的函數(shù)，其中主要出判斷一下是否有重復(fù)的快捷鍵。然后預(yù)留了一個(gè)外部驗(yàn)證的接口，為了多快捷鍵的時(shí)候可以判斷是否有重復(fù)。還有一個(gè)max接口，可以限制每個(gè)組件的快捷鍵個(gè)數(shù)。

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); }在線預(yù)覽

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

以上就是vue實(shí)現(xiàn)一個(gè)獲取按鍵展示快捷鍵效果的Input組件的詳細(xì)內(nèi)容，更多關(guān)于vue 展示快捷鍵的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！