一、键盘监听按键并通过鼠标点击勾选table行或取消勾选行并发送数据

1.创建js把键盘监听事件放在里面

/**
 * dingwangjun 2024-08-25
 * 代码思路: 来源与网络专家-我是搬用工
 * @returns 键盘案件监听事件逻辑
 * 体会思想和方便以及逻辑处理手法-公共组件
 * 监听到键盘按键通过按下或抬起进行相关逻辑处理
 * toReleaseKeyToHandleData('标志')释放按键发送方法
 * toPressedKeyToHandleData('标志')按下按钮发送方法
 */

export default {
  data() {
    return {

    }
  },
  mounted() {
    // 在页面钩子 mounted() 处调用此函数，增加按键监听事件
    window.addEventListener('keydown',this.watchKeyToVue);
  },
  beforeDestroy() {
    document.onkeyup = null
    document.onkeydown = null
  },
  methods: {
    // 监听键盘事件
    watchKeyToVue() {
      const setKeyStatus = (keyCode, status) => {
        console.log('监听到的键盘值为::'+keyCode)
        switch (keyCode) {
          case 16://shfit键
            if (this.onShfit === status) return
            console.log('shif', status ? '按下' : '抬起')
            this.onShfit = status
            if(this.onShfit==true){
              console.log('shfit持续瞎按中...')
            }else {
              this.toReleaseKeyToHandleData('onShfit')
            }
            break
          case 17: //crtl键
            if (this.onCtrl === status) return
            console.log('ctrl', status ? '按下' : '抬起')
            this.onCtrl = status
            if(this.onCtrl==true){
              console.log('ctrl持续瞎按中...')
            }else {
              console.log('ctrl不适合因为自带屏幕缩放效果')
              //this.toReleaseKeyToHandleData('onCtrl')
            }
            break
          case 18: //alt键
            if (this.onAlt === status) return
            console.log('onAlt', status ? '按下' : '抬起')
            this.onAlt = status
            if(this.onAlt==true){
              console.log('onAlt持续瞎按中...')
            }else {
              this.toReleaseKeyToHandleData('onAlt')
            }
            break
        }
      }
      document.onkeydown = (e) => {
        setKeyStatus(e.keyCode, true)
      }
      document.onkeyup = (e) => {
        setKeyStatus(e.keyCode, false)
      }
    },
    toReleaseKeyToHandleData(flag){
      console.log('这就是一个空方法-我就啥也不干谁想干谁用')
    },
  }
}