Appearance
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
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
config | FinConfig | {} | 全局统一配置对象 |
FinConfig 配置结构
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
dict | DictConfig | - | 字典功能统一配置项 |
locale | Record<string, any> | - | 国际化语言包数据 |
size | 'large' | 'default' | 'small' | 'default' | 全局组件统一默认尺寸 |
DictConfig 详细接口
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data | Record<string, any[]> | - | 静态注册的字典映射表(以 dictType 为 key) |
loader | (dictType: string) => Promise<any[]> | - | 字典异步懒加载函数,当 data 中未发现该类型时自动调用 |
fieldNames | DictFieldNames | { label: 'label', value: 'value' } | 统一归一化处理字典节点的属性字段名 |