Verschachtelte Komponenten in einem Designsystem

Der Bau wiederverwendbarer und reaktionsschneller Front-End-Komponenten, insbesondere solche mit verschachtelten Strukturen, stellt erhebliche Herausforderungen. In diesem Artikel wird eine Lösung untersucht, die die Fallstricke übermäßiger Medienfragen und doppelte Styling vermeidet.

Betrachten Sie eine einfache CATA-Komponente (Call-to-Action). Auf kleineren Bildschirmen möchten wir ein kompaktes Layout: [Illustratives Bild von kompaktem CTA würde hier gehen]. Einfache Medienabfragen können dies erreichen, aber Probleme treten mit verschachtelten Komponenten auf. Wenn beispielsweise die Schaltfläche innerhalb der CTA bereits vollbreitende Funktionen verfügt, wendet eine Medienabfrage auf das Styling des übergeordneten Duplikats an.

Dieses Problem eskaliert mit komplexerer Verschachtelung, was zu erheblichen Code -Duplikation und Wartungskopfschmerzen führt. Änderungen am Button-Styling mit voller Breite würden Aktualisierungen an mehreren Stellen erfordern. Eine elegantere Lösung ist erforderlich. Während Containerabfragen Potenzial bieten, befassen sie jedoch nicht vollständig die Notwendigkeit, verschiedene Komponenten -Requisiten dynamisch anzupassen, basierend auf der Bildschirmgröße.

Dieser Artikel schlägt einen anderen Ansatz vor: Nutzung von Komponenten -Requisiten und JavaScript zur Steuerung des reaktionsschnellen Stylings.

Tracking -Fensterbreite

Wir beginnen mit der Verfolgung der Fensterbreite und der Definition von Haltepunkten. In diesem Beispiel wird ein Vue -komponierbar:

 // CompoSables/UseBreakpoints.js
importieren {readonly, ref} aus "vue";

const bps = ref ({xs: 0, sm: 1, md: 2, lg: 3, xl: 4});
const currentbreakpoint = ref (bps.xl);

exportieren Sie default () => {
  const updateBreakpoint = () => {
    const windowwidth = window.innnerwidth;
    // ... (Breakpoint Logic wie im Originalartikel) ...
  };

  return {currentBreakPoint: Readonly (CurrentBreakPoint), BPS: Readonly (BPS), UpdateBreakPoint};
};

Diese komponierbare Rolle wird in App.vue verwendet, um Ereignisse für die Größe von Größen zu hören:

 // app.vue
Importieren Sie Use Breakpoints aus "@/composables/useBreakpoints";
importieren {onmounted, onunmounted} aus 'Vue';

Standard ausführen {
  // ...
  aufstellen() {
    const {UpdateBreakPoint} = useBreakpoints ();

    onmorted (() => {
      updateBreakpoint ();
      window.adDeVentListener ('Größe', UpdateBreakpoint);
    });

    Onunmounted (() => {
      window.removeEventListener ('Größe', UpdateBreakpoint);
    });
  }
};

(Hinweis: Das Debouncing würde die Leistung in einer Produktionsumgebung verbessern.)

Responsive Styling

Die CTA -Komponente wird so geändert, dass sie eine displayMode -Requisite akzeptieren:

 // Komponenten/cta.vue
<template>
  <div :class="`cta ${mode}`">
    <div class="cta-content">
      <h5>Titel</h5>
      <p>Beschreibung</p>
    </div>
    <btn :block="mode === 'compact'">Weitermachen</btn>
  </div>
</template>

<script>
import Btn from "@/components/ui/Btn";
import { useResponsive, withResponsiveProps } from "@/composables/useResponsive";

export default {
  name: "CTA",
  components: { Btn },
  props: withResponsiveProps(['default', 'compact'], {}),
  setup(props) {
    const { mode } = useResponsive(props);
    return { mode };
  }
};
</script>

<style scoped>
.cta {
  display: flex;
  align-items: center;
  &.compact {
    flex-direction: column;
    .cta-content {
      margin-right: 0;
      margin-bottom: 2rem;
    }
  }
}
</style>

Der mode wird basierend auf dem currentBreakpoint ermittelt:

<cta :display-mode="currentBreakpoint.value > bps.md ? 'default' : 'compact'"></cta>

Dadurch wird die Notwendigkeit von Medienabfragen innerhalb der Komponente beseitigt.

Erweiterte Funktionalität und Wiederverwendbarkeit

Der Ansatz erstreckt sich auf komplexere Szenarien, wie z. Die customMode Requisite ermöglicht die Spezifikation des Pro-Breakpoint-Modus:

<cta :custom-mode="['compact', 'default', 'compact']"></cta>

Darüber hinaus kann der Code erheblich verbessert werden, indem wiederverwendbare Verbindungswerte für die Verwaltung von Responsiv -Verhalten und die Validierung von Requisiten extrahiert werden. Die useResponsive und withResponsiveProps -Komponisten zeigen dies.

Abschluss

Diese Methode bietet eine robustere und wartbarere Lösung für den Aufbau reaktionsfähiger Komponentensysteme. Durch die Nutzung von JavaScript- und CSS -Klassen minimiert sie die Code -Duplikation, verbessert die Konsistenz und bietet eine größere Flexibilität für die Behandlung komplexer Responsive Layouts und verschachtelte Komponenten.

Das obige ist der detaillierte Inhalt vonVerschachtelte Komponenten in einem Designsystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!