vue3 给列表页面加个快捷键

时间:2021-6-12 作者:qvyue

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 = 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 页的快速分页的,但是想想好像可以加上一个防抖的功能,这样任意页号都可以直接按了。

  • 看看打印结果

vue3 给列表页面加个快捷键
e 的成员

理想与现实

本来想用 alt + x 的方式来实现快捷键,但是试了几个之后发现,一些设想的快捷键和浏览器的快捷键冲突,比如 alt + e 、alt + d。

所以还是直接用字母吧 。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。