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>