我有一个按钮,用鼠标单击它时可以执行某些操作。我希望在按下键盘的向上箭头键时也能触发相同的方法。
<button @click="doSomething()"> PRESS ME </button> doSomething(){ console.log('clicked') }
所以在这个例子中,我想在按下键盘的向上箭头时 console.log('clicked') 。我怎样才能做到这一点?
console.log('clicked')
希望对您有帮助。
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>
您可以使用 vueuse 中的 onkeyrinkle
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 不支持 ,因此在此演示中,它是用 setup() 编写的
stackblitz.com
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>
希望对您有帮助。
您可以使用
vueuse
中的onkeyrinkle
这里是另一个演示一个>
stackblitz.com
不支持,因此在此演示中,它是用
setup()
编写的更新
没有库的纯js: