vue(13) : 按键及组合键绑定

参考 : 

        详解在vue项目当中绑定键盘事件_任磊abc的博客-CSDN博客_vue绑定键盘事件 

        Vue项目给应用优雅的绑定快捷键 - 码农教程 

 

单键绑定

mounted() {
    const that = this;
    document.addEventListener('keydown', that.handleWatchEnter);
  },
  methods: {
    handleWatchEnter(e) {
      var key = window.event ? e.keyCode : e.which;
      console.log(key);
      if (key === 13) {
        // 这里执行相应的行为动作
        console.log('++++');
      }
    },
}

组合键绑定

安装

npm i keymaster -S
or
yarn add keymaster -S

引入

import key from 'keymaster'

// 给按键 A 绑定快捷键
key('a', function(){ alert('you pressed a!') });

// 回调函数返回 false 以阻止浏览器默认事件行为
key('ctrl+r', function(){ alert('stopped reload!'); return false });

// 绑定多个快捷键，做同一件事
key('⌘+r, ctrl+r', function(){ });