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

feat: add parentContext for api modal #1709

pull/1731/head
tangjinzhou 5 years ago
parent
dc454ff943
commit
b8a0195379
4 changed files with 51 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      components/modal/confirm.js
  2. 45
      components/modal/index.en-US.md
  3. 45
      components/modal/index.zh-CN.md
  4. 2
      types/modal.d.ts

4
components/modal/confirm.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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 {

Write Preview
Loading…
Cancel
Save