-1

Quiero llamar a un método (en mi caso el que abre el modal) al presionar la tecla "f4" (u otra) ¿Cómo se haría eso? ya que según lo que leí y entendí de la documentación el @kayup.laTecla="miMetodo" solo funciona dentro de un input.

Gracias por la Ayuda

1
  • 3
    Bienvenido, por favor lee Cómo preguntar y de paso checa el recorrido de bienvenida, para mantener la pregunta abierta y que esta sea clara y fàcil de apoyar recomiendo edites y muestres lo que llevas
    – user128299
    el 4 dic. 2019 a las 0:50

3 respuestas 3

1

Según lo que leí y entendí de la documentación el @keyup.laTecla="miMetodo" solo funciona dentro de un input.

Funciona sobre cualquier elemento, pero para que funcione, el elemento tiene que ser capaz de recibir foco. Para ello existe la propiedad tabindex.

Hay de tener en cuenta que el elemento que escucha los eventos de teclado debe de tener foco, por lo que en el ejemplo que te pongo, este elemento ocupa el tamaño completo del viewport, para que sea fácilmente accesible.

Al añadir el tabindex por defecto se le añade un outline (Puede depender del navegador que uses) que también he eliminado con CSS.

Ejemplo:

// Para poder hacer @keyup.f4="doSomething" ya que no existe en Vue este alias
// https://vuejs.org/v2/guide/events.html#Key-Codes
Vue.config.keyCodes.f4 = 115;

Vue.component('modal', {
  template: '<div tabindex="-1" @keyup.f4="doSomething" class="container">{{text}}</div>',
  data() {
    return  {
      text: 'Apreta F4 para abrir modal'
    };
  }, 
  methods: {
    doSomething() {
      // Lógica para abrir el modal
      alert('show modal');
    }
  }
});

new Vue({
  el: "#app"
})
* {
  padding: 0px;
  margin: 0px;
}

.container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-size: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <modal></modal>
</div>


Otra opción es usar esta librería (VueGlobalEvents) que expone un componente, de forma que los eventos que escucha los delega en window. De esta forma nos ahorramos tener que crear el evento window.addEventListener y eliminarlo cuando el componente se elimina window.removeEventListener.

Ejemplo:

// Para poder hacer @keyup.f4="doSomething" ya que no existe en Vue este alias
// https://vuejs.org/v2/guide/events.html#Key-Codes
Vue.config.keyCodes.f4 = 115;

new Vue({
  el: "#app",
  components: {
    GlobalEvents: window.VueGlobalEvents
  },
  methods: {
    doSomething() {
      // Lógica para abrir el modal
      alert('show modal');
    }
  }
})
* {
  padding: 0px;
  margin: 0px;
}

.container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Arial;
  font-size: 2rem;
}
<script src="https://unpkg.com/[email protected]/dist/vue-global-events.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div class="container">Apreta F4 para abrir modal</div>
  <global-events @keyup.f4="doSomething" />
</div>

0

Lo puedes hacer con esta función

  function openWithF4(callback) {
    document.addEventListener('keydown', function (e) {
      if (e.keyCode === 115) {
        callback();
      }
    });
  }
  function demo() {
    alert('Hola mundo');
  }
  openWithF4(demo);

Solo dale en ejecutar y después presiona F4

0

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

new Vue({
  el: "#app",
  created() {
    window.addEventListener('keydown', (e) => {
      console.log(e.key);
      if (e.key == 'F4') {
       alert("funciona!");
       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>

Documentación de los keycodes:

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

Ejemplo extraído de: https://stackoverflow.com/a/50395988/3613462

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.