ElLabConfigProvider 全局配置
ElLabConfigProvider（仓库目录 packages/components/config-provider）在子树中注入 grid 默认配置（响应式断点 + 列数 + 可选间距），供 ElFormQuery、ElFormLayout 在未单独传 grid 时继承。名称中的 Lab 用于与 Element Plus 的 ElConfigProvider 区分；请从 element-plus-lab 按需引入，避免与 EP 全局注册混用。
合并规则
- 子组件 props 优先：子级显式传入
grid时完全覆盖 Provider 中的grid（不做字段级合并）。 - 未包裹 Provider：与未传
grid相同，使用内置element-plus网格预设（见GRID_LAYOUT_PRESETS）。 - 紧凑模式：仅作用于
ElFormQuery：当解析后的grid未写colGap/rowGap且compact为true时，间距默认为8px。
基础用法
以下示例通过 Provider 设置两档断点与列数；内部的 ElFormQuery 不写 grid，即可继承。
网格配置结构（EllGridLayoutConfig）
| 字段 | 说明 |
|---|---|
breakpoints | 数组项：name（标识）、min（最小宽度，px）、cols（该档起的列数）。宽度命中规则为：满足 width >= min 的最大一档。 |
colGap / rowGap | 可选，网格行列间距（CSS 长度）；未写时由组件默认（ElFormQuery 下还可被 compact 影响）。 |
固定列数（不随宽度变化）：breakpoints: [{ name: 'all', min: 0, cols: 3 }]。
预设与注册
- 内置预设：
GRID_LAYOUT_PRESETS含element-plus、bootstrap、antd（断点阈值 + 与历史默认一致的列数阶梯）。 - 自定义预设：
registerGridLayoutPreset('my-brand', { breakpoints: [...], colGap })，之后grid="my-brand"或 Provider 上传字符串即可。 - 解析：
resolveGridLayoutInput(预设名 | 配置对象 | undefined)得到规范化后的EllGridLayoutConfig（断点会按min排序）。
组合式 API
| 导出 | 说明 |
|---|---|
useConfigProvider() | ComputedRef<ConfigProviderState | undefined> |
CONFIG_PROVIDER_INJECTION_KEY | 高级场景自行 inject |
API
ElLabConfigProvider Props
| 属性名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| grid | 网格：内置预设名字符串，或完整 EllGridLayoutConfig | EllGridPresetName | EllGridLayoutConfig | - |
Slots
| 插槽名 | 描述 |
|---|---|
| default | 子组件树 |
消费注入的组件
- ElFormQuery、ElFormLayout：读取
grid（props 优先于注入）。
ts
import { ElLabConfigProvider } from 'element-plus-lab'
app.use(ElLabConfigProvider)类型说明
主包导出：
ts
import type {
ConfigProviderState,
EllGridLayoutConfig,
EllGridPresetName,
} from 'element-plus-lab'ConfigProviderState：子树内注入的grid/colGap/rowGap（子组件 props 优先）。EllGridLayoutConfig/EllGridPresetName：网格配置与内置预设名；结构与用法见上文 「网格配置结构」；运行时resolveGridLayoutInput/registerGridLayoutPreset等在@element-plus-lab/utils。
显示类型声明
ts
export interface ConfigProviderState {
grid?: EllGridPresetName | EllGridLayoutConfig
colGap?: number | string
rowGap?: number | string
}
jenemy