亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

在 vuejs 中為按鈕添加鍵盤快捷鍵
P粉771233336
P粉771233336 2024-01-04 14:42:21
0
2
589

我有一個(gè)按鈕,用鼠標(biāo)單擊它時(shí)可以執(zhí)行某些操作。我希望在按下鍵盤的向上箭頭鍵時(shí)也能觸發(fā)相同的方法。

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

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

所以在這個(gè)例子中,我想在按下鍵盤的向上箭頭時(shí) console.log('clicked') 。我怎樣才能做到這一點(diǎn)?

P粉771233336
P粉771233336

全部回復(fù)(2)
P粉031492081

希望對您有幫助。

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>
P粉994092873

您可以使用 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>

這里是另一個(gè)演示一個(gè)>

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>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板