So implementieren Sie einen variablen Ausdrucksselektor in Vue

<div Klasse="AusdrucksContainer">
 <Eingabe />
 <div v-if="sichtbar" class="AusdrucksListBox">
 <ul Klasse="AusdruckUlBox">
  <li></li>
 </ul>
 </div>
</div>

<input ref="EingabeRef" />

<Eingabe
 ref="EingabeRef"
 v-Modell="Ausdruckswert"
 Klasse = "Ant-Eingabe"
 :readOnly="Nur lesen ? true : false"
 autoComplete="aus"
 :Platzhalter="Platzhalter"
 @blur="EingabeBeiBlurHandle"
 @keydown="Eingabe bei Tastendruck"
 @change="beiÄnderungsHandle"
 @input="beiInputHandle"
/>

// Eingabefeld Keydown-Ereignis inputOnKeyDownHandle(e) {
 // Drücken Sie gleichzeitig die Tasten Umschalt + $, wenn (e.keyCode === 52 && e.shiftKey) {
 // Den Wert des Eingabefelds abrufen const expressValue = e.target.value;
 dies.setInputValue(expressValue);

 // Aktuelle Cursorposition abrufen const position = getPositionForInput(this.$refs.inputRef);
 // Die Startposition des aktuellen Cursors const cursorIndex = position.start;

 // Setzt die Cursorposition auf die Bereichseigenschaft der Eingabe // updateRange(this.$refs.inputRef);

 // Startposition des Cursors speichern this.saveCursorIndex({ start: cursorIndex });
 // Legen Sie fest, dass das Dropdown-Auswahlfeld angezeigt werden soll. this.setSelectedBoxVisible(true);
 // Legen Sie fest, dass das Eingabetag nicht bearbeitet werden kann und nur die Auswahl aus der Dropdown-Liste zulässig ist. this.setInputIsReadonly(true);
 }
},

<ul ref="ulRef" Klasse="AusdruckUlBox">
 <li
 v-for="(Element, Index) in Optionen"
 ref="liRef"
 :Schlüssel="Artikel.Feld"
 :Datensatz="Artikel"
 :data-index="Index"
 :Datenwert="Artikel.Feld"
 tabindex="0"
 @click="liKlickHandle"
 @keydown="liKeyDownHandle"
 >
 {{ Artikelname }}
 </li>
</ul>

<li tabindex="0"></li>

erstellt() {
 const _this = dies;
 dokument.onkeydown = Funktion () {
 const Schlüssel = Fenster.Ereignis.Schlüsselcode;
 // Tasten hoch und runterif (key === 38 || key === 40) {
  _this.upAndDownKeySwitch(Schlüssel);
 }
 //Linke und rechte Tasten, sonst wenn (Taste === 39 || Taste === 37) {
  // _this.leftAndRightKeySwitch(Schlüssel);
 }
 };
},

// Auswahl der Auf- und Ab-Tasten auf der Tastatur Ausdruck upAndDownKeySwitch(Taste) {
 const liNodes = this.$refs.liRef;
 const liLength = liNodes.length;

 // Dw Pfeiltaste if (liNodes && liLength && key === 40) {
 Konstante Anzahl =
  this.arrowCount.dwArrow === liLength - 1
  ? 0
  : diese.arrowCount.dwArrow + 1;
 //Setze Padding um das Problem zu lösen, dass das erste li nicht im sichtbaren Bereich angezeigt werden kann, wenn es den Fokus erhält if (liLength > 1) {
  wenn (Anzahl === 0) {
  dies.$refs.ulRef.style.padding = "40px 0 10px 0";
  } anders {
  dies.$refs.ulRef.style.padding = "10px 0";
  }
 }
 
 // Das aktuelle li-Element erhält den Fokus liLength && liNodes[count].focus();
 // Setze den ScrollTop von ul so, dass das aktuell fokussierte li-Element im sichtbaren Bereich angezeigt wird, if (count === liLength - 1) {
  //Lösen Sie das Problem, dass das letzte li-Element nicht im sichtbaren Bereich angezeigt werden kann. this.$refs.ulRef.scrollTop = count * 40;
 } anders {
  dies.$refs.ulRef.scrollTop = Anzahl * 10;
 }

 // Speichert den Zählstatus im Inhaltsstatus der Komponente this.arrowCount = { upArrow: count, dwArrow: count };
 }

 // Pfeiltaste nach oben if (liNodes && liLength && key === 38) {
 Konstante Anzahl =
  dieser.arrowCount.upArrow <= 0
  ?liLänge - 1
  : dieser.arrowCount.upArrow - 1;
 //Setze Padding um das Problem zu lösen, dass das erste li nicht im sichtbaren Bereich angezeigt werden kann, wenn es den Fokus erhält if (liLength > 1) {
  wenn (Anzahl === liLength - 1) {
  dies.$refs.ulRef.style.padding = "10px 0 40px 0";
  } anders {
  dies.$refs.ulRef.style.padding = "10px 0";
  }
 }
 // Das aktuelle li-Element erhält den Fokus liNodes[count].focus();
 //Setzen Sie das ScrollTop von ul, sodass das aktuell fokussierte li-Element im sichtbaren Bereich angezeigt wird. this.$refs.ulRef.scrollTop = count * 60;
 // Speichert den Zählstatus im Inhaltsstatus der Komponente this.arrowCount = { upArrow: count, dwArrow: count };
 }
},

/**
 * Text einfügen * @param ctrl Eingabeelementobjekt (Eingabe, Textbereich usw.)
 * @param inputValue der Wert des Eingabefeldes*/
Exportfunktion insertAtCursor(Strg, Eingabewert) {
 // IE-Unterstützung
 wenn (Dokument.Auswahl) {
 Strg.Fokus();
 // Dokument.Auswahl.createRange() 
 // Gibt ein TextRange-Objekt basierend auf der aktuellen Textauswahl oder ein ControlRange-Objekt basierend auf der Steuerelementauswahl zurück const sel = document.selection.createRange();
 // Text auf das aktuelle TextRange-Objekt setzen sel.text = inputValue;
 } sonst wenn (ctrl.selectionStart || ctrl.selectionStart === 0) {
 // selectionStart Die Startposition des Textauswahlbereichs // selectionEnd Die Endposition des Textauswahlbereichs // MOZILLA und andere
 const startPos = ctrl.selectionStart;
 const endPos = ctrl.selectionEnd;
 // Wert an Cursorposition einfügen ctrl.value =
  // Der Wert vor der Cursorposition ctrl.value.substring(0, startPos) +
  //Der einzufügende Wert inputValue +
  //Der Wert nach der Cursorposition ctrl.value.substring(endPos, ctrl.value.length);
 // Cursorposition zurücksetzen // Nach dem Einfügen des Wertes sollte die Cursorposition am Ende des Strings sein // Der blinkende Cursor auf der Seite ist eigentlich eine spezielle Auswahl mit einer Breite von 0. Vereinfacht ausgedrückt kreuzen sich die linke und rechte Grenze der Auswahl und bilden den Cursor ctrl.selectionStart = startPos + inputValue.length;
 ctrl.selectionEnd = StartPos + Eingabewert.Länge;
 } anders {
 Strg.Wert += Eingabewert;
 }
 // Das Eingabeelementobjekt (Eingabe, Textbereich) erhält den Fokus zurück. Zu diesem Zeitpunkt sollte die Cursorposition am Ende der Eingabezeichen sein ctrl.focus();
}