Composants imbriqués dans un système de conception

La construction de composants frontaux réutilisables et réactifs, en particulier ceux qui ont des structures imbriquées, présente des défis importants. Cet article explore une solution qui évite les pièges des requêtes multimédias excessives et du style dupliqué.

Considérez un simple composant d'appel à l'action (CTA). Sur les écrans plus petits, nous voulons une disposition compacte: [L'image illustrative du CTA compact irait ici]. Des requêtes médiatiques simples peuvent y parvenir, mais des problèmes surviennent avec les composants imbriqués. Par exemple, si le bouton dans le CTA a déjà des capacités pleine largeur, en appliquant une requête multimédia au style de doublons parent.

Ce problème s'intensifie avec une nidification plus complexe, conduisant à des maux de tête substantiels de code et de maintenance. Les modifications du style de bouton pleine largeur nécessiteraient des mises à jour à plusieurs endroits. Une solution plus élégante est nécessaire. Bien que les requêtes de conteneurs offrent un potentiel, ils ne répondent pas pleinement à la nécessité d'ajuster dynamiquement divers accessoires de composants en fonction de la taille de l'écran.

Cet article propose une approche différente: tirer parti des accessoires de composants et JavaScript pour contrôler le style réactif.

Largeur de la fenêtre de suivi

Nous commençons par suivre la largeur de la fenêtre et définir les points d'arrêt. Cet exemple utilise un composable Vue:

 // Composables / usebreakpoint.js
import {readonly, ref} de "vue";

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

Export default () => {
  const UpdateBreakpoint = () => {
    const windowwidth = window.innerwidth;
    // ... (logique de point d'arrêt comme dans l'article original) ...
  };

  return {currentbreakpoint: readonly (currentbreakpoint), bps: readonly (bps), updateBreakpoint};
};

Ce composable est utilisé dans App.vue pour écouter les événements de redimensionnement:

 // app.vue
Importez USEBREKINGPOINTS à partir de "@ / composables / usebreakpointpoints";
import {onmounted, onunmounted} de 'vue';

Exporter par défaut {
  // ...
  installation() {
    const {updateBreakpoint} = useBreakpoils ();

    onMounted (() => {
      UpdateBreakpoint ();
      window.addeventListener («redimensi», UpdateBreakpoint);
    });

    onunmounted (() => {
      window.reMoveEventListener («redimensi», UpdateBreakpoint);
    });
  }
};

(Remarque: le débouchement améliorerait les performances dans un environnement de production.)

Style réactif

Le composant CTA est modifié pour accepter un accessoire displayMode :

 // Composants / cta.vue
<template>
  <div :class="`cta ${mode}`">
    <div class="cta-content">
      <h5>titre</h5>
      <p>description</p>
    </div>
    <btn :block="mode === 'compact'">Continuer</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>

Le mode est déterminé sur la base du currentBreakpoint :

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

Cela élimine le besoin de requêtes multimédias dans le composant.

Fonctionnalité avancée et réutilisabilité

L'approche s'étend à des scénarios plus complexes, tels que le retour à un point d'arrêt précédent ou l'utilisation de différents modes entre les pages. L'hélice customMode permet la spécification du mode de pointage par rupture:

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

En outre, le code peut être considérablement amélioré en extrait des composants réutilisables pour gérer le comportement sensible et la validation des accessoires. Les composants useResponsive and withResponsiveProps le démontrent.

Conclusion

Cette méthode offre une solution plus robuste et maintenable pour construire des systèmes de composants réactifs. En tirant parti des classes JavaScript et CSS, il minimise la duplication de code, améliore la cohérence et offre une plus grande flexibilité pour gérer les dispositions réactives complexes et les composants imbriqués.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!