Vue 3의 Keyup 및 Keydown 이벤트 핸들러

나는 최근에 Vue의 keyup 및 keydown 기능과 싸우느라 너무 오랜 시간을 보냈습니다. 나는 ctrl+period 키보드 이벤트를 처리하고 싶었고 내 사용 사례를 다루는 문서의 일부를 찾는 데 영원히 걸렸습니다. 이 가이드가 시간을 절약할 수 있기를 바랍니다!

참고: 이 가이드는 Vue 3용입니다! Vue 2를 사용 중이라면 다른 가이드를 찾아보세요.

@keyup 및 @keydown

일부 기본 키 누르기 시나리오는 매우 간단합니다. 예를 들어 누군가 "Enter"키를 누를 때 캡처하고 싶습니까? 넌 할 수있어:

<input @keyup.enter="onPressEnter" />

또는 키를 놓았을 때가 아니라 눌렀을 때 이벤트가 발생하기를 원할 수도 있습니다.

<input @keydown.enter="onPressEnter" />

onPressEnter를 정의하고 템플릿에 노출해야 한다는 점을 명심하십시오! 옵션 API를 사용 중이라면 메서드로 정의해야 함을 의미하고 setup() 를 사용 중이라면 setup() 함수에서 반환해야 함을 의미합니다.

어떤 키가 작동합니까?

to the docs에 따르면 공통 키에 별칭이 제공됩니다.

.enter

.tab

.delete ("Delete"및 "Backspace"키를 모두 캡처함)

.esc

.space

.up

.down

.left

.right

그러나 다른 키를 캡처하려면 어떻게 해야 합니까? 글쎄요 문서는 불행히도 이 사용 사례에 대해 대부분 얼버무립니다(적어도 나는 그것이 언급된 곳을 찾을 수 없었습니다)

그러나 Vue2 -> Vue3 migration guide에서 유용한 정보를 찾았습니다. 수정자로 사용하려는 키에 대해 kebab-case 이름을 사용할 수 있는 것으로 나타났습니다. 예를 들어:

<input @keyup.a="onPressA" />
<input @keyup.page-down="onPressPageDown" />

쉼표와 같은 일부 구두점 문자에도 작동합니다.

<input @keyup.,="onPressComma" />

이제 우리는 내 문제에 도달합니다.

What if I want to capture an event on the period key?

다음은 작동하지 않습니다.

<input @keyup..="onPressPeriod" />

대신 모든 keydown/keyup 이벤트를 캡처하는 핸들러를 작성하고 올바른 속성을 수동으로 감시해야 합니다.

<input @keyup="onPress" />

const onPress = (e) => {
  if (e.key !== ".") {
    // guard against non-period presses
    return;
  }
  onPressPeriod()
};

시스템 수정자

"시스템 수정자"또는 "키 조합"의 주제는 explained well in the docs 이므로 많은 시간을 할애하지 않겠습니다. 사용 가능한 네 가지 옵션은 다음과 같습니다.

.ctrl

.alt

.shift

.meta ("meta"키는 Apple 키보드의 "command"이고 Windows 키보드의 "windows"키입니다.)

ctrl+enter에서 이벤트를 발생시키려면 수정자를 연결하면 됩니다.

<input @keyup.ctrl.enter="onPressEnter" />

이벤트 수정자

<input @keyup.ctrl.stop="onPressCtrl" />

구문적으로 이벤트 수정자는 @keyup 키워드에도 연결됩니다. 옵션은 다음과 같습니다.

.stop - 다른 핸들러로의 이벤트 전파 중지

.prevent - 이벤트의 기본 처리 방지(예: 양식 제출을 위한 페이지 다시 로드)

.self - 자식이 아닌 이 요소에 대한 이벤트만 실행합니다

.

.capture - 하위 수준에서 이벤트를 처리하기 전에 여기에서 이벤트를 처리합니다

.

.once - 이 이벤트를 최대 한 번 트리거합니다

.

.passive - 기본 동작을 즉시 처리하고 차단하지 않고 여기에서도 처리합니다

.

.정확한 수식어

지정한 정확한 키를 누를 때 핸들러를 실행하려면 .exact 수정자를 사용하십시오.

<!-- this will fire even if alt or another key is also pressed -->
<button @keyup.ctrl="onPressCtrl">A</button>

<!-- this will fire if ONLY ctrl is pressed -->
<input @keyup.ctrl.exact="onPressCtrl" />

마우스 버튼 수정자, 속지 마세요

처음에는 .left와 .right가 화살표 키를 의미한다고 가정했습니다. 사실, 그들은 마우스 버튼을 참조합니다. 다음 세 가지 수정자를 모두 사용하여 이벤트를 세 개의 마우스 버튼으로 제한할 수 있습니다.

.left

.right

.middle