Vue+Modifier-Triggerereignis

Dieses Mal werde ich Ihnen das Vue + Modifikator auslösende Ereignis vorstellen. Was sind die Vorsichtsmaßnahmen für das Vue + Modifikator auslösende Ereignis? Das Folgende ist ein praktischer Fall. Nehmen wir einen sehen.

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:

Detaillierte Erläuterung des Implementierungsfalls der JS Baidu-Suchfeldeffektfunktion

JS+CSS3 zur Realisierung der Maus und Bildinteraktion Vergrößerungseffekt

Das obige ist der detaillierte Inhalt vonVue+Modifier-Triggerereignis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!