Comment gérer les événements à l'aide des modificateurs de touches Vue

Cette fois, je vais vous montrer comment utiliser les modificateurs de touches Vue pour gérer les événements, et quelles sont les précautions pour utiliser les modificateurs de touches Vue pour gérer les événements. Ce qui suit est un exemple pratique. Dans ce cas, jetons un coup d'œil ensemble. Jetez un œil.

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 sans utiliser de modificateurs de touches Lorsque en tapant, nous pouvons écouter les événements du clavier et juger en fonction de la valeur de keyCode

Vue ajoute des modificateurs de touches 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: '' // 电话号码
    }
  },
  methods: {
    // TODO 提交电话号码
    handleSubmit () { alert(this.phone) }
  }
}
</script>

Pour se souvenir de tout La valeur keyCode est difficile , donc Vue fournit des alias pour les touches couramment utilisées

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

Alias ​​des boutons communs

onglet Entrée supprimer espace ESC en haut en bas à gauche à droite

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

Vue.config.keyCodes.x = 88

Vous pouvez également convertissez les noms de touches exposés par KeyboardEvent.key en kebab-case en tant que modificateurs. 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 système

Parfois. nous devons déclencher des événements avec les touches de modification du système. Il convient de noter ici qu'appuyer uniquement sur les touches de modification du système ne déclenchera pas l'événement correspondant

Les touches de modification du système incluent la touche méta ctrl alt shift pour différents claviers. , les quatre touches de modification système ont des correspondances différentes. Pour les claviers système mac, la touche méta correspond à la touche commande Dans le clavier système Windows, elle correspond à la touche ⊞

dans l'exemple ci-dessous. Les touches control et v fonctionnent ensemble, l'événement handleSubmit sera déclenché

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

Parfois, nous devons faire correspondre avec précision la combinaison de touches avant de déclencher l'événement correspondant. Dans l'exemple suivant, si et seulement si control Lorsque vous travaillez avec. la touche v, l'événement handleSubmit sera déclenché

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le chinois PHP. site web!

Lecture recommandée :

Comment utiliser le code Yuansheng JS pour implémenter le champ de recherche Baidu

jQuery.i18n pour atteindre le front -fin de l'internationalisation Quelles sont les méthodes

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!