vue快速复制快捷键_⌨️ Vue项目给应用优雅的绑定快捷键
想必各位前端看官也一定做過這樣的需求，給我們的應用某些主要的功能綁定一個快捷鍵。尤其是工具類的產品，讓用戶可以使用快捷鍵操作，能大大提高工具使用效率。
如何綁定快捷鍵
聰明的你也想到了，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 啦
export default {
...
mounted () {
// 綁定按鍵綁全套，mac 和 windows
this.$shortcut.bind('?+s, ctrl+s', this.handleSave)
},
methods: {
handleSave () {
// 保存邏輯
}
}
...
}
銷毀事件
Vue 組件中綁定事件監聽器的最佳實踐告訴我們，綁定后的事件是需要在組件銷毀時候解綁的。
export default {
...
beforeDestroy () {
this.$shortcut.unbind('?+s, ctrl+s')
}
...
}
做好防抖
拿上面綁定事件例子講，可能包括你在內的開發者，會習慣無限 Ctrl + S 保存代碼，一頓三連擊以獲得安全感😂，假設我為應用綁定了快捷鍵，但是沒做防抖的話。那么會觸發多次 handleSave 回調。其實這是沒必要的。為了避免這種情況發生，我們讓正常的回調函數變成防抖的回調函數。
直接上例子，這里借助 lodash 中的 debounce 函數來實現：
import { debounce } from 'lodash'
export default {
...
mounted () {
// 綁定按鍵綁全套，mac 和 windows
this.$shortcut.bind('?+s, ctrl+s', this.handleSave)
},
methods: {
handleSave: debounce(function () {
// 保存邏輯
}, 200)
}
...
}
快捷鍵列表
應用功能一旦多起來，那么你提供的快捷鍵一定也變得多起來，為了提升用戶體驗以及產品的專業性。我們可以給快捷鍵制作一個列表。統一展示快捷鍵。像這樣：
系統間差異
要注意截圖中展示的是 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 標簽 來標識鍵盤映射。
? + S
同類型類庫hotkeys - 是 keymaster 的臨摹版
總結
以上是生活随笔為你收集整理的vue快速复制快捷键_⌨️ Vue项目给应用优雅的绑定快捷键的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2021浙江高考宁波四中成绩查询,202
- 下一篇： html计时器组件,vue 计时器组件的