Vue 키 수정자 처리 이벤트 단계에 대한 자세한 설명

이번에는 Vue 키 수정자를 사용하여 이벤트를 처리하는 단계에 대해 자세히 설명하겠습니다. Vue 키 수정자를 사용하여 이벤트를 처리할 때 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

키 수정자

PC 측에서 개발할 때 사용자가 Enter 키를 눌렀을 때 양식을 제출하는 등 비슷한 요구 사항이 자주 발생합니다. 키 수정자를 사용하지 않으면 키보드 이벤트를 수신할 수 있습니다. keyCode의 값이 판단됩니다

Vue는 유사한 이벤트를 처리하기 위해 키 수정자와 시스템 수정자를 추가합니다

/** 提交表单 */
<template>
  <p class="demo">
    电话号码:
    <input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.13="handleSubmit" />
  </p>
</template>
<script>
export default {
  data () {
    return {
      phone: '' // 电话号码
    }
  },
  methods: {
    // TODO 提交电话号码
    handleSubmit () { alert(this.phone) }
  }
}
</script>

모든 keyCode 값을 기억하기 어렵기 때문에 Vue는 일반적으로 사용되는 키에 대한 별칭을 제공합니다

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.enter="handleSubmit" />

공통 버튼 별칭

enter tab delete esc space up down left right

이 별칭이 요구 사항을 충족할 수 없는 경우 전역 config.keyCodes를 통해 키 수정자 별칭을 사용자 정의할 수 있습니다. object

Vue.config.keyCodes.x = 88

key 이름을 사용할 수도 있습니다. 키로 노출된 것은 수정자로 kebab-case로 변환됩니다. 다음 두 수정자는 handlerSubmit 이벤트를 트리거할 수 있습니다.

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.right="handleSubmit" />
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.arrow-right="handleSubmit" />

시스템 수정자 키

때때로 시스템 수정자 키와 함께 이벤트를 트리거해야 합니다. 흥미로운 점은 시스템 수정자 키만 누르면 해당 이벤트가 실행되지 않는다는 것입니다.

시스템 수정자 키에는 Ctrl Alt Shift 메타 키가 포함되어 있으며, Mac 시스템 키보드의 경우 4개의 시스템 수정자 키가 서로 다릅니다. 이 키는 Windows 시스템 키보드의 ⊞ 키에 해당하는 명령 키에 해당합니다

다음 예에서는 Ctrl과 V 키가 함께 작동하면 handlerSubmit 이벤트가 트리거됩니다

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v="handleSubmit"/>

때로는 정확하게 일치해야 합니다. 이를 트리거하는 키 조합 해당 이벤트, 다음 예에서는 컨트롤과 v 키가 함께 작동하는 경우에만 handlerSubmit 이벤트가 트리거됩니다.

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v.exact="handleSubmit"/>

이 기사의 사례를 읽은 후 메서드를 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트 기사에서 다른 관련 주제에 주목하세요!

추천 자료:

Angular 템플릿을 사용하여 양식을 구동하는 방법

Node.js에서 Koa를 사용하여 사용자 인증을 구현하는 방법

위 내용은 Vue 키 수정자 처리 이벤트 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!