Vue.js Vue-ctrl+；s事件侦听器未启动

“我的应用程序”对话框应响应“Ctrl+S”的保存功能，并取消默认的浏览器保存事件

<div
  @keyup.83="doSave"
  @keyup.ctrl.83="doSave"
  @keyup.alt.83="doSave"
  tabindex="0">

doSave事件在按下“s”（和

alt+s

）时触发，但在

ctrl+s

时不触发

为什么没有触发

ctrl+s

附加问题：有没有一种方法可以在不编码的情况下

防止默认值

？无论如何，应该可以添加

。一次
，但文档是模糊的

您的问题中包含了几个问题，因此我将逐一回答：

为什么ctrl+s没有被激发？
有几个原因。您正在使用
keyup
事件，而浏览器开始在keyup事件中保存页面。因此，您的keyup事件永远不会被触发

对于要在您的div上注册的任何事件，您的div必须具有焦点，否则事件将不会源自该元素，而是源自（大概）主体

有没有一种不用编码就可以防止默认的方法？
对。将
阻止
修改器添加到事件中。同样，您可以使用
一次
在事件触发一次后注销事件，
停止
使用
停止传播（）
和
被动
显式不停止传播。您可以使用类似以下内容：
@keydown.ctrl.83.prevent=“saveMe”

我怎样才能让它工作？
如果用户在能够保存之前必须聚焦元素，或者获得默认行为，则可以使用以下方法：

<div
  id="app"
  tabindex="0"
  @keydown.ctrl.83.prevent.stop="saveInsideComponent"
>
  <!-- -->
</div>

@Sumurai8的答案很好，但我想通过检查
e.metaKey
是否为==true来增加对苹果设备的支持。代码如下所示：

mounted（）{
文件。添加的文件列表（“向下键”，此为。doSave）；
},
在…之前{
document.removeEventListener（“keydown”，this.doSave）；
},
方法：{
多萨夫（e）{
如果（！（e.keyCode==83&&（e.ctrlKey | | e.metaKey）））{
返回；
}
e、 预防默认值（）；
log（“从DOM保存！”）；
},
}
当我按下ctrl+s键时，doSave会触发2次。一个用于ctrl+s和“s”键。我认为tabindex是个问题。在chrome中，我必须单击元素以获得焦点。在那之后。。。keyup事件正在工作。与@dagalti手动关注挂载上的元素所述的行为相同
mounted（）{this.$el.focus（）}，
然后按键。Codepen：此外，如果您添加
exact
修改器，那么它只会单击一次。但是你需要为这两个方面都写：答案很好，尽管焦点的东西是离题的：我的div是可聚焦的，其他的keyup事件确实被触发了。非常感谢！
  mounted() {
    document.addEventListener("keydown", this.doSave);
  },

  beforeDestroy() {
    document.removeEventListener("keydown", this.doSave);
  },

  methods: {
    doSave(e) {
      if (!(e.keyCode === 83 && e.ctrlKey)) {
        return;
      }

      e.preventDefault();
      console.log("saving from DOM!");
    },
  }