Vue JS에서 키보드 이벤트를 동적으로 할당하는 방법

Vue JS에서 키보드 이벤트를 동적으로 할당하는 방법

키다운 이벤트를 바인드할 때alt + 1다음과 같이 주 구성 요소의 조합:

<div
    @keydown.alt.49.prevent.exact="doSomething()"
>

동작하지만 에서 작성한 로직(VueJ의 동적 컴포넌트에 대한 커스텀이벤트를 프로그래밍 방식으로 바인드)에 따라 동적으로 바인드하려고 하면 다음과 같이 됩니다.

created() {
    this.$on('keydown.alt.49.prevent.exact', doSomething);
},

동작하지 않습니다.내가 뭘 잘못하고 있지?

의 첫 번째 인수는 이벤트 이름이지만 템플릿에서만 유효한 이벤트 수식자와 함께 이벤트 이름을 전달했습니다.

keydown                 // Event name
.alt.49.prevent.exact   // Event modifiers

이벤트 수식자를 구현하는 동등한 방법은 다음과 같습니다.

export default {
  methods: {
    eventHandler(e) {
      // .alt.49
      //   `keyCode` 49 is deprecated, so use `key` equivalent
      //   for Alt+1: the inverted exclamation point, not '1'
      const isAlt1 = e.altKey && e.key === '¡'

      // .exact
      const isExact = !e.shiftKey && !e.ctrlKey && !e.metaKey

      if (isAlt1 && isExact) {
        // .prevent
        e.preventDefault()

        // this.doSomething()
      }
    }
  }
}

해당 이벤트 핸들러를 에 추가하려면div, 템플릿을 적용합니다.

<div ref="myEl"></div>

그런 다음 를 통해 요소에 액세스하고 요소의 네이티브를 사용합니다.

this.$refs.myEl.addEventListener('keydown', this.eventHandler)

데모

언급URL : https://stackoverflow.com/questions/63779806/how-to-dynamically-assign-keyboard-events-in-vue-js