Maison > interface Web > js tutoriel > Événement déclencheur Vue+modificateur

Événement déclencheur Vue+modificateur

php中世界最好的语言
Libérer: 2018-05-14 10:11:19
original
1678 Les gens l'ont consulté

Cette fois, je vais vous apporter l'événement déclenchant le modificateur Vue + , quelles sont les précautions pour l'événement déclenchant le modificateur Vue +, ce qui suit est un cas pratique, prenons un regarder.

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>
Copier après la connexion

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" />
Copier après la connexion

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" />
Copier après la connexion

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"/>
Copier après la connexion

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"/>
Copier après la connexion

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 :

Explication détaillée du cas d'implémentation de la fonction d'effet de boîte de recherche JS Baidu

JS+CSS3 pour réaliser la souris et interaction avec l'image Effet de grossissement

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal