This repo is not under maintenance anymore. Please use with caution.

A Vue component that display pressed keys on the keyboard by the user right now.

npm install vue-keyboard-over # or yarn add vue-keyboard-over

import KeyboardOver from "vue-keyboard-over";

<KeyboardOver />

The format of keys it prints out is depends on:

1. The key field and the code field of a KeyboardEvent object.
2. <KeyboardOver> will determine using key or code "smartly" to match people's common cognitions.
3. For some special KeyboardEvent without a brief key or code, <KeyboardOver> will print a pre-defined emoji or symbol.

So you can customize the print format by:

• nameType: string

  values: "smart" (default) | "key" | "code"

  • "key": print the key field of the KeyboardEvent object
  • "code": print the code field of the KeyboardEvent object
  • "smart" (default): print it in a "smart" way

• nameMap: Record<string, string>: customized map over the pre-defined key map

  You can access the pre-defined key map by:

  export { defaultKeyMap } from "vue-keyboard-over";

  The value is below:

  { // modifiers Meta: "⌘", Shift: "⇧", Control: "⌃", Alt: "⌥", // action keys Enter: "⏎", Backspace: "⌫", // navigation keys ArrowUp: "↑", ArrowDown: "↓", ArrowLeft: "←", ArrowRight: "→", // special chars Backquote: "`", Minus: "-", Equal: "=", BracketLeft: "[", BracketRight: "]", Backslash: "\\", Semicolon: ";", Quote: "'", Comma: ",", Period: ".", Slash: "/" }

• update(keys: Array<string>): It will be emitted with current keys when any key pressed down or released up. So you can use this to do more about current keys.

You can override the component style throught these CSS selectors:

• .keyboard-over: The root element.
• .keyboard-over > kbd: The printed key item.
• .keyboard-over-list-*: The prefix of CSS transition classes. Or you can totally drop the default transition by set the prop transition which allows you to specify another prefix of CSS transition classes.

• nameType
• nameMap
• transition

• update(keys)

• .keyboard-over
• .keyboard-over > kbd
• .keyboard-over-list-*

• defaultKeyMap: Record<string, string>