83 lines
2.4 KiB
Text
83 lines
2.4 KiB
Text
|
# 键盘快捷键
|
||
|
|
|
||
|
|
> 配置本地和全局键盘快捷键
|
||
|
|
|
||
|
|
## 本地快捷键
|
||
|
|
|
||
|
|
您可以使用 [Menu] 模块来配置快捷键，只有在 app 处于焦点状态时才可以触发快捷键。为此，在创建 [MenuItem] 时必须指定一个 [`accelerator`] 属性。
|
||
|
|
|
||
|
|
```js
|
||
|
|
const {Menu, MenuItem} = require('electron')
|
||
|
|
const menu = new Menu()
|
||
|
|
|
||
|
|
menu.append(new MenuItem({
|
||
|
|
label: 'Print',
|
||
|
|
accelerator: 'CmdOrCtrl+P',
|
||
|
|
click: () => { console.log('打印时间') }
|
||
|
|
}))
|
||
|
|
```
|
||
|
|
|
||
|
|
还可以很容易的根据用户的操作系统配置不同的组合键。
|
||
|
|
|
||
|
|
```js
|
||
|
|
{
|
||
|
|
accelerator: process.platform === 'darwin' ? 'Alt+Cmd+I' : 'Ctrl+Shift+I'
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 全局快捷键
|
||
|
|
当应用程式不处于焦点状态时，你可以使用 [globalShortcut] 模块来检测键盘事件，
|
||
|
|
|
||
|
|
```js
|
||
|
|
const {app, globalShortcut} = require('electron')
|
||
|
|
|
||
|
|
app.on('ready', () => {
|
||
|
|
globalShortcut.register('CommandOrControl+X', () => {
|
||
|
|
console.log('CommandOrControl+X is pressed')
|
||
|
|
})
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
## BrowserWindow 中的快捷键
|
||
|
|
如果你想处理 [BrowserWindow] 中的键盘快捷键，你可以监听渲染进程中 window 对象的 `keyup` 和 `keydown` 事件。
|
||
|
|
|
||
|
|
```js
|
||
|
|
window.addEventListener('keyup', doSomething, true)
|
||
|
|
```
|
||
|
|
注意第三个参数 `true`，这意味着监听器总是在其他监听器之前接收按键，所以它们不能对它们调用 `stopPropagation()`。
|
||
|
|
|
||
|
|
如果您不想手动进行快捷键解析，可以使用一些库来进行高级的按键检测。例如 [mousetrap].
|
||
|
|
|
||
|
|
```js
|
||
|
|
Mousetrap.bind('4', () => { console.log('4') })
|
||
|
|
Mousetrap.bind('?', () => { console.log('show shortcuts!') })
|
||
|
|
Mousetrap.bind('esc', () => { console.log('escape') }, 'keyup')
|
||
|
|
|
||
|
|
// 组合
|
||
|
|
Mousetrap.bind('command+shift+k', () => { console.log('command shift k') })
|
||
|
|
|
||
|
|
// 将多个组合映射到相同的回调
|
||
|
|
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
|
||
|
|
console.log('command k or control k')
|
||
|
|
|
||
|
|
// 返回 false 以防止默认行为，并阻止事件冒泡
|
||
|
|
return false
|
||
|
|
})
|
||
|
|
|
||
|
|
// gmail 风格序列
|
||
|
|
Mousetrap.bind('g i', () => { console.log('go to inbox') })
|
||
|
|
Mousetrap.bind('* a', () => { console.log('select all') })
|
||
|
|
|
||
|
|
// konami 代码
|
||
|
|
Mousetrap.bind('up up down down left right left right b a enter', () => {
|
||
|
|
console.log('konami code')
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
[Menu]: ../api/menu.md
|
||
|
|
[MenuItem]: ../api/menu-item.md
|
||
|
|
[globalShortcut]: ../api/global-shortcut.md
|
||
|
|
[`accelerator`]: ../api/accelerator.md
|
||
|
|
[BrowserWindow]: ../api/browser-window.md
|
||
|
|
[mousetrap]: https://github.com/ccampbell/mousetrap
|