如何在 vuejs 中检测 ctrl + z 和 ctrl + y？

Question

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

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

问题：keyup 仅在我在输入上按 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: {
  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 = ...
  }
}