比如我们要在某个页面绑定一个ctrl+s的快捷键
因为防止按下快捷键触发多次的情况,所以需要将keydown和keyup都绑定

1.在js全局设定一个变量

var flag = true

2.在methods里面写入两个新函数

handleKeyDown(e) {
    var key = window.event.keyCode ? window.event.keyCode : window.event.which
    if( key === 13 ){
        if(flag)
        {
            this.submitForm()
            flag = false
        }
        e.preventDefault() //取消浏览器原有的ctrl+s操作
    }
},
handleKeyUp(e) {
     // enter
     var key = window.event.keyCode ? window.event.keyCode : window.event.which
     if( key === 13 ){
         flag = true
         e.preventDefault()
     }
 }

3.在created周期中绑定EventListener

created() {
    document.addEventListener('keydown', this.handleKeyDown)
    document.addEventListener('keyup', this.handleKeyUp)
}

4.一定要记得在离开页面时销毁EventListener,否则快捷键会一直绑定

destroyed() {
   document.removeEventListener('keydown', this.handleKeyDown)
   document.removeEventListener('keyup', this.handleKeyUp)
},
Logo

前往低代码交流专区

更多推荐