Implementierung des Element-UI-Layouts (Zeilen- und Spaltenkomponenten)

Wenn wir bei der tatsächlichen Entwicklung auf einige Layouts stoßen, verwenden wir Layout. Dieses Layout kann einen guten Layouteffekt erzielen und sogar reagieren, solange einige Parameter konfiguriert sind. Wie wird es konkret implementiert? Lassen Sie uns den Quellcode von Element-UI analysieren und einige Details darin erfahren.

Grundlegende Anweisungen und Verwendung

Das Layout von Element-UI basiert auf 24 Basisspalten, sodass Sie schnell und einfach Layouts erstellen können. Je nach Kombination lässt sich so schnell ein sehr schönes responsives Layout generieren. Die spezifische Verwendung ist wie folgt:

<el-Zeile>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

Aus dem obigen Beispielcode können wir erkennen, dass die Zeilenkomponente hauptsächlich zum Erstellen des Layouts der einzelnen Zeilenspalten verwendet wird, beispielsweise für Abstände und Ausrichtungen zwischen ihnen. „Col“ erstellt jede Spalte, einschließlich ihrer Länge, ihres Versatzes usw. Wir können jede Spalte frei kombinieren, um einen reaktionsfähigen Effekt zu erzielen.

Analyse von Zeilenkomponenten

Renderfunktion

Wir alle wissen, dass wir zum Schreiben von Komponenten in Vue nicht nur Vorlagen verwenden können, sondern manchmal auch direkt die Renderfunktion verwenden können, um eine Komponente zu schreiben. Weil die Vorlage letztendlich in eine Renderfunktion kompiliert wird.
Warum gibt es eine Renderfunktion? Beispielsweise gibt es jetzt eine Anforderung: Wenn wir beim Generieren von Überschriften mit Schriftgrößen von h1 bis h6 entsprechend dynamischer Ebenen eine Vorlage zur Implementierung verwenden, kann es auf unserer Seite zu vielen Pseudocodes wie diesem kommen:

<Vorlage>
   <h1 v-if="Ebene === 1">
    <Steckplatz></Steckplatz>
  </h1>
  <h2 v-else-if="Ebene === 2">
    <Steckplatz></Steckplatz>
  </h2>
  <h3 v-else-if="Ebene === 3">
    <Steckplatz></Steckplatz>
  </h3>
  <h4 v-else-if="Ebene === 4">
    <Steckplatz></Steckplatz>
  </h4>
  <h5 v-else-if="Ebene === 5">
    <Steckplatz></Steckplatz>
  </h5>
  <h6 v-else-if="Ebene === 6">
    <Steckplatz></Steckplatz>
  </h6>
</Vorlage>

Wenn Sie jedoch die Renderfunktion verwenden, ist es relativ einfach:

Vue.component('ankerte Überschrift', {
  rendern: Funktion (ErstelleElement) {
    returniere Element erstellen(
      „h“ + this.level, // Tag-Name this.$slots.default // untergeordnetes Knoten-Array)
  },
  Requisiten: {
    Ebene:
      Typ: Nummer,
      erforderlich: true
    }
  }
})

Hier gibt es einen weiteren Punkt zur Code-Optimierung. this.$slots.default speichert den Slot-Inhalt und muss nicht so oft geschrieben werden.

Quellcodeanalyse

Der Quellcode der Row-Komponente ist relativ einfach. Da wir über die Tag-Eigenschaft ein Rendering-Tag dafür angeben können, wird die Komponente direkt mit der Render-Funktion geschrieben. Die Renderfunktion ist wie folgt:

rendern(h) {
    return h(dieses.tag, {
      Klasse: [
        'el-Reihe',
        this.justify !== 'start' ? `ist-justify-${this.justify}` : '',
        this.align !== 'oben' ? `ist-align-${this.align}` : '',
        { 'el-row--flex': dieser.Typ === 'flex' }
      ],
      Stil: dieser.Stil
    }, dies.$slots.default);
  }

Aus dem obigen Quellcode können wir schließen, dass Row hauptsächlich den Klassennamen steuert, um das Inhaltslayout zu steuern. Es gibt Spaltenabstandseigenschaften, die die Anzahl der Lücken zwischen den Spalten innerhalb einer Zeile steuern. Wenn wir gutter=20 festlegen, dann hat jedes Spaltenelement einen linken und rechten Abstand von 10px, dann gibt es ein Problem: Es wird einen linken und rechten Abstand zwischen dem ersten und dem letzten Spaltenelement geben. Wie können wir also die 10-Pixel-Lücke zwischen dem ersten und dem letzten entfernen? Die Lösung für „Zeile“ besteht darin, die Zeile auf jeder Seite um -10 Pixel zu versetzen, sodass eine berechnete Eigenschaft zum Festlegen des Stils verwendet wird:

