Как обнаружить Ctrl + Z и Ctrl + Y в vuejs?

Question

Привет, я новичок в vuejs и в настоящее время работаю над приложением, которое требует вызова метода по Ctrl + z и Ctrl + y. Это то, что я пытался до сих пор Нажав на ввод, как мне заставить его работать на контейнере 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 = ...
  }
}