Komponen bersarang dalam sistem reka bentuk

Membina komponen depan yang boleh diguna semula dan responsif, terutama mereka yang mempunyai struktur bersarang, memberikan cabaran yang signifikan. Artikel ini meneroka penyelesaian yang menghindari perangkap pertanyaan media yang berlebihan dan gaya pendua.

Pertimbangkan komponen panggilan-ke-tindakan yang mudah (CTA). Pada skrin yang lebih kecil, kami mahukan susun atur padat: [Imej ilustrasi CTA padat akan pergi ke sini]. Pertanyaan media mudah boleh mencapai ini, tetapi masalah timbul dengan komponen bersarang. Sebagai contoh, jika butang dalam CTA sudah mempunyai keupayaan penuh lebar, memohon pertanyaan media kepada gaya pendua induk.

Isu ini meningkat dengan bersarang yang lebih kompleks, yang membawa kepada duplikasi kod yang besar dan sakit kepala penyelenggaraan. Perubahan kepada gaya butang lebar lebar memerlukan kemas kini di beberapa tempat. Penyelesaian yang lebih elegan diperlukan. Walaupun pertanyaan kontena menawarkan potensi, mereka tidak sepenuhnya menangani keperluan untuk menyesuaikan secara dinamik pelbagai alat komponen berdasarkan saiz skrin.

Artikel ini mencadangkan pendekatan yang berbeza: memanfaatkan alat komponen dan JavaScript untuk mengawal gaya responsif.

Lebar tetingkap penjejakan

Kami mulakan dengan menjejaki lebar tetingkap dan menentukan titik putus. Contoh ini menggunakan Vue yang boleh dikomposisikan:

 // composables/usebreakpoints.js
import {readonly, ref} dari "vue";

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

Eksport lalai () => {
  const updatebreakpoint = () => {
    const windowWidth = window.InnerWidth;
    // ... (logik breakpoint seperti dalam artikel asal) ...
  };

  kembali {CurrentBreakPoint: ReadOnly (CurrentBreakPoint), BPS: ReadOnly (BPS), UpdateBreakPoint};
};

Ini boleh digunakan dalam App.vue untuk mendengar acara saiz semula:

 // app.vue
import usebreakpoints dari "@/composables/usebreakpoints";
import {onmounted, onunmounted} dari 'vue';

Eksport Lalai {
  // ...
  persediaan () {
    const {updateBreakPoint} = UsebreakPoints ();

    onMounted (() => {
      UpdateBreakPoint ();
      window.addeventListener ('Resize', updateBreakPoint);
    });

    onunmounted (() => {
      window.RemoveEventListener ('Resize', UpdateBreakPoint);
    });
  }
};

(Nota: Debouncing akan meningkatkan prestasi dalam persekitaran pengeluaran.)

Gaya responsif

Komponen CTA diubahsuai untuk menerima Prop displayMode :

 // komponen/cta.vue
<template>
  <div :class="`cta ${mode}`">
    <div class="cta-content">
      <h5 id="tajuk">tajuk</h5>
      <p>Penerangan</p>
    </div>
    <btn :block="mode === 'compact'">Teruskan</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>

mode ini ditentukan berdasarkan currentBreakpoint :

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

Ini menghapuskan keperluan untuk pertanyaan media dalam komponen.

Fungsi lanjutan dan kebolehgunaan semula

Pendekatan ini meliputi senario yang lebih kompleks, seperti kembali ke titik putus sebelumnya atau menggunakan mod yang berbeza di seluruh halaman. Prop customMode membolehkan spesifikasi mod per-breakpoint:

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

Selain itu, kod ini dapat ditingkatkan dengan ketara dengan mengekstrak komposit yang boleh diguna semula untuk menguruskan tingkah laku responsif dan pengesahan prop. useResponsive dan withResponsiveProps composables menunjukkan ini.

Kesimpulan

Kaedah ini menawarkan penyelesaian yang lebih mantap dan boleh dipelihara untuk membina sistem komponen responsif. Dengan memanfaatkan kelas JavaScript dan CSS, ia meminimumkan duplikasi kod, meningkatkan konsistensi, dan menyediakan fleksibiliti yang lebih besar untuk mengendalikan susun atur responsif yang kompleks dan komponen bersarang.

Atas ialah kandungan terperinci Komponen bersarang dalam sistem reka bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!