想必各位前端看官也肯定做过这样的需要,给咱们的利用某些次要的性能绑定一个快捷键。尤其是工具类的产品,让用户能够应用快捷键操作,能大大提高工具应用效率。
如何绑定快捷键
聪慧的你也想到了,Vue
官网文档自有解释:按键修饰符
然而理论实际过的你也可能晓得,这种绑定按键事件的形式都是绑定在了以后 ViewModel
上的。也就是模版字符串 template
中,这样就无奈自定义一个机会在 JavaScript 中自在调用。不过这样做也有益处,比方当一个 ViewModel 被销毁时,所有的事件处理器都会主动被删除。你毋庸放心如何清理它们。
这里应用第三方插件 keymaster 来做按键绑定,编程式绑定任意按键。
应用插件
装置
npm i keymaster -S
or
yarn add keymaster -S
应用
import key from 'keymaster'
// 给按键 A 绑定快捷键
key('a', function(){alert('you pressed a!') });
// 回调函数返回 false 以阻止浏览器默认事件行为
key('ctrl+r', function(){alert('stopped reload!'); return false });
// 绑定多个快捷键,做同一件事
key('⌘+r, ctrl+r', function(){});
定制插件
如果一个函数被应用超过 3 次以上,我习惯封装一个通用函数,不如间接写成 Vue 中的 plugin 好了。
// @/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 = shortcut
插件为 Vue.prototype
增加了全局办法 $shortcut,shortcut 扩大了 keymaster
“遗散多年”的 bind
办法(绑定按键事件),我猜 keymaster 没有提供 bind API,可能是因为 bind() 是 JavaScript 内置的办法。为了防止命名抵触或者语法歧义。
绑定事件
???? 举个例子:给利用增加保留性能,那快捷键肯定是 ⌘ / Ctrl
+ S
啦
<script>
export default {
...
mounted () {
// 绑定按键绑全套,mac 和 windows
this.$shortcut.bind('⌘+s, ctrl+s', this.handleSave)
},
methods: {handleSave () {// 保留逻辑}
}
...
}
</script>
销毁事件
Vue 组件中绑定事件监听器的最佳实际通知咱们,绑定后的事件是须要在组件销毁时候解绑的。
<script>
export default {
...
beforeDestroy () {this.$shortcut.unbind('⌘+s, ctrl+s')
}
...
}
</script>
做好防抖
拿下面绑定事件例子讲,可能包含你在内的开发者,会习惯有限 Ctrl + S 保留代码,一顿三连击以取得安全感????,假如我为利用绑定了快捷键,然而没做防抖的话。那么会触发屡次 handleSave
回调。其实这是没必要的。为了防止这种状况产生,咱们让失常的回调函数变成防抖的回调函数。
间接上例子,这里借助 lodash
中的 debounce
函数来实现:
<script>
import {debounce} from 'lodash'
export default {
...
mounted () {
// 绑定按键绑全套,mac 和 windows
this.$shortcut.bind('⌘+s, ctrl+s', this.handleSave)
},
methods: {handleSave: debounce(function () {// 保留逻辑}, 200)
}
...
}
</script>
快捷键列表
利用性能一旦多起来,那么你提供的快捷键肯定也变得多起来,为了晋升用户体验以及产品的专业性。咱们能够给快捷键制作一个列表。对立展现快捷键。像这样:
零碎间差别
要留神截图中展现的是 macOS
下的快捷键 ⌘
,如果是 Windows
零碎,那么须要替换相应的 Ctrl
咱们能够应用 navigator.userAgent
来判断以后用户的操作系统是什么。来抉择在页面到底显示的快捷键字符。
你能够点击 https://simpl.info/useragent/ 来立刻查看 navigator.userAgent
打印的内容
// 在不思考 linux 零碎的状况下,咱们能够这样简略的判断以后的操作系统是 mac 还是 windows
const ns = navigator.userAgent
const isMacOS = /\\b(Mac OS|Macintosh)\\b/.test(ns)
语义化 HTML
形如 ⌘
+ S
这样的快捷键,咱们能够应用 HTML 标签 <kbd>
来标识键盘映射。
<!-- 举个例子 -->
<kbd>⌘</kbd> + <kbd>S</kbd>
同类型类库
- hotkeys – 是 keymaster 的临摹版
原文:https://www.xlbd.me/posts/202…