berechnet: {
    Stil() {
      : Konstanten ret = {};
      wenn (diese.gutter) {
        ret.marginLeft = `-${this.gutter / 2}px`;
        ret.marginRight = ret.marginLeft;
      }
      Rückkehr ret;
    }
  },

Analyse der Col-Komponenten

Komponentenanalyse

Col wird hauptsächlich verwendet, um die Länge und den Versatz jeder Spalte festzulegen. Die Hauptattribute sind Span und Offset. Diese Komponente wird auch mit der Renderfunktion geschrieben. Sehen wir uns zunächst an, wie die Spalte über Span und Offset gesteuert wird. Der Quellcode lautet wie folgt:

rendern(h) {
    lass Klassenliste = [];
    lass Stil = {};
    ...

    ['Spanne', 'Versatz', 'ziehen', 'schieben'].forEach(prop => {
      wenn (diese[Eigenschaft] || diese[Eigenschaft] === 0) {
        Klassenliste.push(
          Eigenschaft !== 'Spanne'
            ? `el-col-${prop}-${this[prop]}`
            : `el-col-${this[prop]}`
        );
      }
    });

    ...

    return h(dieses.tag, {
      Klasse: ['el-col', Klassenliste],
      Stil
    }, dies.$slots.default);
  }

Daraus können wir erkennen, dass die Spaltenbreite von col durch unterschiedliche Klassennamen gesteuert wird. Wir haben die entsprechende SCSS-Datei gefunden und festgestellt, dass sie die sass@for-Schleifenanweisung verwendet, um die Breite verschiedener Raster zu berechnen:

@für $i von 0 bis 24 {
  .el-col-#{$i} {
    Breite: (1 / 24 * $i * 100) * 1 %;
  }

  .el-col-offset-#{$i} {
    Rand links: (1 / 24 * $i * 100) * 1 %;
  }

  .el-col-pull-#{$i} {
    Position: relativ;
    rechts: (1 / 24 * $i * 100) * 1%;
  }

  .el-col-push-#{$i} {
    Position: relativ;
    links: (1 / 24 * $i * 100) * 1%;
  }
}

Ebenso verwendet Offset die gleiche Logik. Auf diese Weise können wir verschiedene Layoutstile entsprechend unterschiedlichen Spannweiten und Versätzen kombinieren. Kommt es Ihnen nicht so vor, als wäre die Logik dahinter so einfach? Lassen Sie uns über eine andere Frage nachdenken: Wenn wir eine Gruppe identischer Spaltenbreitenintervalle steuern möchten, müssen wir sie dann einzeln festlegen? Die Antwort ist nein, wir können die Gutter-Eigenschaft in der oben genannten Row-Komponente verwenden, um einheitliche Einstellungen vorzunehmen. Wie also wird dies erreicht? Der Quellcode lautet wie folgt:

 berechnet: {
    Dachrinne() {
      lass übergeordnetes Element = dies.$übergeordnetes Element;
      während (übergeordnetes Element und übergeordnetes Element.$options.componentName !== 'ElRow') {
        Elternteil = Elternteil.$Elternteil;
      }
      gibt das übergeordnete Element zurück? parent.gutter: 0;
    }
  }

Wir durchlaufen die übergeordnete Komponente nach oben. Wenn der Komponentenname der übergeordneten Komponente ElRow lautet, holen wir uns den Randwert und setzen dann die entsprechenden Werte für den linken und rechten Rand der Komponente:

wenn (diese.gutter) {
      Stil.paddingLeft = this.gutter / 2 + 'px';
      Stil.paddingRight = Stil.paddingLeft;
    }

Auf diese Weise haben wir das Problem der Einstellung einer einheitlichen Spaltenbreite gelöst.

Reaktionsfähiges Layout

Hier verwenden wir Medienabfragen in CSS3, um ein responsives Layout zu erstellen, und die entsprechenden Größen sind xs, sm, md, lg und xl. Der Nutzungscode lautet wie folgt:

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

Beschreibung: xs: <768px reaktionsfähige Rasternummer oder Rastereigenschaftsobjekt, sm: ≥768px reaktionsfähige Rasternummer oder Rastereigenschaftsobjekt, md: ≥992px reaktionsfähige Rasternummer oder Rastereigenschaftsobjekt, lg: ≥1200px reaktionsfähige Rasternummer oder Rastereigenschaftsobjekt, xl: ≥1920px reaktionsfähige Rasternummer oder Rastereigenschaftsobjekt.

Die Logik dahinter besteht darin, dass die Anzahl der angezeigten Raster auf verschiedenen Bildschirmgrößen unterschiedlich ist und die Anzeige sich an die Bildschirmbreite anpasst. Sehen wir uns zunächst an, wie unterschiedliche Klassenbindungen durchgeführt werden:

