From 3ef24d5fe5046ed3ebbfa607d6df20ad4521bbe7 Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Fri, 2 Jun 2017 10:04:49 +0800
Subject: [PATCH] $Modal support render, fixed #1041

---
 examples/routers/modal.vue       | 17 ++++++++++-
 src/components/modal/confirm.js  | 48 ++++++++++++++++++++------------
 src/components/modal/index.js    |  8 ++++--
 src/styles/components/modal.less |  5 ++++
 4 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 2dd90860..680b5279 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        {{ val }}
         <Button @click="confirm">标准</Button>
         <Button @click="custom">自定义按钮文字</Button>
         <Button @click="async">异步关闭</Button>
@@ -19,7 +20,8 @@
     export default {
         data () {
             return {
-                modal1: false
+                modal1: false,
+                val: ''
             }
         },
         methods: {
@@ -33,6 +35,19 @@
                 this.$Modal.confirm({
                     title: '确认对话框标题',
                     content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
+                    render: (h) => {
+                        return h('Input', {
+                            props: {
+                                value: this.val,
+                                autofocus: true
+                            },
+                            on: {
+                                input: (val) => {
+                                    this.val = val;
+                                }
+                            }
+                        }, '一个按钮')
+                    },
                     onOk: () => {
                         this.$Message.info('点击了确定');
                     },
diff --git a/src/components/modal/confirm.js b/src/components/modal/confirm.js
index 58edf637..31f858c6 100644
--- a/src/components/modal/confirm.js
+++ b/src/components/modal/confirm.js
@@ -48,6 +48,35 @@ Modal.newInstance = properties => {
                 }
             }, this.localeOkText));
 
+            // render content
+            let body_render;
+            if (this.render) {
+                body_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-body ${prefixCls}-body-render`
+                    }
+                }, [this.render(h)]);
+            } else {
+                body_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-body`
+                    }
+                }, [
+                    h('div', {
+                        class: this.iconTypeCls
+                    }, [
+                        h('i', {
+                            class: this.iconNameCls
+                        })
+                    ]),
+                    h('div', {
+                        domProps: {
+                            innerHTML: this.body
+                        }
+                    })
+                ]);
+            }
+
             return h(Modal, {
                 props: Object.assign({}, _props, {
                     width: this.width,
@@ -81,24 +110,7 @@ Modal.newInstance = properties => {
                             }
                         })
                     ]),
-                    h('div', {
-                        attrs: {
-                            class: `${prefixCls}-body`
-                        }
-                    }, [
-                        h('div', {
-                            class: this.iconTypeCls
-                        }, [
-                            h('i', {
-                                class: this.iconNameCls
-                            })
-                        ]),
-                        h('div', {
-                            domProps: {
-                                innerHTML: this.body
-                            }
-                        })
-                    ]),
+                    body_render,
                     h('div', {
                         attrs: {
                             class: `${prefixCls}-footer`
diff --git a/src/components/modal/index.js b/src/components/modal/index.js
index a817fdfd..9fc4c809 100644
--- a/src/components/modal/index.js
+++ b/src/components/modal/index.js
@@ -2,18 +2,20 @@ import Modal from './confirm';
 
 let modalInstance;
 
-function getModalInstance () {
+function getModalInstance (render = undefined) {
     modalInstance = modalInstance || Modal.newInstance({
         closable: false,
         maskClosable: false,
-        footerHide: true
+        footerHide: true,
+        render: render
     });
 
     return modalInstance;
 }
 
 function confirm (options) {
-    let instance  = getModalInstance();
+    const render = ('render' in options) ? options.render : undefined;
+    let instance  = getModalInstance(render);
 
     options.onRemove = function () {
         modalInstance = null;
diff --git a/src/styles/components/modal.less b/src/styles/components/modal.less
index 6728b3c6..c68e0a11 100644
--- a/src/styles/components/modal.less
+++ b/src/styles/components/modal.less
@@ -98,6 +98,11 @@
         color: @text-color;
         position: relative;
 
+        &-render{
+            margin: 0;
+            padding: 0;
+        }
+
         &-icon {
             font-size: 36px;
             position: absolute;