diff --git a/components/modal/ConfirmDialog.jsx b/components/modal/ConfirmDialog.jsx index 32576cef9..9373ddcb5 100644 --- a/components/modal/ConfirmDialog.jsx +++ b/components/modal/ConfirmDialog.jsx @@ -81,8 +81,12 @@ export default {
- {props.title} -
{props.content}
+ + {typeof props.title === 'function' ? props.title(h) : props.title} + +
+ {typeof props.content === 'function' ? props.content(h) : props.content} +
{cancelButton} diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md index 4a1739ddf..dbd560b1f 100644 --- a/components/modal/demo/confirm.md +++ b/components/modal/demo/confirm.md @@ -29,7 +29,7 @@ export default { showConfirm() { this.$confirm({ title: 'Do you Want to delete these items?', - content: 'Some descriptions', + content: h =>
Some descriptions
, onOk() { console.log('OK'); }, diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index 33893ff51..ded1b5604 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -55,7 +55,7 @@ The properties of the object are follows: | centered | Centered Modal | 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 | - | -| content | Content | string\|vNode | - | +| content | Content | string\|vNode \|function(h) | - | | iconType | Icon `type` of the Icon component | string | `question-circle` | | keyboard | Whether support press esc to close | Boolean | true | | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` | @@ -63,7 +63,7 @@ The properties of the object are follows: | okType | Button `type` of the OK button | string | `primary` | | okButtonProps | The ok button props | [ButtonProps](/components/button) | - | | cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | -| title | Title | string\|vNode | - | +| title | Title | string\|vNode \|function(h) | - | | width | Width of the modal dialog | string\|number | 416 | | 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 | - | diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index 616b755be..5bdb56093 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -54,7 +54,7 @@ | centered | 垂直居中展示 Modal | Boolean | `false` | | closable | 是否显示右上角的关闭按钮 | boolean | `false` | | class | 容器类名 | string | - | -| content | 内容 | string\|vNode | 无 | +| content | 内容 | string \|vNode \|function(h) | 无 | | iconType | 图标 Icon 类型 | string | question-circle | | maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | | keyboard | 是否支持键盘esc关闭 | boolean | true | @@ -62,7 +62,7 @@ | okType | 确认按钮类型 | string | primary | | okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | | cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | -| title | 标题 | string\|vNode | 无 | +| title | 标题 | string\|vNode \|function(h) | 无 | | width | 宽度 | string\|number | 416 | | zIndex | 设置 Modal 的 `z-index` | Number | 1000 | | onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 | diff --git a/types/modal.d.ts b/types/modal.d.ts index 68503e132..260e7efd4 100644 --- a/types/modal.d.ts +++ b/types/modal.d.ts @@ -37,9 +37,9 @@ export interface ModalOptions { /** * Modal content - * @type string | VNode + * @type string | VNode | (h) => VNode */ - content?: string | VNode; + content?: any; /** * Icon type of the Icon component @@ -90,9 +90,9 @@ export interface ModalOptions { /** * Title - * @type string | VNode + * @type string | VNode | (h) => VNode */ - title?: string | VNode; + title?: any; /** * Width of the modal dialog