Vue implements an Input component that gets the key display shortcut key effect

I encountered a requirement to customize shortcut keys on the page, which required a place to set and display shortcut keys. I looked around Element UI and found that there was no component that could be used with slight modifications, so I wrote one myself.
This only has the function of displaying shortcut keys. The actual binding of shortcut keys depends on the shortcut key data returned and is processed by another component. Currently only Chrome environment has been tested.

The effect is as follows:

Key Points

Although it looks like an Input, it actually displays a label effect inside the component and also requires a delete button. This requires putting the HTML code in the input box. The browser's Input component is obviously not suitable, so you can only imitate the effect of an Input component yourself.

focus, blur, selected highlight effects

Non-Input components do not have effects such as focus, blur, and selected highlight effects. Fortunately, browsers have reserved implementation methods, and netizens have already provided solutions online. By adding the tabindex="0" attribute to the div, the div can obtain these effects.

The tabindex attribute specifies the order of the Tab keys. If you write 0, the components will be selected in the default order. If you write -1, they will never be selected. Because it is in the form of an Input component, it is reasonable that it can be obtained by Tab.

Then add CSS to get the focus border effect, and move the mouse to display the text type pointer

.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);
}

Text prompts

When there is no content, it needs to be the same as Input, and a text prompt can be displayed by default. This also puts a div inside and controls it with Vue. If the output label variable has data, this element will not be displayed.

Cursor flashing effect

This is relatively easy to handle. Put a pseudo-element in the Input class, add this pseudo-element when the focus is acquired, and then give this element a CSS3 animation, and you will have the effect of a flashing cursor.

@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;
}

Key capture

Key capture mainly relies on the keydown event. The returned event will mark whether alt, ctrl (control) and other information are pressed, so key combination can be achieved by relying on this information.
Because each key press will trigger an event, the function key events must be blocked. The code only implements a combination of non-function keys. If a multi-function key is needed, you can create another variable to judge the continuous key press situation and then handle it.

  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 is another preset key code set for easy processing. Originally keyCode was used, but keyCode has been deprecated and code is recommended.
addHotkey is a function added to the corresponding variable, which mainly determines whether there are duplicate shortcut keys.
Then an external verification interface is reserved to determine whether there are duplications when there are multiple shortcut keys.
There is also a max interface that can limit the number of shortcut keys for each component.

  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);
  }

Online Preview

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

The above is the details of Vue's implementation of an Input component that obtains the effect of a key display shortcut. For more information about Vue's display shortcut keys, please pay attention to other related articles on 123WORDPRESS.COM!