vueバインドショートカット

5474 ワード

たとえば、あるページにctrl+sのショートカットキーをバインドします.ショートカットキーを押すと複数回トリガーされることを防止するため、keydownとkeyupをバインドする必要があります.
1.jsグローバルに変数を設定する
var flag = true

2.methodsに2つの新しい関数を書き込む
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)
},