recherche

Maison  >  Questions et réponses  >  le corps du texte

Ajouter des raccourcis clavier pour les boutons dans vuejs

J'ai un bouton qui effectue certaines actions lorsqu'on clique avec la souris. Je souhaite que la même méthode soit déclenchée lorsque vous appuyez sur la touche fléchée vers le haut du clavier. 

<button @click="doSomething()"> PRESS ME </button>

doSomething(){
  console.log('clicked')
}

Donc, dans cet exemple, je veux console.log('clicked') lorsque la flèche vers le haut du clavier est enfoncée. Comment puis-je faire ceci?

P粉771233336P粉771233336371 Il y a quelques jours461

répondre à tous(2)je répondrai

  • P粉031492081

    P粉0314920812024-01-05 10:06:30

    J'espère que cela aide. 

    doSomething(){
  console.log('clicked')
}

var buttonBtn = document.getElementById("btn");
buttonBtn.addEventListener("keyup", function(event) {
  event.preventDefault();
  this.doSomething();
});
    <button id="btn" @click="doSomething()"> PRESS ME </button>

    répondre
    0
  • P粉994092873

    P粉9940928732024-01-05 00:54:05

    Vous pouvez utiliser vueuse 中的 onkeyrinkle 

    <template>
  <div>
    <button @click="doSomething">btn</button>
  </div>
</template>

<script setup>
import { onKeyStroke } from '@vueuse/core';

const doSomething = () => {
  console.log('do something');
}

onKeyStroke(['ArrowUp'], (e) => {
  doSomething();
});
</script>

    Voici une autre démo

    Écrit par

    stackblitz.com 不支持