Code d'implémentation pour les modificateurs de touches personnalisés (événements d'écoute du clavier) dans Vue-js tutoriel-php.cn

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

不言

Libérer： 2018-08-14 16:24:04

original

1786 Les gens l'ont consulté

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>

Copier après la connexion

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;

Copier après la connexion

Utiliser :

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

Copier après la connexion

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!