Explication détaillée des événements de clavier de liaison dans le projet vue

Dans le projet Vue, on rencontre parfois qu'un événement clavier est lié à une zone de saisie de texte ou à un bouton, et le plus courant est l'événement enter.

Selon la méthode donnée par le site officiel vue :

v-on: keyup.enter

Sténographie:

@keyup.enter

S'il est lié au composant, vous devez ajouter le modificateur natif

 <el-input
          v-focus
          :placeholder="$t('enterPoolName')"
          v-model.trim="strPool"
          :maxlength="100"
          @keyup.enter.native="handleSearchMember"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>

Cependant, cette méthode ne peut fonctionner que lorsque le focus est obtenu. Si le focus est perdu, les événements clavier ne peuvent pas être exécutés.

Si le projet doit perdre le focus, il peut toujours exécuter l'événement clavier correspondant et terminer le comportement prédéterminé, comme soumettre le formulaire pour se connecter, etc.

Ensuite, vous devez utiliser une méthode conventionnelle, lier l'événement clavier au document document, puis exécuter la réponse à l'événement clavier en obtenant la valeur de chaque touche du clavier.

mounted() {
    const that = this;
    document.addEventListener('keydown', that.handleWatchEnter);
  },
  methods: {
    handleWatchEnter(e) {
      var key = window.event ? e.keyCode : e.which;
      console.log(key);
      if (key === 13) {
        // 这里执行相应的行为动作
        console.log('++++');
      }
    },
}

Attachez enfin la valeur correspondant à chaque touche du clavier, et la méthode d'écriture de l'événement clavier vue :

Evénement de clavier de bouton dans la vue 

@keydown (déclenché lorsque le clavier est enfoncé), @keypress (déclenché lorsque le clavier est enfoncé), @keyup (le clavier apparaît)

Obtenir le code clé e.keyCode de la clé

@ keyup.13 appuyez sur entrée

@keyup.enter Entrez

@keyup.up clé vers le haut

@keyup.down touche bas

@keyup.left bouton gauche

@keyup.right droite

@keyup.delete touche de suppression