Heim > Artikel > Web-Frontend > Implementierungscode für benutzerdefinierte Tastenmodifikatoren (Tastatur-Hörereignisse) in Vue

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

不言Original: 2018-08-14 16:24:041779Durchsuche

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>

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;

Verwendung:

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie lade ich Dateien über JS-Code lokal herunter? (Beispiel)Nächster Artikel：Wie lade ich Dateien über JS-Code lokal herunter? (Beispiel)

In Verbindung stehende Artikel

Mehr sehen