['xs', 'sm', 'md', 'lg', 'xl'].fürJeden(Größe => {
      wenn (Typ von diesem[Größe] === 'Zahl') {
        classList.push(`el-col-${size}-${this[size]}`);
      } sonst wenn (Typ von diesem[Größe] === 'Objekt') {
        let props = diese[Größe];
        Objekt.Schlüssel(Eigenschaften).fürJeden(Eigenschaft => {
          Klassenliste.push(
            Eigenschaft !== 'Spanne'
              ? `el-col-${size}-${prop}-${props[prop]}`
              : `el-col-${size}-${props[prop]}`
          );
        });
      }
    });

Dabei können auch Objekte wie xs als Attribute verwendet werden. Daher wird es eine Logik zur Verarbeitung von Objekten geben; die obige JS-Verarbeitungslogik ist relativ einfach. Schauen wir uns an, wie CSS die Logik dieser Medienabfrage verarbeitet.
Bei der Analyse von CSS verstehen wir zunächst ein Konzept, nämlich die integrierte Methode map-get in Sass. Die Funktion von map-get($map,$key) besteht darin, den entsprechenden Wert über $key abzurufen, was als Zuordnungsbeziehung verstanden werden kann. Wenn es nicht vorhanden ist, wird das entsprechende CSS nicht kompiliert. Zum Beispiel:

$social-colors: (
    dribbeln: #ea4c89,
    Facebook: #3b5998,
    github: #171515,
    google: #db4437,
    Twitter: #55acee
);
.btn-dribble{
  Farbe: Karte-get($social-colors,facebook);
}
// Nach der Kompilierung.btn-dribble {
  Farbe: #3b5998;
}

Die zweite ist die in Sass integrierte Methode inspect(value), die eine Zeichenfolgendarstellung zurückgibt, und value ist ein Sass-Ausdruck. Zum Beispiel:

$--sm:768px !Standard;
$--md:992px !Standard;
$--lg:1200px !Standard;
$--xl:1920px !Standard;

$--Haltepunkte: (
  'xs': (maximale Breite: $--sm - 1),
  „sm“: (Mindestbreite: $--sm),
  'md': (Mindestbreite: $--md),
  'lg': (Mindestbreite: $--lg),
  'xl': (Mindestbreite: $--xl)
);
@mixin res($Breakpoint){
  $query:map-get($--Haltepunkte,$Haltepunkt)
  @wenn nicht $query {
    @error 'Kein Wert für `#{$breakpoint}` gefunden. Bitte stellen Sie sicher, dass es 
    definiert in der „$breakpoints“-Map.‘;
  }
  @media #{inspect($query)}
   {
    @Inhalt;
   }
}
.element {
  Farbe: #000;
 
  @include res(sm) {
    Farbe: #333;
  }
}
// Kompiliertes CSS

.element {
  Farbe: #000;
}
@media (Mindestbreite: 768px) {
  .element {
    Farbe: #333;
  }
}

OK, ich glaube, Sie beherrschen diese beiden Methoden gut. Sehen wir uns also an, wie das Element implementiert wird.
Tatsächlich hat das zweite Beispiel oben bereits einiges gesagt. Werfen wir einen Blick auf den Quellcode:

$--sm:768px !Standard;
$--md:992px !Standard;
$--lg:1200px !Standard;
$--xl:1920px !Standard;

$--Haltepunkte: (
  'xs': (maximale Breite: $--sm - 1),
  „sm“: (Mindestbreite: $--sm),
  'md': (Mindestbreite: $--md),
  'lg': (Mindestbreite: $--lg),
  'xl': (Mindestbreite: $--xl)
);
/* Haltepunkte
 -------------------------- */
@mixin res($key, $map: $--Breakpoints) {
  // Loop-Breakpoint-Map, zurückgeben, ob es existiert @if map-has-key($map, $key) {
    @media nur Bildschirm und #{inspect(map-get($map, $key))} {
      @Inhalt;
    }
  } @anders {
    @warn "Undefinierte Punkte: `#{$map}`";
  }
}
@include res(xs) {
  @für $i von 0 bis 24 {
    .el-col-xs-#{$i} {
      Breite: (1 / 24 * $i * 100) * 1 %;
    }

    .el-col-xs-offset-#{$i} {
      Rand links: (1 / 24 * $i * 100) * 1 %;
    }
  }
}
@include res(sm) {
  ...
}
@include res(md) {
  ...
}
@include res(lg) {
  ...
}
@include res(xl) {
  ...
}

Auf diese Weise können wir auf unterschiedlichen Bildschirmgrößen unterschiedliche Längen und Intervalle anzeigen. Ist es nicht großartig, unsere Medienabfragen auf diese Weise zu schreiben?

Damit ist dieser Artikel zur Implementierung des Element-UI-Layouts (Zeilen- und Spaltenkomponenten) abgeschlossen. Weitere relevante Inhalte zum Element-Layout finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!