Implementierung einer Lösung für adaptive Textbereichshöhe in Vue

Geben Sie zuerst die Lösung an. Studenten, die einen Vue-Stack benötigen, können vue-awesome-textarea direkt herunterladen.

Versteckte Probleme

Abgesehen von nativem JS unterstützen die meisten UI-Bibliotheken des Frameworks die Funktion für adaptive Textbereichshöhe, aber eine Funktion wird im Allgemeinen übersehen: das adaptive Höhenecho.

Wenn wir diese Bibliotheken verwenden, können wir problemlos Inhalte in den Textbereich eingeben. Bei Überschreitung des Bereichs wird dieser automatisch um eine Zeile erweitert, um eine hohe Anpassungsfähigkeit des Inhalts zu gewährleisten. Wenn wir Inhalte übermitteln und dieselbe Benutzeroberfläche zum Rendern auf anderen Seiten verwenden, treten Probleme auf. Einige Benutzeroberflächenbibliotheken unterstützen kein adaptives Echo, sodass wir einen Basiswert zwischen Zeilenhöhe, Zeilenanzahl und sogar Höhe berechnen müssen, um ein Echo zu erzielen.

Lösung zur adaptiven Höhe

Es gibt zwei gängige Lösungen. Eine besteht darin, im „Remote-Bereich“ der Seite ein Ghost-DOM hinzuzufügen, um Eingabezeilenumbrüche zu simulieren. Dieses DOM kann ein Div mit dem auf „true“ gesetzten Attribut „editable“ oder ein identischer Textbereich sein.
Am Beispiel der Eingabekomponente von element-ui wird die Methode resizeTextarea aufgerufen, wenn wir einen Wert in die Komponente eingeben.

resizeTextarea() {
 wenn (dieser.$istServer) zurückgeben;
 const { autosize, Typ } = dies;
 wenn (Typ !== 'Textbereich') zurückgeben;
 wenn (!autosize) {
  dies.textareaCalcStyle = {
   minHeight: calcTextareaHeight(this.$refs.textarea).minHeight
  };
  zurückkehren;
 }
 const minRows = autosize.minRows;
 const maxRows = autosize.maxRows;

 this.textareaCalcStyle = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
}

Wenn die automatische Größenanpassung auf „true“ eingestellt ist, wird der Textbereich auf eine adaptive Höhe eingestellt. Zu diesem Zeitpunkt wird die Höhe des Textbereichs in Echtzeit mit der Methode calcTextareaHeight berechnet.

 Export-Standardfunktion calcTextareaHeight(
 Zielelement,
 minRows = 1,
 maxRows = null
) {
 wenn (!hiddenTextarea) {
  hiddenTextarea = document.createElement('textarea');
  Dokument.Body.AppendChild(versteckterTextbereich);
 }

 lassen {
  Polstergröße,
  Rahmengröße,
  Boxgröße,
  Kontextstil
 } = berechneNodeStyling(Zielelement);

 hiddenTextarea.setAttribute('Stil', `${contextStyle};${HIDDEN_STYLE}`);
 hiddenTextarea.value = Zielelement.value || Zielelement.Platzhalter || '';

 lass Höhe = hiddenTextarea.scrollHeight;
 const Ergebnis = {};

 wenn (Boxgröße === 'Border-Box') {
  Höhe = Höhe + Rahmengröße;
 } sonst wenn (Boxgröße === 'Inhaltsbox') {
  Höhe = Höhe - Polstergröße;
 }

 versteckterTextbereich.Wert = '';
 let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;

 wenn (minRows !== null) {
  Lassen Sie minHeight = singleRowHeight * minRows;
  wenn (Boxgröße === 'Border-Box') {
   minHöhe = minHöhe + Polstergröße + Rahmengröße;
  }
  Höhe = Math.max(minHeight, Höhe);
  Ergebnis.minHeight = `${minHeight}px`;
 }
 wenn (maxRows !== null) {
  Lassen Sie maxHeight = singleRowHeight * maxRows;
  wenn (Boxgröße === 'Border-Box') {
   maxHöhe = maxHöhe + Polstergröße + Rahmengröße;
  }
  Höhe = Math.min(maxHeight, Höhe);
 }
 Ergebnis.Höhe = `${ Höhe }px`;
 hiddenTextarea.parentNode und hiddenTextarea.parentNode.removeChild(hiddenTextarea);
 versteckter Textbereich = null;
 Ergebnis zurückgeben;
};

