Comment le modificateur de clé Vue gère les événements

Cet article présente principalement les informations pertinentes sur les modificateurs de touches Vue. De nouveaux modificateurs de touches et modificateurs système sont ajoutés dans Vue pour gérer des événements similaires. Pour plus de détails, veuillez vous référer aux

Modificateurs de touches

Lors du développement côté PC, nous rencontrons souvent des besoins similaires, comme soumettre un formulaire lorsque l'utilisateur appuie sur la touche Entrée. Lorsqu'aucun modificateur de touche n'est utilisé, nous pouvons écouter les événements du clavier, en fonction du jugement. sur la valeur de keyCode

Vue ajoute des modificateurs clés et des modificateurs système pour gérer des événements similaires

/** 提交表单 */
<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>

À retenir C'est difficile à garder toutes les valeurs keyCode, donc Vue fournit des alias pour les boutons couramment utilisés

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

Alias ​​des boutons courants

onglet Entrée supprimer l'espace esc en haut en bas à gauche droite

Si ces alias ne peuvent pas répondre à vos besoins, vous pouvez personnaliser les alias du modificateur de clé via l'objet global config.keyCodes

Vue.config.keyCodes.x = 88

Vous pouvez également convertir le nom de clé exposé par KeyboardEvent.key en kebab-case en tant que modificateur. Les deux modificateurs suivants peuvent déclencher l'événement handleSubmit

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

.

Touches de modification du système

Parfois, nous devons déclencher des événements avec les touches de modification du système. Ce qu'il convient de noter ici, c'est qu'en appuyant seule sur la touche de modification du système, la touche ne fonctionnera pas. déclencher l'événement correspondant

Les touches de modification du système incluent la touche méta ctrl alt shift Pour différents claviers, ces quatre touches de modification système correspondent à des touches différentes. Pour les claviers système mac, la touche méta correspond à la touche de commande. correspondant à la touche ⊞

du clavier système Windows Dans l'exemple suivant, lorsque les touches contrôle et v fonctionnent ensemble, l'événement handleSubmit

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

sera. être déclenché.

Parfois, nous devons faire correspondre avec précision la combinaison de touches pour déclencher l'événement correspondant. Dans l'exemple suivant, cela ne se produira que si et seulement lorsque le contrôle et v. les touches fonctionnent ensemble. Déclenchez l'événement handleSubmit

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

Recommandations associées :

Explication détaillée du didacticiel du composant de sélection de région Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!