vue项目 如何判断用户按下了 ctrl + d 来收藏网页

...
 
data () {
    return {
      keyObj: {
        Control: -1,
        d: -1,
      },
    }
  },
...

mouted() {
    document.onkeydown = (e) => {
      // ctrl   keyCode ==> 17  |  D  d keyCode ==> 68

      // 用户按下 ctrl 17
      const { keyCode } = e
      // console.log('keyCode ===>', keyCode);
      if (keyCode === 17) {
        this.keyObj.Control = 17
      } else if (keyCode === 68 && this.keyObj.Control === 17) {
        this.keyObj.d = 68
      }
    }
    document.onkeyup = (e) => {
      const { keyCode } = e
      if (keyCode === 17) {
        this.keyObj = {
          Control: -1,
          d: -1,
        }
      }
    }
}
...

watch: {
    keyObj: {
      handler: function (obj) {
        this.ctrl$dHandler(obj)
      },
      deep: true
    }

},
...

methods: {
    ctrl$dHandler (obj) {
      const { Control, d, } = obj
      if (Control === 17 && d === 68) {
        // alert('用户按下了 ctrl + d, #######')
      }
    },

}

  

posted @ 2021-12-23 19:59  Naijiaz  阅读(424)  评论(0)    收藏  举报