$Modal support render, fixed #1041

Aresn
1 parent dce5a3ea
Showing 4 changed files with 56 additions and 22 deletions Show diff stats
examples/routers/modal.vue
src/components/modal/confirm.js
src/components/modal/index.js
src/styles/components/modal.less
 <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('点击了确定');
                     },
@@ -48,6 +48,35 @@ Modal.newInstance = properties =&gt; {
                 }
             }, 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 =&gt; {
                             }
                         })
                     ]),
-                    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`
@@ -2,18 +2,20 @@ import Modal from &#39;./confirm&#39;;
 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;
@@ -98,6 +98,11 @@
         color: @text-color;
         position: relative;
+        &-render{
+            margin: 0;
+            padding: 0;
+        }
+
         &-icon {
             font-size: 36px;
             position: absolute;