Detaillierte Erläuterung der Ereignisschritte zur Verarbeitung von Vue-Tastenmodifikatoren

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte des Ereignisses zur Verarbeitung von Vue-Tastenmodifikatoren geben. Welche Vorsichtsmaßnahmen gibt es für das Verarbeitungsereignis von Vue-Tastenmodifikatoren? Fall, werfen wir einmal einen Blick darauf.

Tastenmodifikatoren

Bei der Entwicklung auf der PC-Seite stoßen wir häufig auf ähnliche Anforderungen, z. B. das Absenden eines Formulars, wenn der Benutzer die Eingabetaste drückt, ohne Tastenmodifikatoren zu verwenden Mithilfe des Zeichens können wir auf Tastaturereignisse achten und anhand des Werts von keyCode urteilen

Vue fügt Tastenmodifikatoren und Systemmodifikatoren hinzu, um ähnliche Ereignisse zu verarbeiten

/** 提交表单 */
<template>
  <p class="demo">
    电话号码:
    <input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.13="handleSubmit" />
  </p>
</template>
<script>
export default {
  data () {
    return {
      phone: '' // 电话号码
    }
  },
  methods: {
    // TODO 提交电话号码
    handleSubmit () { alert(this.phone) }
  }
}
</script>

Denken Sie daran, dass alle keyCode-Werte schwierig sind , daher stellt Vue Aliase für häufig verwendete Tasten bereit

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.enter="handleSubmit" />

Allgemeine Schaltflächen-Aliase

Enter Tab Delete Esc Leertaste nach oben unten links rechts

Wenn diese Aliase Ihre Anforderungen nicht erfüllen können, können Sie das globale config.keyCodes -Objekt verwenden, um die Schlüsselmodifikator-Aliase anzupassen

Vue.config.keyCodes.x = 88

Sie können auch die Von „keyboardEvent.key“ bereitgestellte Tastennamen können als Modifikatoren in Kebab-Case umgewandelt werden. Die folgenden zwei Modifikatoren können das handleSubmit-Ereignis auslösen

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.right="handleSubmit" />
<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.arrow-right="handleSubmit" />

Systemmodifikatortasten

Manchmal Sie müssen Ereignisse zusammen mit den Systemmodifikatortasten auslösen. Dabei ist zu beachten, dass das Drücken der Systemmodifikatortasten allein nicht das entsprechende Ereignis auslöst.

Die Systemmodifikatortasten umfassen die Strg-Alt-Umschalttaste für verschiedene Ein Auf der Tastatur haben die vier Systemmodifikatortasten unterschiedliche Entsprechungen. Bei der Mac-Systemtastatur entspricht sie der Befehlstaste. Auf der Windows-Systemtastatur entspricht sie der Taste ⊞

, wenn die Steuer- und v-Tasten Das handleSubmit-Ereignis wird nur ausgelöst, wenn sie zusammenarbeiten

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v="handleSubmit"/>

Manchmal müssen wir die Tastenkombination genau anpassen, um das entsprechende Ereignis auszulösen Steuer- und V-Tasten arbeiten zusammen. Das handleSubmit-Ereignis wird ausgelöst.

<input type="text" placeholder="请输入电话号码" v-model="phone" @keyup.ctrl.v.exact="handleSubmit"/>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

So verwenden Sie Angular-Vorlagen zum Steuern von Formularen

So verwenden Sie Koa in Node.js Benutzerauthentifizierung implementieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Ereignisschritte zur Verarbeitung von Vue-Tastenmodifikatoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!