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

【问题标题】：Vue: How to change a button's text while a keyboard modifier is held?Vue：如何在按住键盘修饰符时更改按钮的文本？
【发布时间】：2020-10-10 11:05:13
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript vue.js modifier-key

【解决方案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>

【讨论】：

看起来不错，我试试看。我真的希望有一种方法可以在没有外部包的情况下做到这一点
如果您不想为这项工作带来外部包 - 您可以简单地将 keyup 和 keydown 事件处理程序附加到 document 可以更新根 Vue 实例中的变量然后您可以通过$root.ShiftActive 访问