vue.js - 如何在vuejs中检测ctrl + z和ctrl + y？

Question

您好，我是 vuejs 的新手，目前正在开发一个需要在 Ctrl + z 和 Ctrl + y 上调用该方法的应用程序。这是我到目前为止尝试过的方法

https://codesandbox.io/s/funny-sky-mqdg0?file=/src/components/HelloWorld.vue

问题:只有当我在输入上按下 ctrl+z 时，keyup 才起作用，我如何让它在 div 容器上工作或让它在特定页面上工作？是否有可能在纯 vuejs 中或者我需要安装任何外部库或使用传统的事件监听器方式？任何建议都会有所帮助

<input @keyup.ctrl.90="method1()" />
<input @keyup.ctrl.89="method2()" />

Answer 1

您可以为整个页面设置一个 keyup 处理程序。

如果您想撤消/重做输入之外的数据，我认为您必须将每个更改保存在某处，然后在 keyup 处理程序中撤消/重做。

<div>{{ output }}</div>

data () {
  return {
    changes: [],
    output: ''
  }
},
mounted () {
  document.addEventListener('keyup', this.keyupHandler)
},
destroyed () {
  document.removeEventListener('keyup', this.keyupHandler)
},
methods: {
  logChange (string) {
    this.changes.push(string)
  }
  keyupHandler (event) {
    if (event.ctrlKey && event.key === 'z') {
      this.undoHandler()
    }
    else if (event.ctrlKey && event.key === 'y') {
      this.redoHandler()
    }
  },
  undoHandler () {
    // Get the data from "this.changes" and set the output
    this.output = ...
  },
  redoHandler () {
    // Get the data from "this.changes" and set the output
    this.output = ...
  }
}