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 중국어 웹사이트 기사에서 다른 관련 주제에 주목하세요!

추천 도서:

JS Baidu 검색창 효과 기능 구현 사례에 대한 자세한 설명

JS+CSS3을 사용하여 마우스와 그림 간 대화형 확대 효과 구현

위 내용은 Vue+수정자 트리거 이벤트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!