在 vuejs 中为按钮添加键盘快捷键-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

在 vuejs 中为按钮添加键盘快捷键

P粉771233336 2024-01-04 14:42:21

[Vue.js讨论组]

495

我有一个按钮，用鼠标单击它时可以执行某些操作。我希望在按下键盘的向上箭头键时也能触发相同的方法。

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

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

所以在这个例子中，我想在按下键盘的向上箭头时 console.log('clicked') 。我怎样才能做到这一点？

P粉771233336

全部回复(2)

P粉0314920812024-01-05 10:06:30 2楼

希望对您有帮助。

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粉9940928732024-01-05 00:54:05 1楼

您可以使用 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() 编写的

更新

没有库的纯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>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>