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

问题描述

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

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

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

我尝试使用@mouSEOver.shift，但这还不够好，因为它无法捕获mouse enters the button,then user holds shift的情况

解决方法

您可以使用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>