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>