搜尋

首頁  >  問答  >  主體

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

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

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

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

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

P粉771233336P粉771233336335 天前442

全部回覆(2)我來回復

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

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