Wie der Vue-Tastenmodifikator Ereignisse behandelt

Dieser Artikel stellt hauptsächlich die relevanten Informationen zu Vue-Tastenmodifikatoren vor, um ähnliche Ereignisse zu verarbeiten. Weitere Informationen finden Sie unter

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, und achten möglicherweise auf Tastaturereignisse zum Wert von keyCode

Vue fügt Schlüsselmodifikatoren 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: &#39;&#39; // 电话号码
    }
  },
  methods: {

    // TODO 提交电话号码
    handleSubmit () { alert(this.phone) }
  }
}
</script>

Alles merken Der keyCode-Wert ist daher schwierig Vue bietet Aliase für häufig verwendete Tasten

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

Gemeinsame Schaltflächen-Aliase

Enter Tab, Löschen, Esc, Leertaste, oben, unten, links, rechts

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

Vue.config.keyCodes.x = 88

Sie kann auch den von „keyboardEvent.key“ bereitgestellten Schlüsselnamen als Modifikator in „kebab-case“ konvertieren. Die folgenden zwei Modifikatoren können das handleSubmit-Ereignis

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

auslösen Systemmodifikatortasten

Manchmal müssen wir ein Ereignis zusammen mit den Systemmodifikatortasten auslösen. Dabei ist zu beachten, dass das Drücken der Systemmodifikatortaste allein nicht das entsprechende Ereignis auslöst 🎜> Die Systemmodifikatortasten des Ereignisses umfassen die Strg-Alt-Umschalttaste. Bei verschiedenen Tastaturen entsprechen die vier Systemmodifikatortasten den Befehlstasten der Windows-Systemtastatur Entspricht den ⊞-Tasten

Im folgenden Beispiel wird, wenn die Steuer- und V-Tasten zusammenarbeiten, das handleSubmit-Ereignis

<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. Im folgenden Beispiel wird das handleSubmit-Ereignis nur dann ausgelöst, wenn die Steuer- und V-Tasten zusammenarbeiten

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

Verwandte Empfehlungen:

Detailliertes Tutorial zur Vue-Regionsauswahlkomponente

Das obige ist der detaillierte Inhalt vonWie der Vue-Tastenmodifikator Ereignisse behandelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!