在 vuejs 中為按鈕新增鍵盤快速鍵

Question

我有一個按鈕，用滑鼠點擊它時可以執行某些操作。我希望在按下鍵盤的向上箭頭鍵時也能觸發相同的方法。

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

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

所以在這個範例中，我想在按下鍵盤的向上箭頭時 console.log('clicked') 。我怎樣才能做到這一點？

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

• 首頁

• 課程

• 問答

• 我的

• 首頁
• 課程
• 文章
• 問答
• 詞典
• 手册
• 下載
• 專題

首頁

文章

問答

課程

專題

下載

遊戲

詞典

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