VueJs에서 기능별로 키 누름 처리

VueJs에서 기능별로 키 누름 처리

내 컴포넌트에는 다음과 같은 VueStrap의 모달(모달)

<template>
    <modal-window v-model="show" v-on:keyup="keyHandler($event)" @ok="submit()" @cancel="cancel()" @closed="close()" ... >
       ...
    </modal-window>
 ...
</template>
<script> 
    ...
    methods: {
       keyHandler (event) {
           console.log(event);
       }
    },...
</script>

모달이 열리면 핸들 키를 누르고, 눌러서 들어갈 때는 제출 모드, 에스크를 누를 때는 닫기 모달의 제출 여부를 확인하고 싶다.

사용자 지정 기능을 추가했다.keyHandler불행히도 절대 해고되지 않아그 기능에서 키 누름 처리 코드를 어떻게 수정하는지 알려주시겠습니까?아니면 부에 스트랩 모달의 닫기와 제출 방법이 더 좋을 때 나는 조언에 감사할 것이다.감사합니다.

이벤트 핸들러를 에 첨부할 수 있다.window이렇게 하면 모든 주요 이벤트를 수신하고 모달의 상태에 따라 적절하게 행동할 수 있다.

Vue.component('modal', {
  template: '<div>test modal</div>',
});

new Vue({
  el: "#app",
  created() {
    window.addEventListener('keydown', (e) => {
      if (e.key == 'Escape') {
        this.showModal = !this.showModal;
      }
    });
  },
  data: {
    showModal: true
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <modal v-show="showModal"></modal>
</div>

가장 쉬운 방법

<input v-on:keyup.13="whatkey()" type="text"> <br>

입력 키를 누르면 whatkey라는 메서드를 발사한다.

또는 다음 중 하나를 사용하는 것을 고려해 보십시오.v-hotkeyVue의 키 입력에 대한 지시(docs, github).이렇게 하면 여러 가지 다른 키 입력을 고려해야 하는 경우 코드가 비교적 깨끗하고 간단하게 유지된다.

1. 설치:

npm i --save v-hotkey

2. Vue에게 '사용'을 요청하십시오.

   v-hotkey에서 VueHotkey 가져오기; Vue.use(VueHotkey);

3. Vue 구성 요소에 다음과 같이 적용:

<template>
    <modal-window ... v-hotkey="keymap">
       ...
    </modal-window>
</template>
<script>
  ...
  data() {
    return {
      showModal: false
    };
  },
  computed: {
    keymap() {
      return {
        "esc": this.toggleModal
      };
    }
  },
  methods: {
    toggleModal() {
      this.showModal = !this.showModal;
    }
  }
</script>

참조URL: https://stackoverflow.com/questions/50395674/handle-key-press-by-function-in-vuejs