Appearance
AtConfigProvider
夏源庆
最后更新于 2026-04-23 19:53:53
一个"一统江湖"的全局配置组件,让你的应用配置不再"各自为政"。
Tip
建议在应用的根组件中使用,这样所有子组件都能享受到这份"福利"。
当前影响范围
AtConfigProvider 目前主要为这几类组件提供全局兜底配置:
| 配置项 | 影响组件 | 作用 |
|---|---|---|
table.pagerKeys / table.sorterKeys / table.empty | AtTable | 统一分页字段、排序字段和空状态组件 |
modal.contentCls / modal.maskClosable | AtModal | 统一弹窗内容区 class 和遮罩点击行为 |
is-dark | AtMonacoEditor、AtMonacoDiffEditor | 切换 Monaco 编辑器主题为 vs / vs-dark |
这意味着它更像“组件库运行时配置中心”,而不是一个简单的视觉主题壳。
代码演示
数据表格的全局配置
模态框的全局配置
API
AtConfigProvider Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| is-dark | boolean | false | 是否为暗色主题,Monaco 系组件会据此切换编辑器主题 | |
| table | table Properties | 见下方说明 | 表格全局配置 | |
| modal | modal Properties | undefined | 模态框全局配置 | v0.12.29 |
table Properties
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| pager-keys | PagerKeys | 见下方说明 | 分页参数配置 | |
| sorter-keys | SorterKeys | 见下方说明 | 排序参数配置 | |
| empty | Component | undefined | 空状态组件 |
PagerKeys
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| page | string | 'page' | 页码参数名 | |
| page-size | string | 'size' | 每页条数参数名 | |
| total | string | 'meta.total' | 总数数据路径 | |
| list | string | 'data' | 列表数据路径 |
SorterKeys
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| field | object | { orderField: 'isAsc', sortField: 'orderByColumn' } | 排序字段配置 | |
| order | object | { ascend: 'asc', descend: 'desc' } | 排序方向配置 |
modal Properties
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| content-cls | string | undefined | 内容区样式 | v0.12.29 |
| mask-closable | boolean | undefined | 点击遮罩时是否发出 update:show 事件 | v0.12.29 |
table 默认值
typescript
{
pagerKeys: {
page: 'page',
pageSize: 'size',
total: 'meta.total',
list: 'data',
},
sorterKeys: {
field: { orderField: 'isAsc', sortField: 'orderByColumn' },
order: { ascend: 'asc', descend: 'desc' },
},
}