Ajouter des raccourcis clavier pour les boutons dans vuejs

Question

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?

Answer 1

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>

Answer 2

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 不支持

• Maison

• Cours

• Questions et réponses

• Mon

• Maison
• Cours
• Article
• Questions et réponses
• Dictionnaire
• Manuel
• Télécharger
• Sujet

Maison

Article

Questions et réponses

Cours

Sujet

Télécharger

Jeu

Dictionnaire

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）