Wir können sehen

 wenn (!hiddenTextarea) {
  hiddenTextarea = document.createElement('textarea');
  Dokument.Body.AppendChild(versteckterTextbereich);
}

Element-ui erstellt ein Textbereich-DOM und kopiert den Stil des echten Textbereichs über die Methode calculateNodeStyling in den versteckten Textbereich (der Überlauf wird nicht synchronisiert, der echte Textbereich wird versteckt). Überwachen Sie dann den Eingabewert des Textbereichs und synchronisieren Sie ihn mit dem versteckten Textbereich. Synchronisieren Sie gleichzeitig die Scrollhöhe des HiddenTextareas mit der Höhe des Textareas und zerstören Sie schließlich den Dom.

In Bezug auf die Stilsynchronisierung verwendet Element die beiden APIs getComputedStyle und getPropertyValue. Wenn Sie es selbst verpacken, können Sie natürlich auch das CSS-Präprozessor-Mixin verwenden.

Die zweite Lösung ähnelt der ersten Lösung, es wird jedoch kein zusätzlicher DOM erstellt. Nehmen wir als Beispiel den vue-awesome-textarea am Anfang:

 init() {
  dies.initAutoResize()
},
initAutoResize () {
  dies.autoResize und dies.$nextTick(dies.calcResize)
}

Wenn die Seite bereitgestellt wird oder sich der Inhalt ändert und autoResize aktiviert ist, wird die Methode this.calcResize ausgeführt.

 calcResize() {
 dies.resetHeight()
 dies.calcTextareaH()
},

Höhe zurücksetzen() {
 diese.Höhe = "auto"
},

calcTextareaH() {
 let contentHeight = this.calcContentHeight()
 diese.Höhe = diese.calcHeightChange(Inhaltshöhe) + 'px'
 wenn (this.needUpdateRows(contentHeight)) {
  this.updateRows(Inhaltshöhe)
 }
 this.oldContentHeight = Inhaltshöhe
},

calcContentHeight () {
 const { paddingSize } = dies.calcNodeStyle(dies.$el)
 gib dies zurück.$el.scrollHeight - paddingSize
},

resetHeight() wird verwendet, um die Höhe des Textbereichs zu initialisieren, der Standardwert ist „auto“. Mit der Methode calcTextareaH() wird die Höhe des Inhaltsbereichs berechnet (die Scrollhöhe des Textbereichs abzüglich der Höhe der Polsterung) und die berechnete Höhe in Echtzeit mit der Höhe des Textbereichs synchronisiert:
diese.Höhe = diese.calcHeightChange(Inhaltshöhe) + 'px'

Im Vergleich zu Lösung 1 übernimmt diese Lösung dieselbe Idee (dynamische Änderung der Höhe), reduziert jedoch den zusätzlichen Erstellungs- und Zerstörungsprozess des DOM.
Darüber hinaus unterstützt vue-awesome-textarea auch den Rückruf der Zeilenanzahl während des Anpassungsprozesses, wodurch das Datenecho besser unterstützt werden kann. Auch die Implementierung ist denkbar einfach:

 berechnet: {
 ...
 eineZeilenHöhe() {
  returniere this.calcContentHeight() / Zahl(this.rows) || 0
 }
 ...
}

In „computed“ berechnen wir die Höhe einer einzelnen Zeile und zeichnen beim Ausführen der Methode this.calcTextareaH() die Inhaltshöhe auf:

 this.oldContentHeight = Inhaltshöhe

Als nächstes prüfen wir, ob eine Zeilenoperation hinzugefügt wurde. Wenn dies der Fall ist, unterscheidet sich die neue Inhaltshöhe von der alten Inhaltshöhe:

 needUpdateRows(neueInhaltshöhe) {
  gib dies zurück.alteInhaltshöhe !== neueInhaltshöhe
},

An dieser Stelle geben wir die neueste Zeilenhöhe außerhalb der Komponente aus:

 updateRows(Inhaltshöhe) {
  dies.$emit('getRows', Math.round(contentHeight / dies.oneRowsHeight))
}

Dies ist das Ende dieses Artikels über die Implementierung der Textbereich-adaptiven Höhenlösung in Vue. Weitere relevante Vue-Textbereich-adaptive Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!