在vue項目中監聽鍵盤事件的方法


1在main.js文件中寫入以下代碼:
Vue.prototype.$keyBoard = function (vm, methodName, code) {
  document.onkeydown = function () {
    let key = window.event.keyCode;
    if (key == code) {
      vm[methodName](code); // 觸發methodName事件
    }
  };
}
 
2在需要監聽鍵盤事件的組件里的mounted 生命周期內寫入:
 
mounted () {
    this.$keyBoard(this, 'onClickEnter', 13) // 13就是回車鍵的keycode,這樣點擊回車就能觸發onClickEnter這個事件了
  },
 
3在組件中定義被鍵盤事件觸發的方法:
 
methods: {
    onClickEnter () {
      alert('哈哈')
    },
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM