vue中全局下怎么判断键盘只按下一个按键的时候触发逻辑

最新推荐文章于 2024-07-12 09:36:48 发布

dncsdnf

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量377

点赞数 8

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/dncsdnf/article/details/135346868

版权

data () {
  return {
    downKeyCode: [],
    downMany: false
  }
},
mounted () {
  document.addEventListener('keydown', this.keydownEvent)
  document.addEventListener('keyup', this.keyupEvent)
},
methods:{
  // 按下按键
  keydownEvent (e) {
    if (e.altKey) e.preventDefault() // 阻止浏览器的默认行为
    // 记录按下了哪些按键
    if (this.downKeyCode && !this.downKeyCode.includes(e.keyCode)) this.downKeyCode.push(e.keyCode)
    // 判断是否按下了多个按键
    if (this.downKeyCode.length > 1) this.downMany = true
  },
  // 放开按键
  keyupEvent (e) {
    if (this.downKeyCode.length == 1 && e.keyCode === 18 && !this.downMany) {
      // 判断只按了一个按键并且是alt键并且没有按下其他按键触发逻辑
    }
    const index = this.downKeyCode.indexOf(e.keyCode)
    if (index > -1) this.downKeyCode.splice(index, 1)
    if (this.downKeyCode.length == 0) this.downMany = false
  },
}