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

Question

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

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

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

我尝试使用@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>