You must have done such a requirement, some of the main functions of our application to bind a shortcut key. Especially for tool products, users can use shortcut keys to improve tool efficiency.

How to bind shortcut keys

As you’re smart enough to know, the official Vue documentation has its own explanation: key modifiers

But as you probably know from practice, this way of binding key events is bound to the current ViewModel. In the template string, so you can’t customize a time to call it freely in JavaScript. However, there are advantages to doing this, such as when a ViewModel is destroyed, all event handlers are automatically deleted. You don’t have to worry about cleaning them.

Keymaster, a third-party plug-in, is used to bind keys programmatically.

The use of plug-in

The installation

npm i keymaster -S
or
yarn add keymaster -S
Copy the code

use

import key from 'keymaster'

// Bind the shortcut key to key A
key('a'.function(){ alert('you pressed a! ')});// The callback returns false to prevent the browser's default event behavior
key('ctrl+r'.function(){ alert('stopped reload! '); return false });

// Bind multiple shortcuts to do the same thing
key('⌘ + r, CTRL + r'.function(){});Copy the code

Custom plug-ins

If a function is used more than three times, I’m used to encapsulating a generic function and writing it as plugin in Vue.

// @/plugins/shortcut.js import Vue from 'vue' import keymaster from 'keymaster' const bindKeyHandler = fn => { return () => { fn() return false } } export const shortcut = { bind: (seed, func) => keymaster(seed, bindKeyHandler(func)), ... keymaster } Vue.prototype.$shortcut = shortcutCopy the code

The plugin adds the global method $shortcut to vue. prototype. Shortcut extends keyMaster’s “long-lost” bind method. I guess keymaster doesn’t provide a BIND API. Probably because bind() is a JavaScript built-in method. To avoid naming conflicts or syntax ambiguities.

The binding event

🌰 to ⌘ an application, the shortcut must be Ctrl + S

<script> export default { ... Mount () {$shortcut.bind('⌘+s, CTRL +s', this.handlesave)}, methods: {handleSave () {// Save logic}}... } </script>Copy the code

Destruction of the event

Best practice for binding event listeners in Vue components tells us that bound events need to be unbound when the component is destroyed.

<script> export default { ... BeforeDestroy () {this.$shortcut.unbind('⌘+s, CTRL +s')}... } </script>Copy the code

Well if you

Take the bind event example above. Developers, including you, might get used to saving code with infinite Ctrl + S and trivia for security 😂, assuming I’ve bound my app with a shortcut but haven’t made it tremble proof. Multiple handleSave callbacks will be triggered. It’s not really necessary. To avoid this, let’s make the normal callback function a shake-proof callback.

To get straight to the example, we use the debounce function in LoDash:

<script> import { debounce } from 'lodash' export default { ... Mount () {$shortcut.bind('⌘+s, CTRL +s', this.handlesave)}, methods: {handleSave: Debounce (function () {// save logic}, 200)}... } </script>Copy the code

Shortcut list

Once you add more features to your app, you’ll have to add more shortcuts to improve the user experience and the professionalism of your product. We can make a list of shortcuts. Unified display of shortcut keys. Like this:

Intersystem difference

Note that the ⌘ shortcut shown in the screenshot is macOS. If it is Windows, the corresponding Ctrl will need to be replaced

We can use navigator.userAgent to determine what the current user’s operating system is. To choose which shortcut key characters to display on the page.

You can click simpl.info/useragent/ to see what navigator. UserAgent prints immediately

// Without considering Linux, we can simply determine whether the current operating system is MAC or Windows
const ns = navigator.userAgent
const isMacOS = /\\b(Mac OS|Macintosh)\\b/.test(ns)
Copy the code

Semantic HTML

To ⌘ + S shortcuts, we can use the HTML tag < KBD > to identify the keyboard mapping.

<! -- For example -->
<kbd>⌘</kbd> + <kbd>S</kbd>
Copy the code

Class library of the same type

  • Hotkeys – is a copy of KeyMaster

Original: www.xlbd.me/posts/2020-…