我有一个按钮,用鼠标单击它时可以执行某些操作。我希望在按下键盘的向上箭头键时也能触发相同的方法。
<button @click="doSomething()"> PRESS ME </button>
doSomething(){
console.log('clicked')
}
所以在这个例子中,我想在按下键盘的向上箭头时console.log('clicked')
。我怎样才能做到这一点?
最佳答案
您可以使用 onkeystroke
from 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>
所以在这个demo中,写成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>
关于javascript - 在 vuejs 中为按钮添加键盘快捷键,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74215915/