How Vue key modifier handles events

This article mainly introduces the relevant information of Vue key modifiers. New key modifiers and system modifiers are added in vue to handle similar events. For details, please refer to the following

keys Modifier

When developing on the PC side, we often encounter similar needs, such as submitting a form when the user presses the enter key. When no key modifier is used, we may listen for keyboard events. , judge based on the value of keyCode

Vue adds key modifiers and system modifiers to handle similar events

/** 提交表单 */
<template>
  <p class="demo">
    电话号码:
    <input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.13="handleSubmit" />
  </p>
</template>

<script>
export default {
  data () {
    return {
      phone: &#39;&#39; // 电话号码
    }
  },
  methods: {

    // TODO 提交电话号码
    handleSubmit () { alert(this.phone) }
  }
}
</script>

Remember all The keyCode value is difficult, so Vue provides aliases for commonly used keys

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

Common button aliases

enter tab delete esc space up down left right

If these aliases cannot meet the needs, you can customize the key modifier alias through the global config.keyCodes object

Vue.config .keyCodes.x = 88

You can also convert the key name exposed by keyboardEvent.key to kebab-case as a modifier. The following two modifiers can trigger the handleSubmit event

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

System Modifier Key

Sometimes we need to cooperate with the system modifier key to trigger events together. What should be noted here is , pressing the system modifier keys alone will not trigger the corresponding event

The system modifier keys include the ctrl alt shift meta key. For different keyboards, the four system modifier keys correspond to different ones. For mac system keyboards , the meta key corresponds to the command key, which corresponds to the ⊞ key in the Windows system keyboard

In the following example, the handleSubmit event will be triggered only when the control and v keys work together

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

Sometimes we need to accurately match the key combination to trigger the corresponding event. In the following example, if and only if the control and v keys work together The handleSubmit event will be triggered only when

The above is the detailed content of How Vue key modifier handles events. For more information, please follow other related articles on the PHP Chinese website!