Skip to content

Commit b8a0195

Browse files
tangjinzhoutangjinzhou
committed
feat: add parentContext for api modal #1709 
1 parent dc454ff commit b8a0195

File tree

4 files changed

+51
-45
lines changed

4 files changed

+51
-45
lines changed

‎components/modal/confirm.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@ import Vue from 'vue';
22
import ConfirmDialog from './ConfirmDialog';
33
import { destroyFns } from './Modal';
44
import Base from '../base';
5+
import Omit from 'omit.js';
56

67
export default function confirm(config) {
78
const div = document.createElement('div');
89
const el = document.createElement('div');
910
div.appendChild(el);
1011
document.body.appendChild(div);
11-
let currentConfig = { ...config, close, visible: true };
12+
let currentConfig = { ...Omit(config, ['parentContext']), close, visible: true };
1213

1314
let confirmDialogInstance = null;
1415
const confirmDialogProps = { props: {} };
@@ -46,6 +47,7 @@ export default function confirm(config) {
4647
const V = Base.Vue || Vue;
4748
return new V({
4849
el: el,
50+
parent: config.parentContext,
4951
data() {
5052
return { confirmDialogProps };
5153
},

‎components/modal/index.en-US.md

+23-22
Original file line numberDiff line numberDiff line change
@@ -48,28 +48,29 @@ There are five ways to display the information based on the content's nature:
4848

4949
The items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows:
5050

51-
| Property | Description | Type | Default |
52-
| --- | --- | --- | --- |
53-
| autoFocusButton | Specify which button to autofocus | null\|string: `ok` `cancel` | `ok` |
54-
| cancelText | Text of the Cancel button | string | `Cancel` |
55-
| centered | Centered Modal | Boolean | `false` |
56-
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | `false` |
57-
| class | class of container | string | - |
58-
| content | Content | string\|vNode \|function(h) | - |
59-
| icon | custom icon (`Added in 1.14.0`) | string\|()=>VNode | `<Icon type="question-circle">` |
60-
| iconType | Icon `type` of the Icon component (deperated after `1.14.0`) | string | `question-circle` |
61-
| keyboard | Whether support press esc to close | Boolean | true |
62-
| mask | Whether show mask or not. | Boolean | true |
63-
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |
64-
| okText | Text of the OK button | string | `OK` |
65-
| okType | Button `type` of the OK button | string | `primary` |
66-
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - |
67-
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - |
68-
| title | Title | string\|vNode \|function(h) | - |
69-
| width | Width of the modal dialog | string\|number | 416 |
70-
| zIndex | The `z-index` of the Modal | Number | 1000 |
71-
| 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 | - |
72-
| 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 | - |
51+
| Property | Description | Type | Default | Version |
52+
| --- | --- | --- | --- | --- |
53+
| autoFocusButton | Specify which button to autofocus | null\|string: `ok` `cancel` | `ok` | |
54+
| cancelText | Text of the Cancel button | string | `Cancel` | |
55+
| centered | Centered Modal | Boolean | `false` | |
56+
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | `false` | |
57+
| class | class of container | string | - | |
58+
| content | Content | string\|vNode \|function(h) | - | |
59+
| icon | custom icon (`Added in 1.14.0`) | string\|()=>VNode | `<Icon type="question-circle">` | |
60+
| iconType | Icon `type` of the Icon component (deperated after `1.14.0`) | string | `question-circle` | |
61+
| keyboard | Whether support press esc to close | Boolean | true | |
62+
| mask | Whether show mask or not. | Boolean | true | |
63+
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` | |
64+
| okText | Text of the OK button | string | `OK` | |
65+
| okType | Button `type` of the OK button | string | `primary` | |
66+
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - | |
67+
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | |
68+
| title | Title | string\|vNode \|function(h) | - | |
69+
| width | Width of the modal dialog | string\|number | 416 | |
70+
| zIndex | The `z-index` of the Modal | Number | 1000 | |
71+
| 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 | - | |
72+
| 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 | - | |
73+
| parentContext | The parent context of the popup is generally used to get the parent provider, such as the configuration of `ConfigProvider` | vue instance | - | 1.4.11 |
7374

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

‎components/modal/index.zh-CN.md

+23-22
Original file line numberDiff line numberDiff line change
@@ -49,28 +49,29 @@
4949

5050
以上均为一个函数，参数为 object，具体属性如下：
5151

52-
| 参数 | 说明 | 类型 | 默认值 |
53-
| --- | --- | --- | --- |
54-
| autoFocusButton | 指定自动获得焦点的按钮 | null\|string: `ok` `cancel` | `ok` |
55-
| cancelText | 取消按钮文字 | string | 取消 |
56-
| centered | 垂直居中展示 Modal | Boolean | `false` |
57-
| closable | 是否显示右上角的关闭按钮 | boolean | `false` |
58-
| class | 容器类名 | string | - |
59-
| content | 内容 | string \|vNode \|function(h) | 无 |
60-
| icon | 自定义图标（1.14.0 新增） | string\|()=>VNode | `<Icon type="question-circle">` |
61-
| iconType | 图标类型（1.14.0 后废弃，请使用 `icon`） | string | `question-circle` |
62-
| mask | 是否展示遮罩 | Boolean | true |
63-
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
64-
| keyboard | 是否支持键盘 esc 关闭 | boolean | true |
65-
| okText | 确认按钮文字 | string | 确定 |
66-
| okType | 确认按钮类型 | string | primary |
67-
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - |
68-
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - |
69-
| title | 标题 | string\|vNode \|function(h) | 无 |
70-
| width | 宽度 | string\|number | 416 |
71-
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
72-
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
73-
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
52+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
53+
| --- | --- | --- | --- | --- |
54+
| autoFocusButton | 指定自动获得焦点的按钮 | null\|string: `ok` `cancel` | `ok` | |
55+
| cancelText | 取消按钮文字 | string | 取消 | |
56+
| centered | 垂直居中展示 Modal | Boolean | `false` | |
57+
| closable | 是否显示右上角的关闭按钮 | boolean | `false` | |
58+
| class | 容器类名 | string | - | |
59+
| content | 内容 | string \|vNode \|function(h) | 无 | |
60+
| icon | 自定义图标（1.14.0 新增） | string\|()=>VNode | `<Icon type="question-circle">` | |
61+
| iconType | 图标类型（1.14.0 后废弃，请使用 `icon`） | string | `question-circle` | |
62+
| mask | 是否展示遮罩 | Boolean | true | |
63+
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | |
64+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
65+
| okText | 确认按钮文字 | string | 确定 | |
66+
| okType | 确认按钮类型 | string | primary | |
67+
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | |
68+
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | |
69+
| title | 标题 | string\|vNode \|function(h) | 无 | |
70+
| width | 宽度 | string\|number | 416 | |
71+
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | |
72+
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
73+
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
74+
| parentContext | 弹窗的父级上下文，一般用于获取父级 provider， 如获取 `ConfigProvider` 的配置 | vue instance | - | 1.4.11 |
7475

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

‎types/modal.d.ts

+2
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,8 @@ export interface ModalOptions {
127127
* @type Function
128128
*/
129129
onOk?: () => any;
130+
131+
parentContext: Object;
130132
}
131133

132134
export interface ModalConfirm {

0 commit comments

Comments
 (0)