web-dev-qa-db-fra.com

Gérer la pression des touches par fonction dans VueJs

dans mon composant, j'utilise le modal de VueStrap comme ceci:

<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>

Je veux gérer la pression des touches lorsque ce modal est ouvert et m'assurer de soumettre le modal lorsque vous appuyez sur enter ou de fermer le modal lorsque esc est pressé.

J'ai ajouté une fonction personnalisée keyHandler qui n'est malheureusement jamais déclenchée. Pouvez-vous me dire comment corriger le code pour gérer la pression des touches dans cette fonction? Ou quand est le meilleur moyen de fermer et de soumettre vue strap modal, je serai reconnaissant pour vos conseils. Merci.

javascriptvue.jsvuejs2vue-componentvue-strap
4
Denis Stephanov

Vous pouvez attacher votre gestionnaire d'événements à window, de cette façon, vous pouvez recevoir tous les événements clés et agir en fonction de l'état de votre modal:

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