Skip to content

FinConfigProvider 全局配置 ​

组件与命名规范:组件名主推 FConfigProvider,别名导出 FinConfigProvider。

FinConfigProvider 为前端全局或局部子树提供统一配置注入,包含字典注册(静态字典与动态懒加载字典 loader)、字典字段名映射规则 (fieldNames)、国际化语言包以及组件库统一默认尺寸等。

下层组件(如 FinDictSelect、FinDictRadio、FinCrudTable 等)可零配置自动响应 FinConfigProvider 注入的上下文。

基础用法 ​

通过包裹 FinConfigProvider 并传入 :config 统一配置对象:

loading

架构原理 ​

FinConfigProvider 借助 Vue3 的 provide / inject 机制(标准 Symbol 为 CONFIG_PROVIDER_KEY)向其所有的深层子孙组件共享响应式配置。

ts
import { FinConfigProvider, type FinConfig } from '@axewo/fin-ui'

const config: FinConfig = {
  dict: {
    // 1. 静态预载字典表 (dictType -> 字典数组)
    data: {
      sys_user_sex: [
        { label: '男', value: '1' },
        { label: '女', value: '2' },
      ],
    },
    // 2. 动态字典异步请求函数
    loader: async (dictType) => {
      const res = await fetch(`/api/dict/get?type=${dictType}`)
      return await res.json()
    },
    // 3. 全局统一的属性名映射
    fieldNames: {
      label: 'dictLabel',
      value: 'dictValue',
    },
  },
  size: 'default',
}

API 说明 ​

ConfigProvider Props ​

属性名类型默认值说明
configFinConfig{}全局统一配置对象

FinConfig 配置结构 ​

属性名类型默认值说明
dictDictConfig-字典功能统一配置项
localeRecord<string, any>-国际化语言包数据
size'large' | 'default' | 'small''default'全局组件统一默认尺寸

DictConfig 详细接口 ​

属性名类型默认值说明
dataRecord<string, any[]>-静态注册的字典映射表(以 dictType 为 key)
loader(dictType: string) => Promise<any[]>-字典异步懒加载函数,当 data 中未发现该类型时自动调用
fieldNamesDictFieldNames{ label: 'label', value: 'value' }统一归一化处理字典节点的属性字段名