vue3 按钮 增加快捷方式

在Vue 3中，你可以通过多种方式为按钮增加快捷方式（快捷键）。这通常涉及到使用原生HTML的accesskey属性或通过监听键盘事件（如keydown事件）来实现。

方法1：使用accesskey属性

HTML的accesskey属性允许你指定一个快捷键，当用户按下键盘上的特定键时，可以激活元素。例如，你可以这样设置：

注意：accesskey的具体行为可能因浏览器和操作系统而异。在一些环境中，用户需要按住Alt（在Windows/Linux上）或Ctrl+Opt（在Mac上）加上指定的键。

方法2：监听键盘事件

如果你想要更细粒度的控制，比如监听特定的组合键，你可以在Vue组件中监听键盘事件，并相应地触发按钮的功能。例如，监听Ctrl+S组合键：

在这个例子中，我们使用了Vue的onMounted和onUnmounted生命周期钩子来添加和移除键盘事件监听器，确保不会引起内存泄漏。

结合使用两种方法

通常，你可以结合使用这两种方法。使用accesskey属性提供基本的快捷键支持，并通过监听键盘事件实现更复杂的逻辑。例如：

然后在你的脚本中添加键盘事件监听：

const handleKeydown = (event) => {
  if ((event.ctrlKey && event.key === 's') || (event.altKey && event.key === 's')) {
    handleClick(); // 触发按钮点击逻辑
    event.preventDefault(); // 阻止默认行为，比如保存页面等
  }
};

这样，无论用户使用哪种快捷键，按钮的行为都会被触发。