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

• Rumah

• Kursus

• Soal Jawab

• saya

• Rumah
• Kursus
• Artikel
• Soal Jawab
• Kamus
• Manual
• Muat turun
• Topik

Rumah

Artikel

Soal Jawab

Kursus

Topik

Muat turun

Permainan

Kamus

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