vue 프로젝트에서 키보드 이벤트 바인딩에 대한 자세한 설명

Vue 프로젝트에서 키보드 이벤트가 텍스트 입력 상자 또는 버튼 버튼에 바인딩되는 경우가 종종 발생하며 가장 일반적인 이벤트는 입력 이벤트입니다.

vue 공식 웹 사이트에서 제공하는 방법에 따르면:

v-on:keyup.enter

속기:

@키업.엔터

구성 요소에 바인딩된 경우 기본 수정자를 추가해야 합니다.

 <el-input
          v-focus
          :placeholder="$t('enterPoolName')"
          v-model.trim="strPool"
          :maxlength="100"
          @keyup.enter.native="handleSearchMember"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>

하지만 이 방법은 포커스를 획득한 경우에만 동작하며, 포커스를 잃으면 키보드 이벤트를 수행할 수 없습니다.

프로젝트가 포커스를 잃을 때 해당 키보드 이벤트를 실행하고 로그인을 위해 양식을 제출하는 것과 같은 사전 결정된 동작을 완료하기 위한 프로젝트 요구 사항이 있는 경우.

그런 다음 기존 방법을 사용하여 키보드 이벤트를 문서 문서에 바인딩한 다음 키보드의 각 키 값을 가져와서 키보드 이벤트 응답을 실행해야 합니다.

mounted() {
    const that = this;
    document.addEventListener('keydown', that.handleWatchEnter);
  },
  methods: {
    handleWatchEnter(e) {
      var key = window.event ? e.keyCode : e.which;
      console.log(key);
      if (key === 13) {
        // 这里执行相应的行为动作
        console.log('++++');
      }
    },
}

마지막으로 키보드의 각 키에 해당하는 값과 vue 키보드 이벤트의 작성 방법을 첨부합니다.

vue의 버튼 키보드 이벤트 

@keydown(키보드를 누를 때 트리거), @keypress(키보드를 누를 때 트리거), @keyup(키보드 팝업)

키의 키 코드 e.keyCode 가져오기

@keyup.13 엔터를 누르세요

@keyup.enter 엔터

@keyup.up 키 업

@keyup.down 다운 키

@keyup.left 왼쪽 버튼

@keyup.오른쪽 오른쪽

@keyup.delete 삭제 키