设计系统中的嵌套组件

建造可重复使用的响应式前端组件，尤其是具有嵌套结构的组件，提出了重大挑战。本文探讨了一种避免过多的媒体查询和重复样式的陷阱的解决方案。

考虑一个简单的呼吁行动（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 id="标题">标题</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中文网其他相关文章！