Umgang mit Ereignissen mithilfe von Vue-Tastenmodifikatoren

Dieses Mal zeige ich Ihnen, wie Sie Vue-Tastenmodifikatoren zum Behandeln von Ereignissen verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Vue-Tastenmodifikatoren zum Behandeln von Ereignissen gelten. Das Folgende ist eine praktische Anleitung Fall, lasst uns gemeinsam einen Blick darauf werfen. Schaut mal rein.

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

Gemeinsame 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

, 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 Yuansheng JS-Code, um das Baidu-Suchfeld zu implementieren

jQuery.i18n, um Front zu erreichen -End-Internationalisierung Welche Methoden gibt es

Das obige ist der detaillierte Inhalt vonUmgang mit Ereignissen mithilfe von Vue-Tastenmodifikatoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!