Maison > Article > interface Web > Code d'implémentation pour les modificateurs de touches personnalisés (événements d'écoute du clavier) dans Vue

Code d'implémentation pour les modificateurs de touches personnalisés (événements d'écoute du clavier) dans Vue

不言original: 2018-08-14 16:24:041750parcourir

Le contenu de cet article concerne le code d'implémentation des modificateurs de touches personnalisés (événements d'écoute du clavier) dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le modificateur de touche est l'événement d'écoute du clavier fourni par Vue.

Le code est le suivant :

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id=&#39;app&#39; style="width:90%;margin:0 auto;">
    <label>Id:<input type="text" v-model="id" class="form-control"></label>
    <label>Name:
        <!--输入完成之后按下 enter键即可调用add 方法-->
      <input type="text" v-model="name" class="form-control" @keyup.enter="add">
    </label>
    <input type="button" class="btn btn-primary" name="" value="添加" @click="add" />
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  var vm = new Vue({
    el:&#39;#app&#39;,
    data:{
      id:&#39;&#39;,
      name:&#39;&#39;,
    },
    methods:{
      add(){
        alert(this.name);
        this.id = this.name = "";
      },
    },
  });
</script>
</html>

Tous les alias clés

.enter

.tab

.delete

.esc

.space

.up

.left

.down

.right

Vous pouvez également définir l'alias du modificateur de valeur de clé personnalisé partie js via l'objet

config.keyCodes

//自定义全局按键修饰符，键盘码和键盘按键的对应关系可自行百度。
Vue.config.keyCodes.f2 = 113;

Utiliser :

<input type="text" v-model="name" class="form-control" @keyup.f2="add">

Recommandations associées :

Doutes sur les modificateurs de membres de classe

vue d'instructions personnalisées pour implémenter le plug-in v-tap

Explication détaillée de l'utilisation de composants dynamiques personnalisés dans 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!

Déclaration：

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

Article précédent：Comment télécharger des fichiers en local via le code js ? (exemple)Article suivant：Comment télécharger des fichiers en local via le code js ? (exemple)

Articles Liés

Voir plus