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

Question

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?

Answer 1

希望对您有帮助。

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

您可以使用 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 不支持 ，因此在此演示中，它是用 setup() 编写的

---

更新

没有库的纯js：

<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>