Implementierungscode für benutzerdefinierte Tastenmodifikatoren (Tastatur-Hörereignisse) in Vue-js-Tutorial-php.cn

Implementierungscode für benutzerdefinierte Tastenmodifikatoren (Tastatur-Hörereignisse) in Vue

不言

Freigeben： 2018-08-14 16:24:04

Original

1822 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit dem Implementierungscode für benutzerdefinierte Tastenmodifikatoren (Tastatur-Hörereignisse). Ich hoffe, dass er für Sie hilfreich ist.

Tastenmodifikator ist das von Vue bereitgestellte Tastatur-Hörereignis.

Der Code lautet wie folgt:

<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>

Nach dem Login kopieren

Alle wichtigen Aliase

.enter

.tab

.delete

.esc

.space

.up

.left

.down

.right

ist in Ordnung über config.keyCodes Objekt-Alias für benutzerdefinierten Schlüsselwertmodifikator

js-Teildefinition:

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

Nach dem Login kopieren

Verwendung:

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

Nach dem Login kopieren

Verwandte Empfehlungen:

Zweifel an Modifikatoren für Klassenmitglieder

Vue-benutzerdefinierte Anweisungen implementieren das V-Tap-Plug-in

Detaillierte Erläuterung der Verwendung benutzerdefinierter dynamischer Komponenten in Vue

Das obige ist der detaillierte Inhalt vonImplementierungscode für benutzerdefinierte Tastenmodifikatoren (Tastatur-Hörereignisse) in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!