如何在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.code === 'KeyZ') {
      this.undoHandler()
    }
    else if (event.ctrlKey && event.code === 'KeyY') {
      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 = ...
  }
}