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>

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

Vue: How to change a button's text while a keyboard modifier is held?

javascript

modifier-key

vue.js