github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add parentContext for api modal #1709

pull/1731/head
tangjinzhou 2020-01-15 21:03:36 +08:00
parent dc454ff943
commit b8a0195379
4 changed files with 51 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/modal/confirm.js
View File

@ -2,13 +2,14 @@ import Vue from 'vue';
import ConfirmDialog from './ConfirmDialog'; import ConfirmDialog from './ConfirmDialog';
import { destroyFns } from './Modal'; import { destroyFns } from './Modal';
import Base from '../base'; import Base from '../base';
import Omit from 'omit.js';
export default function confirm(config) { export default function confirm(config) {
const div = document.createElement('div'); const div = document.createElement('div');
const el = document.createElement('div'); const el = document.createElement('div');
div.appendChild(el); div.appendChild(el);
document.body.appendChild(div); document.body.appendChild(div);
let currentConfig = { ...config, close, visible: true }; let currentConfig = { ...Omit(config, ['parentContext']), close, visible: true };
let confirmDialogInstance = null; let confirmDialogInstance = null;
const confirmDialogProps = { props: {} }; const confirmDialogProps = { props: {} };
@ -46,6 +47,7 @@ export default function confirm(config) {
const V = Base.Vue || Vue; const V = Base.Vue || Vue;
return new V({ return new V({
el: el, el: el,
parent: config.parentContext,
data() { data() {
return { confirmDialogProps }; return { confirmDialogProps };
}, },

45
components/modal/index.en-US.md
View File

@ -48,28 +48,29 @@ There are five ways to display the information based on the content's nature:
The items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows: The items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows:
| Property | Description | Type | Default | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| autoFocusButton | Specify which button to autofocus | null\|string: `ok` `cancel` | `ok` | | autoFocusButton | Specify which button to autofocus | null\|string: `ok` `cancel` | `ok` | |
| cancelText | Text of the Cancel button | string | `Cancel` | | cancelText | Text of the Cancel button | string | `Cancel` | |
| centered | Centered Modal | Boolean | `false` | | centered | Centered Modal | Boolean | `false` | |
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | `false` | | closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | `false` | |
| class | class of container | string | - | | class | class of container | string | - | |
| content | Content | string\|vNode \|function(h) | - | | content | Content | string\|vNode \|function(h) | - | |
| icon | custom icon (`Added in 1.14.0`) | string\|()=>VNode | `<Icon type="question-circle">` | | icon | custom icon (`Added in 1.14.0`) | string\|()=>VNode | `<Icon type="question-circle">` | |
| iconType | Icon `type` of the Icon component (deperated after `1.14.0`) | string | `question-circle` | | iconType | Icon `type` of the Icon component (deperated after `1.14.0`) | string | `question-circle` | |
| keyboard | Whether support press esc to close | Boolean | true | | keyboard | Whether support press esc to close | Boolean | true | |
| mask | Whether show mask or not. | Boolean | true | | mask | Whether show mask or not. | Boolean | true | |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` | | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` | |
| okText | Text of the OK button | string | `OK` | | okText | Text of the OK button | string | `OK` | |
| okType | Button `type` of the OK button | string | `primary` | | okType | Button `type` of the OK button | string | `primary` | |
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - | | okButtonProps | The ok button props | [ButtonProps](/components/button) | - | |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | | cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | |
| title | Title | string\|vNode \|function(h) | - | | title | Title | string\|vNode \|function(h) | - | |
| width | Width of the modal dialog | string\|number | 416 | | width | Width of the modal dialog | string\|number | 416 | |
| zIndex | The `z-index` of the Modal | Number | 1000 | | zIndex | The `z-index` of the Modal | Number | 1000 | |
| 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 | - | | 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 | - | |
| 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 | - | | 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 | - | |
| 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 |
All the `Modal.method`s will return a reference, and then we can update and close the modal dialog by the reference. All the `Modal.method`s will return a reference, and then we can update and close the modal dialog by the reference.

45
components/modal/index.zh-CN.md
View File

@ -49,28 +49,29 @@
以上均为一个函数，参数为 object，具体属性如下： 以上均为一个函数，参数为 object，具体属性如下：
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| autoFocusButton | 指定自动获得焦点的按钮 | null\|string: `ok` `cancel` | `ok` | | autoFocusButton | 指定自动获得焦点的按钮 | null\|string: `ok` `cancel` | `ok` | |
| cancelText | 取消按钮文字 | string | 取消 | | cancelText | 取消按钮文字 | string | 取消 | |
| centered | 垂直居中展示 Modal | Boolean | `false` | | centered | 垂直居中展示 Modal | Boolean | `false` | |
| closable | 是否显示右上角的关闭按钮 | boolean | `false` | | closable | 是否显示右上角的关闭按钮 | boolean | `false` | |
| class | 容器类名 | string | - | | class | 容器类名 | string | - | |
| content | 内容 | string \|vNode \|function(h) | 无 | | content | 内容 | string \|vNode \|function(h) | 无 | |
| icon | 自定义图标（1.14.0 新增） | string\|()=>VNode | `<Icon type="question-circle">` | | icon | 自定义图标（1.14.0 新增） | string\|()=>VNode | `<Icon type="question-circle">` | |
| iconType | 图标类型（1.14.0 后废弃，请使用 `icon`） | string | `question-circle` | | iconType | 图标类型（1.14.0 后废弃，请使用 `icon`） | string | `question-circle` | |
| mask | 是否展示遮罩 | Boolean | true | | mask | 是否展示遮罩 | Boolean | true | |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | | maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | | keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
| okText | 确认按钮文字 | string | 确定 | | okText | 确认按钮文字 | string | 确定 | |
| okType | 确认按钮类型 | string | primary | | okType | 确认按钮类型 | string | primary | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | | okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | | cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | |
| title | 标题 | string\|vNode \|function(h) | 无 | | title | 标题 | string\|vNode \|function(h) | 无 | |
| width | 宽度 | string\|number | 416 | | width | 宽度 | string\|number | 416 | |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | | zIndex | 设置 Modal 的 `z-index` | Number | 1000 | |
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | | onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | | onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
| parentContext | 弹窗的父级上下文，一般用于获取父级 provider， 如获取 `ConfigProvider` 的配置 | vue instance | - | 1.4.11 |
以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。 以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。

2
types/modal.d.ts vendored
View File

@ -127,6 +127,8 @@ export interface ModalOptions {
* @type Function * @type Function
*/ */
onOk?: () => any; onOk?: () => any;
parentContext: Object;
} }
export interface ModalConfirm { export interface ModalConfirm {