vueバインドショートカット
たとえば、あるページにctrl+sのショートカットキーをバインドします.ショートカットキーを押すと複数回トリガーされることを防止するため、keydownとkeyupをバインドする必要があります.
1.jsグローバルに変数を設定する
2.methodsに2つの新しい関数を書き込む
3.createdサイクルでEventListenerをバインドする
4.ページを離れるときにEventListenerを破棄することを忘れないでください.そうしないと、ショートカットキーは常にバインドされます.
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)
},