feat: modal.confirm content ant title support function #824

vueComponent · Aug 7, 2019 · 6d1a385 · 6d1a385
1 parent f5d1fa6
commit 6d1a385
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 11 deletions.
diff --git a/components/modal/ConfirmDialog.jsx b/components/modal/ConfirmDialog.jsx
@@ -81,8 +81,12 @@ export default {
         <div class={`${contentPrefixCls}-body-wrapper`}>
           <div class={`${contentPrefixCls}-body`}>
             <Icon type={iconType} />
-            <span class={`${contentPrefixCls}-title`}>{props.title}</span>
-            <div class={`${contentPrefixCls}-content`}>{props.content}</div>
+            <span class={`${contentPrefixCls}-title`}>
+              {typeof props.title === 'function' ? props.title(h) : props.title}
+            </span>
+            <div class={`${contentPrefixCls}-content`}>
+              {typeof props.content === 'function' ? props.content(h) : props.content}
+            </div>
           </div>
           <div class={`${contentPrefixCls}-btns`}>
             {cancelButton}

diff --git 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 => <div style="color:red;">Some descriptions</div>,
         onOk() {
           console.log('OK');
         },

diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
@@ -55,15 +55,15 @@ 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` |
 | okText | Text of the OK button | string | `OK` |
 | 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
@@ -54,15 +54,15 @@
 | 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 |
 | okText | 确认按钮文字 | string | 确定 |
 | 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
@@ -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