設計系統中的嵌套組件

建造可重複使用的響應式前端組件，尤其是具有嵌套結構的組件，提出了重大挑戰。本文探討了一種避免過多的媒體查詢和重複樣式的陷阱的解決方案。

考慮一個簡單的呼籲行動（CTA）組件。在較小的屏幕上，我們想要一個緊湊的佈局：[緊湊型CTA的說明性圖像將進入此處]。簡單的媒體查詢可以實現這一目標，但是嵌套組件會引起問題。例如，如果CTA中的按鈕已經具有全寬功能，則將媒體查詢應用於父重複樣式。

這個問題隨著更複雜的嵌套而升級，導致大量代碼重複和維護頭痛。更改全寬按鈕樣式將需要在多個位置進行更新。需要一個更優雅的解決方案。儘管容器查詢具有潛力，但它們並未完全滿足基於屏幕尺寸動態調整各種組件道具的需求。

本文提出了一種不同的方法：利用組件道具和JavaScript來控制響應式樣式。

跟踪窗口寬度

我們首先跟踪窗口寬度並定義斷點。此示例使用VUE組合：

 // composables/use breakpoints.js
從“ Vue”導入{Readonly，Ref};

const bps = ref（{xs：0，sm：1，md：2，lg：3，xl：4}）;
const current breakpoint = ref（bps.xl）;

導出默認值（）=> {
  const update breakpoint =（）=> {
    const windowwidth = window.innerwidth;
    // ...（原始文章中的斷點邏輯）...
  };

  返回{CurrentRablePoint：ReadOnly（CurrentRablePoint），BPS：READONLY（BPS），UPDATE BRAKERKPOINT};
};

此組合可用於App.vue偵聽調整大小事件：

 // app.vue
從“@/composable/use breakpoints”中導入use breakpoints;
從'vue'導入{on已完成，onunmounted};

導出默認{
  // ...
  設定() {
    const {update breakpoint} = usebreakpoints（）;

    on mounted（（）=> {
      update breakpoint（）;
      window.addeventListener（'resize'，update breakpoint）;
    }）;

    onunmounted（（）=> {
      window.removeeventlistener（'resize'，update breakpoint）;
    }）;
  }
};

（注意：辯論將改善生產環境中的性能。）

響應式樣式

修改了CTA組件以接受displayMode Prop：

 //組件/cta.vue
<template>
  <div :class="`cta ${mode}`">
    <div class="cta-content">
      <h5>標題</h5>
      <p>描述</p>
    </div>
    <btn :block="mode === 'compact'">繼續</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是基於currentBreakpoint確定的：

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

這消除了組件中媒體查詢的需求。

高級功能和可重複性

該方法擴展到更複雜的方案，例如恢復到先前的斷點或在頁面上使用不同的模式。 customMode Prop允許進行每個斷點模式規範：

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

此外，通過提取可重複使用的組合物來管理響應行為和道具驗證，可以顯著改善代碼。 useResponsive和withResponsiveProps ComposableS旨在證明這一點。

結論

此方法為構建響應式組件系統提供了更強大，更可維護的解決方案。通過利用JavaScript和CSS類，它可以最大程度地減少代碼重複，提高一致性，並為處理複雜的響應佈局和嵌套組件提供更大的靈活性。

以上是設計系統中的嵌套組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！