获取并显示快捷键效果。遇到需要在页面自定义快捷键。这需要一个地方来设置和显示快捷键。找了一圈ElementUI，发现没办法稍微改一下。一个修改后可以使用的组件，所以自己写了一个。这个只有快捷键显示功能。快捷键是否真正绑定生效，取决于返回的快捷键数据，由其他组件处理。目前只测试了Chrome环境。效果如下：关键点虽然看起来像一个Input，但实际上在组件中显示了一个标签效果，需要一个删除按钮。这就需要在输入框中放置html代码。浏览器的Input组件显然不适合，只能模仿一个Input组件的效果。Focus,blur,selectedhighlighteffects非Input组件没有focus,blur,selectedhighlight效果。好在浏览器已经预留了实现方法，网上已经有网友给出了解决方案。在div的属性中加上tabindex=“0”，就可以让div得到这些效果。tabindex属性指定Tab键的顺序。如果写0，则按照组件的默认顺序进行选择。如果你写-1，它永远不会被选中。因为是Input组件的形式，所以能够通过Tab获取到才合情合理。然后添加css的边框效果获取焦点，将鼠标移动到这里显示文字类型pointer.shortcut-key-input{cursor:text;过渡：边框颜色0.2s立方贝塞尔曲线（0.645、0.045、0.355、1）；}.shortcut-key-input:focus{边框颜色：#188cff;box-shadow:004pxrgba(24,140,255,0.38);}没有内容时文字提示需要和Input一样，可以默认显示文字提示。这个也是放一个div在里面，用vue控制。如果输出标签变量有数据，则不会显示该元素。光标闪烁效果更容易处理。在Input类中放一个伪元素，在获得焦点的时候加上这个伪元素，然后给这个元素一个CSS3动画，让光标有闪烁的效果。@keyframesBlink{0%{不透明度：0；}100%{不透明度：1;}}.shortcut-key-input.cursor::after{内容：“|”；动画：闪烁1.2s缓和0s无限；字体大小：18px；位置：绝对；顶部：1px；left:8px;}按键捕捉按键捕捉主要依赖于keydown事件，返回的事件会标记是否按下alt、ctrl（control）等信息，所以做组合键可以依赖这些信息。因为每按下一个键都会触发一个事件，所以必须阻塞功能键的事件。代码只实现了非功能键的组合，如果需要多功能键，可以再创建一个变量来判断连续按键，然后进行处理。handleKeydown(e){const{altKey,ctrlKey,shiftKey,key,code}=e;如果(!CODE_CONTROL.includes(key)){如果(!this.keyRange.includes(code))返回；让controlKey="";[{key:altKey,text:"Alt"},{key:ctrlKey,text:"Ctrl"},{key:shiftKey,text:"Shift"}].forEach(curKey=>{如果(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是另一组预置按键代码，便于处理。本来用的是keyCode，现在keyCode已经废弃了，推荐使用code。addHotkey是添加到对应变量的函数，主要作用是判断是否有重复的快捷键。然后预留了一个外部验证接口，这样当有多个快捷键时，可以判断是否有重复。还有一个max接口，可以限制每个组件的快捷键数量。addHotkey(data){如果(this.list.length&&this.list.some(item=>data.text===item.text))return;如果(this.list.length&&this.list.length.toString()===this.max.toString())返回；如果(!this.verify(data))返回；这个.list.push（数据）；}在线预览https://codesandbox.io/s/vue-hotkeyinput-90m2k
