UseElConfigProvider - 全局配置

组件介绍

UseElConfigProvider 是基于 Element Plus 的 ElConfigProvider 二次封装的全局配置组件，专注于统一管理 Element Plus 和 iVue 组件库的语言、字典、表格、上传等全局配置项，通过 provide/inject 机制实现配置的全局分发，完整兼容原生 ElConfigProvider 核心能力，可作为项目全局配置入口，大幅降低多组件间配置同步的开发成本。

核心能力

多维度全局配置统一管理

集中管理语言、字典、表格配置、上传配置等核心配置项，通过 provide/inject 机制实现全局分发，所有关联组件（如 UseCrud、UseElTable、UseElForm、UseElUpload）可统一读取配置，避免零散配置导致的不一致问题。

灵活的语言切换能力

内置中文（zh）、英文（en）两种核心语言配置，通过 language 属性快速切换 Element Plus 组件 locale，支持空值兼容，可无缝对接业务侧多语言体系，仅对 Element Plus 组件生效，不影响业务自定义文案。

配置优先级精准管控

所有配置项遵循「局部配置 > 全局配置 > 默认值」优先级规则，组件内注入的局部配置（extConfig）优先覆盖全局配置，未配置时自动兜底默认值（如表格页面底部偏移默认 20、弹窗底部偏移默认 92、字典属性默认 value/label/children），兼顾全局统一与局部灵活调整。

扩展配置标准化

通过 ExtConfig 接口标准化字典、表格、上传等扩展项，提供 defaultExtConfig 全局默认扩展配置，业务侧可通过 extConfig 属性灵活覆盖，保证项目内配置规范统一，同时支持表格高度相关配置（pageHeight/modalHeight）的精细化调整。

原生组件完全兼容

基于 ElConfigProvider 封装，仅扩展全局配置能力，完整保留原生 locale 等核心属性，插槽完全透传，可直接替换原生 ElConfigProvider 使用，无迁移成本，同时补充原生组件缺失的全局配置分发能力。

表格配置专属适配

针对 UseElTable/UseCrud 组件提供专属表格配置项，支持全局配置表格页面底部预留偏移（pageBottomOffset）、表格弹窗底部预留偏移（modalBottomOffset），以及表格页面高度（pageHeight）、弹窗高度（modalHeight），无需在每个组件内重复声明，减少重复代码；其中 pageHeight/modalHeight 显式设置时会禁用表格自适应高度，未设置时默认启用自适应。

字典属性全局统一

全局配置字典属性（dictProps），默认采用 value/label/children 作为字典键名，业务侧可通过 extConfig 覆盖默认配置，所有依赖字典渲染的组件可统一读取，避免不同组件字典属性不一致的问题。

使用

重要说明：

若您正在使用iVue组件库，建议直接在项目App.vue中使用该组件，统一、优雅解决 ElementPlus 和 iVue 组件库全局配置;

切换语言（国际化）目前仅支持ElementPlus组件的语言切换，不支持业务代码的语言切换，且仅支持中文(zh)/英文(en)语言切换；

切换主题根据当前项目的主题配置进行动态切换，仅支持深色(dark)/浅色(light)主题切换；

所有全局配置项均遵循【局部配置>全局配置】原则;

vue

<!-- App.vue -->
<UseElConfigProvider
  :extConfig="{
    dictProps: { label: 'dictValue', value: 'dictKey' }
  }"
>
  <RouterView />
</UseElConfigProvider>

Props

import type { PropType } from 'vue'
import type { ExtConfig } from './types'

/**
 * 组件props
 */
export default {
  /**
   * 语言 默认zh，仅对ElementPlus组件有效
   */
  language: {
    type: String,
    default: 'zh',
    validator: (val: string) => ['', 'zh', 'en'].includes(val)
  },
  /**
   * 扩展配置 如【字典属性、表格、上传】等
   */
  extConfig: {
    type: Object as PropType<ExtConfig>,
    default: () => ({})
  }
}

Types

import type { ExtractPropTypes } from 'vue'
import componentProps from './props'
import type { DictProps, UploadConfig } from '@/types'

/**
 * props类型
 */
export type Props = ExtractPropTypes<typeof componentProps>

/**
 * extConfig接口
 */
export interface ExtConfig {
  /** 字典属性配置项 */
  dictProps?: DictProps
  /** crud配置项 */
  crud?: {
    /** crud表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
    pageHeight?: string
    /** crud表格弹窗高度 extConfig.mode.type='MODAL'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
    modalHeight?: string
  }
  /** 表格配置项 */
  table?: {
    /** 表格页面高度 extConfig.mode.type='PAGE'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
    pageHeight?: string
    /** 表格弹窗高度 extConfig.mode.type='MODAL'时生效，显式设置则表格自适应高度不生效，否则默认使用表格自适应高度 */
    modalHeight?: string
    /** 表格页面底部预留偏移 */
    pageBottomOffset?: number
    /** 表格弹窗底部预留偏移 */
    modalBottomOffset?: number
  }
  /** 上传配置项 */
  upload?: UploadConfig
}

DefaultExtConfig

import type { ExtConfig } from './types'

/**
 * 默认扩展配置
 */
export default {
  dictProps: { value: 'value', label: 'label', children: 'children' },
  table: { pageBottomOffset: 20, modalBottomOffset: 92 }
} satisfies ExtConfig

UseElConfigProvider - 全局配置 ​

组件介绍 ​

核心能力 ​

使用 ​

Props ​

Types ​

DefaultExtConfig ​

UseElConfigProvider - 全局配置

组件介绍

核心能力

使用

Props

Types

DefaultExtConfig