Skip to content

Commit 90f273a

Browse files
committed
doc: update doc
1 parent 456c353 commit 90f273a

File tree

4 files changed

+82
-7
lines changed

4 files changed

+82
-7
lines changed

components/config-provider/index.en-US.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,26 @@ Some components use dynamic style to support wave effect. You can config `csp` p
5656
| pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { ghost:boolean } | 'true' | 1.5.0 |
5757
| transformCellText | Table data can be changed again before rendering. The default configuration of general user empty data. | Function({ text, column, record, index }) => any | - | 1.5.4 | |
5858

59+
### ConfigProvider.config() `3.0.0+`
60+
61+
Setting `Modal``Message``Notification` rootPrefixCls.
62+
63+
```jsx
64+
ConfigProvider.config({
65+
prefixCls: 'ant',
66+
});
67+
```
68+
69+
or
70+
71+
```jsx
72+
// some cinfig support reactively, you can change prefixCls.value = 'other'
73+
const prefixCls = ref('ant');
74+
ConfigProvider.config({
75+
prefixCls,
76+
});
77+
```
78+
5979
## FAQ
6080

6181
#### Does the locale problem still exist in DatePicker even if ConfigProvider `locale` is used?

components/config-provider/index.zh-CN.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,29 @@ ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provi
5454
| getPopupContainer | 弹出框(Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。 | Function(triggerNode, dialogContext) | () => document.body | |
5555
| locale | 语言包配置,语言包可到 [ant-design-vue/es/locale](http://unpkg.com/ant-design-vue/es/locale/) 目录下寻找 | object | - | 1.5.0 |
5656
| pageHeader | 统一设置 pageHeader 的 ghost,参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | 1.5.0 |
57+
| prefixCls | 设置统一样式前缀。注意:需要配合 `less` 变量 `@ant-prefix` 使用 | string | `ant` | |
5758
| transformCellText | Table 数据渲染前可以再次改变,一般用户空数据的默认配置 | Function({ text, column, record, index }) => any | - | 1.5.4 | |
5859

60+
### ConfigProvider.config() `3.0.0+`
61+
62+
设置 `Modal``Message``Notification` rootPrefixCls。
63+
64+
```jsx
65+
ConfigProvider.config({
66+
prefixCls: 'ant',
67+
});
68+
```
69+
70+
or
71+
72+
```jsx
73+
// 如下配置支持响应式数据,你可以通过 prefixCls.value = 'other' 直接改变
74+
const prefixCls = ref('ant');
75+
ConfigProvider.config({
76+
prefixCls,
77+
});
78+
```
79+
5980
## FAQ
6081

6182
#### 为什么我使用了 ConfigProvider `locale`,时间类组件的国际化还有问题?

components/modal/index.en-US.md

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ Modal dialogs.
99

1010
## When To Use
1111

12-
When requiring users to interact with the application, but without jumping to a new page and interrupting
13-
the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user
14-
feedback or display information.
15-
Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`,
16-
and so on.
12+
When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information. Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`, and so on.
1713

1814
## API
1915

@@ -89,7 +85,7 @@ The items listed above are all functions, expecting a settings object as paramet
8985
| zIndex | The `z-index` of the Modal | Number | 1000 | |
9086
| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - | |
9187
| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - | |
92-
| parentContext | The parent context of the popup is generally used to get the parent provider, such as the configuration of `ConfigProvider` | vue instance | - | |
88+
| appContext | The context of the pop-up window is generally used to obtain content such as global registered components, vuex, etc. | - | - | |
9389

9490
All the `Modal.method`s will return a reference, and then we can update and close the modal dialog by the reference.
9591

@@ -116,3 +112,22 @@ router.beforeEach((to, from, next) => {
116112
Modal.destroyAll();
117113
})
118114
```
115+
116+
## FAQ
117+
118+
### Why can't the Modal method obtain global registered components, context, vuex, etc. and ConfigProvider `locale/prefixCls` configuration, and can't update data responsively?
119+
120+
Call the Modal method directly, and the component will dynamically create a new Vue entity through `Vue.render`. Its context is not the same as the context where the current code is located, so the context information cannot be obtained.
121+
122+
When you need context information (for example, using a globally registered component), you can pass the current component context through the `appContext` property. When you need to keep the property responsive, you can use the function to return:
123+
124+
```tsx
125+
import { getCurrentInstance } from 'vue';
126+
127+
const appContext = getCurrentInstance().appContext;
128+
const title = ref('some message');
129+
Modal.confirm({
130+
title: () => title.value, // the change of title will update the title in confirm synchronously
131+
appContext,
132+
});
133+
```

components/modal/index.zh-CN.md

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
8989
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | |
9090
| onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function || |
9191
| onOk | 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function || |
92-
| parentContext | 弹窗的父级上下文,一般用于获取父级 provider, 如获取 `ConfigProvider` 的配置 | vue instance | - | |
92+
| appContext | 弹窗的上下文,一般用于获取全局注册组件、vuex 等内容 | - | - | |
9393

9494
以上函数调用后,会返回一个引用,可以通过该引用更新和关闭弹窗。
9595

@@ -116,3 +116,22 @@ router.beforeEach((to, from, next) => {
116116
Modal.destroyAll();
117117
})
118118
```
119+
120+
## FAQ
121+
122+
### 为什么 Modal 方法不能获取 全局注册组件、context、vuex 等内容和 ConfigProvider `locale/prefixCls` 配置, 以及不能响应式更新数据 ?
123+
124+
直接调用 Modal 方法,组件会通过 `Vue.render` 动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同,因而无法获取 context 信息。
125+
126+
当你需要 context 信息(例如使用全局注册的组件)时,可以通过 `appContext` 属性传递当前组件 context, 当你需要保留属性响应式时,你可以使用函数返回:
127+
128+
```tsx
129+
import { getCurrentInstance } from 'vue';
130+
131+
const appContext = getCurrentInstance().appContext;
132+
const title = ref('some message');
133+
Modal.confirm({
134+
title: () => title.value, // 此时 title 的改变,会同步更新 confirm 中的 title
135+
appContext,
136+
});
137+
```

0 commit comments

Comments
 (0)