vue-keyboard-over
A Vue component that display pressed keys on the keyboard by the user right now.
Install
npm install vue-keyboard-over# or yarn add vue-keyboard-over
Import
;
Usage
Advanced Usage
Custom Print Format
The format of keys it prints out is depends on:
- The
key
field and thecode
field of aKeyboardEvent
object. <KeyboardOver>
will determine usingkey
orcode
"smartly" to match people's common cognitions.- For some special
KeyboardEvent
without a briefkey
orcode
,<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 thekey
field of theKeyboardEvent
object"code"
: print thecode
field of theKeyboardEvent
object"smart"
(default): print it in a "smart" way
-
nameMap: Record<string, string>
: customized map over the pre-defined key mapYou can access the pre-defined key map by:
;The value is below:
// modifiersMeta: "⌘"Shift: "⇧"Control: "⌃"Alt: "⌥"// action keysEnter: "⏎"Backspace: "⌫"// navigation keysArrowUp: "↑"ArrowDown: "↓"ArrowLeft: "←"ArrowRight: "→"// special charsBackquote: "`"Minus: "-"Equal: "="BracketLeft: "["BracketRight: "]"Backslash: "\\"Semicolon: ";"Quote: "'"Comma: ","Period: "."Slash: "/"
Events
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.
Custom Style
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 proptransition
which allows you to specify another prefix of CSS transition classes.
API References
<KeyboardOver>
Default Export Props
nameType
nameMap
transition
Events
update(keys)
CSS Selectors
.keyboard-over
.keyboard-over > kbd
.keyboard-over-list-*
Named Exports
defaultKeyMap: Record<string, string>