1

Como posso pegar o evento de uma tecla com o Vue? já vi alguns exemplos no site como:

<input @keyup.enter="submit">

Porém o que eu gostaria é algum tipo de listener onde se o usuário apertar um tecla chamasse uma função, sem depender de button ou input.

Por exemplo, tenho um modal onde gostaria que ao usuário apertar a tecla ESC o modal fechasse.

1 Resposta 1

1

Conforme a documentação do Vuejs2, há diversos modificadores de teclado, como você mostrou acima em seu @keyup.enter. No caso da tecla ESC, há o .esc, como, por exemplo, @keyup.esc ou @keydown.esc.

Para não ter que colocar isto dentro de um input ou button, pode não ser a melhor maneira, mas realizei uma demonstração abaixo que funcionará sempre que o ESC for pressionado (ou qualquer tecla, pois está configurado para keyup, porém há uma validação da tecla ESC, no caso keyCode 27):

new Vue({
  el: '#app',
  created() {
    document.addEventListener('keyup', this.onEsc)
  },
  beforeDestroy() {
    document.removeEventListener('keyup', this.onEsc)
  },
  methods: {
    onEsc(e) {
      if (!e) e = window.event
      let keyCode = e.keyCode || e.which
      if (keyCode == '27') {
        console.log('Esc foi pressionado')
        console.log(e.target)
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <h1>Criar um evento que seja disparado ao apertar a tecla ESC</h1>
  <h2>Aperte a tecla ESC e verifique o console.</h2>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .