How to handle events using Vue key modifiers

This time I will show you how to use Vue key modifiers to handle events, what are the precautions for using Vue key modifiers to handle events, the following is a practical case, let’s take a look take a look.

Key modifier

When developing on the PC side, we often encounter similar requirements, such as submitting a form when the user presses the enter key without using key modifiers. When using a character, we may listen to keyboard events and 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: '' // 电话号码
    }
  },
  methods: {
    // TODO 提交电话号码
    handleSubmit () { alert(this.phone) }
  }
}
</script>

Remember all keyCode Values ​​are 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 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 trigger an event together with the system modifier key. It should be noted here that pressing the system modifier key 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 the mac system keyboard, the meta key corresponds to the command key, and in the windows system keyboard it corresponds to the ⊞ key

In the following example, the handleSubmit event will be triggered 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 before triggering the corresponding event. In the following example, when And only when the control and v keys work together, the handleSubmit event will be triggered

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

I believe that after reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to use source JS code to implement Baidu search box

jQuery.i18n to achieve front-end internationalization What are the methods

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