如何在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时，键盘输入才起作用，如何使其在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: {
  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 = ...
  }
}