web-dev-qa-db-ja.com

VueJでの機能ごとのキー押下の処理

私のコンポーネントでは、次のようにVueStrapのモーダルを使用しています。

<template>
    <modal-window v-model="show" v-on:keyup="keyHandler($event)" @ok="submit()" @cancel="cancel()" @closed="close()" ... >
       ...
    </modal-window>
 ...
</template>
<script> 
    ...
    methods: {
       keyHandler (event) {
           console.log(event);
       }
    },...
</script>

そのモーダルが開いているときにキープレスを処理し、Enterが押されたときに送信モーダルを、またはEscが押されたときにモーダルを閉じることを確認します。

残念ながら決して起動されないカスタム関数keyHandlerを追加しました。その関数でキーを押すことを処理するコードを修正する方法を教えていただけますか？または閉じて提出する方法が良い場合vueストラップモーダルアドバイスをいただければ幸いです。ありがとうございます。

javascriptvue.jsvuejs2vue-componentvue-strap
4
Denis Stephanov

イベントハンドラーをwindowにアタッチできます。これにより、すべてのキーイベントを受け取り、モーダルの状態に応じて適切に動作することができます。

Vue.component('modal', {
  template: '<div>test modal</div>',
});

new Vue({
  el: "#app",
  created() {
    window.addEventListener('keydown', (e) => {
      if (e.key == 'Escape') {
        this.showModal = !this.showModal;
      }
    });
  },
  data: {
    showModal: true
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <modal v-show="showModal"></modal>
</div>
10
Amr Noman