Windows系统有各种快捷键，用好了还是非常方便的，那么我们做的项目是不是也可以加上一些快捷呢？
比如后台管理里面的数据列表页面，一般的添加、修改、删除的操作，需要我们用鼠标去点对应的按钮，想翻页还得去找对应的数字或者箭头。
这些都挺麻烦的，如果可以使用快捷键，是不是更方便一些呢？
比如按 “alt+a” 就是添加，“alt+e”就是修改，“alt+d”就是删除。
按“PageDown”就是“上一页”，“Home”就是“首页”，数字就是翻到对应的页数。
提到按键是不是想到了vue提供的 @keyup ，我也想到了，但是尝试之后发现不太好用，因为必须让按钮获得焦点才行。
所以还是用老方法——给document 加上 keydown 的事件。
// 计时器
let timeout
// 做一个防抖
let tmpIndex = 0
document.onkeydown = (e) => {
console.log('key-doc:', e)
if (!(e.target instanceof HTMLBodyElement)) return
if (e.altKey) {
// 添加、修改等操作
switch(e.key) {
case 'a':
// 添加
console.log('添加的快捷键')
break
case 's':
// 修改
console.log('修改的快捷键')
break
case 'd':
// 删除
console.log('删除的快捷键')
break
}
} else {
// 翻页
const maxPager = parseInt(dataListState.pager.pageTotal / dataListState.pager.pageSize) + 1
switch(e.key) {
case 'ArrowLeft': // 左箭头
case 'PageDown':
// 添加
console.log('上一页')
dataListState.pager.pageIndex -= 1
if (dataListState.pager.pageIndex <= 0){
dataListState.pager.pageIndex = 1
}
break
case 'ArrowRight': // 右箭头
case 'PageDown':
// 添加
console.log('下一页')
dataListState.pager.pageIndex += 1
if (dataListState.pager.pageIndex >= maxPager){
dataListState.pager.pageIndex = maxPager
}
break
case 'ArrowUp':
case 'Home': // 首页
// 添加
console.log('首页')
dataListState.pager.pageIndex = 1
break
case 'ArrowDown':
case 'End': // 末页
// 添加
console.log('末页')
dataListState.pager.pageIndex = maxPager
break
default:
// 判断是不是数字
if (!isNaN(parseInt(e.key))) {
// 第一页到第十页的快速翻页
// dataListState.pager.pageIndex = parseInt(e.key)
// 做一个防抖
tmpIndex = tmpIndex * 10 + parseInt(e.key)
clearTimeout(timeout) // 清掉上一次的计时
timeout = setTimeout(() => {
// 修改 modelValue 属性
if (tmpIndex === 0){
dataListState.pager.pageIndex = 10
} else {
if (tmpIndex >= maxPager){
tmpIndex = maxPager
}
dataListState.pager.pageIndex = tmpIndex
}
tmpIndex = 0
}, 500)
}
}
}
e.stopPropagation()
}
e.target
首先要区分一下触发事件的dom，因为给document加上事件后，input 也会触发这个事件，按到对应的快捷键的时候就会比较“懵逼”。
所以需要先判断一下是谁触发的，观察了一下 e 的成员，发现可以用 e.path[0] 来判断，所以不是的直接退出。e.altKey
判断是不是按了 alt 键。按了 alt 是要做按钮的快捷键，没按alt 视为翻页的快捷键。e.key
按了哪个键。数字和字母会直接显示，其他的会变成对应的名称，都按一遍就知道叫啥了。做一个防抖的页号翻页
其实一开始只想实现 1-10 页的快速分页的，但是想想好像可以加上一个防抖的功能，这样任意页号都可以直接按了。看看打印结果
e 的成员
理想与现实
本来想用 alt + x 的方式来实现快捷键，但是试了几个之后发现，一些设想的快捷键和浏览器的快捷键冲突，比如 alt + e 、alt + d。
所以还是直接用字母吧 。
