我有一個按鈕，當用滑鼠點擊它時會做一些事情。我希望在按下鍵盤的向上箭頭鍵時也觸發相同的方法。
<button @click="doSomething()"> PRESS ME </button>
doSomething(){
console.log('clicked')
}
所以在這個例子中，我想console.log('clicked')在按下鍵盤的向上箭頭時。我怎樣才能做到這一點？
uj5u.com熱心網友回復：
你可以onkeystroke使用vueuse
<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<script setup>在這個演示中不支持so，它是寫在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>
uj5u.com熱心網友回復：
希望它可以幫助你。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/521067.html