Tambahkan pintasan papan kekunci untuk butang dalam vuejs

Question

Saya mempunyai butang yang melakukan tindakan tertentu apabila diklik dengan tetikus. Saya mahu kaedah yang sama dicetuskan apabila kekunci anak panah atas papan kekunci ditekan.

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

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

Jadi dalam contoh ini, saya mahu console.log('clicked') apabila anak panah atas papan kekunci ditekan. Bagaimana saya boleh melakukan ini?

Answer 1

Semoga membantu.

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

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

Ini satu lagi demo一个>

Ditulis oleh

stackblitz.com 不支持 ，因此在此演示中，它是用 setup()

---

Kemas kini

JS tulen tanpa perpustakaan:

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