suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Fügen Sie Tastaturkürzel für Schaltflächen in VueJS hinzu

Ich habe eine Schaltfläche, die beim Klicken mit der Maus bestimmte Aktionen ausführt. Ich möchte, dass dieselbe Methode ausgelöst wird, wenn die Aufwärtspfeiltaste der Tastatur gedrückt wird. 

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

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

In diesem Beispiel möchte ich also console.log('clicked'), wenn der Aufwärtspfeil der Tastatur gedrückt wird. Wie kann ich das machen?

P粉771233336P粉771233336386 Tage vor470

Antworte allen(2)Ich werde antworten

  • P粉031492081

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

    希望对您有帮助。

    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>

    Antwort
    0
  • P粉994092873

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

    您可以使用 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>

    这里是另一个演示

    stackblitz.com 不支持