javascript - Vue：按住键盘修饰符时如何更改按钮的文本？

Question

使用 Vue，我试图让按钮在按住 Shift 键时改变其行为。更改事件的行为非常容易，click如下所示：

@click.exact="goForward"
@click.shift="goBackward"

但是，我正在努力更改按钮的文本以反映这种行为。默认文本是Forward，我正在尝试将其更改为Backward按住 Shift 键的时间。

我尝试使用@mouseover.shift但它还不够好，因为它没有捕捉到的情况mouse enters the button, then user holds shift

Answer 1

您可以使用vue-keypress包：

<template>
  <div>
    ...
    <button>{{ buttonText }}</button>
    ...
    <Keypress key-event="keydown" :key-code="16" @success="buttonText = 'Backward'" />
    <Keypress key-event="keyup" :key-code="16" @success="buttonText = 'Forward'" />
  </div>
</template>

<script>
export default
{
  data: () => ({
    buttonText: 'Forward',
  }),
}
</script>