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 不支持 ，因此在此演示中，它是用 setup()

---

Mise à jour

Pure js sans bibliothèques :

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

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';

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

const userClickArrowUp = ({ code }) => {
    if (code === 'ArrowUp') {
        doSomething();
    }
};

onMounted(() => {
    document.addEventListener('keyup', userClickArrowUp, true);
})

onBeforeUnmount(() => {
    document.removeEventListener('keyup', userClickArrowUp, true);
})

</script>