update $Modal with render

梁灏
1 parent f4273043
Showing 2 changed files with 56 additions and 54 deletions Show diff stats
examples/routers/modal.vue
src/components/modal/confirm.js
 <template>
     <div>
-        <Button @click="instance('info')">Info</Button>
-        <Button @click="instance('success')">Success</Button>
-        <Button @click="instance('warning')">Warning</Button>
-        <Button @click="instance('error')">Error</Button>
+        <p>
+            Name: {{ value }}
+    </p>
+        <p>
+            <Button @click="handleRender">Custom content</Button>
+        </p>
     </div>
 </template>
 <script>
     export default {
+        data () {
+            return {
+                value: ''
+            }
+        },
         methods: {
-            instance (type) {
-                const title = '对话框的标题';
-                const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
-                switch (type) {
-                    case 'info':
-                        this.$Modal.info({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'success':
-                        this.$Modal.success({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'warning':
-                        this.$Modal.warning({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'error':
-                        this.$Modal.error({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                }
+            handleRender () {
+                this.$Modal.confirm({
+                    title: '真不错呀',
+                    render: (h) => {
+                        return h('Input', {
+                            props: {
+                                value: this.value,
+                                autofocus: true,
+                                placeholder: 'Please enter your name...'
+                            },
+                            on: {
+                                input: (val) => {
+                                    this.value = val;
+                                }
+                            }
+                        })
+                    }
+                })
             }
         }
     }
@@ -71,6 +71,32 @@ Modal.newInstance = properties =&gt; {
                 ]);
             }
+            // when render with no title, hide head
+            let head_render;
+            if (this.title) {
+                head_render = h('div', {
+                    attrs: {
+                        class: `${prefixCls}-head`
+                    }
+                }, [
+                    h('div', {
+                        class: this.iconTypeCls
+                    }, [
+                        h('i', {
+                            class: this.iconNameCls
+                        })
+                    ]),
+                    h('div', {
+                        attrs: {
+                            class: `${prefixCls}-head-title`
+                        },
+                        domProps: {
+                            innerHTML: this.title
+                        }
+                    })
+                ]);
+            }
+
             return h(Modal, {
                 props: Object.assign({}, _props, {
                     width: this.width,
@@ -91,27 +117,7 @@ Modal.newInstance = properties =&gt; {
                         class: prefixCls
                     }
                 }, [
-                    h('div', {
-                        attrs: {
-                            class: `${prefixCls}-head`
-                        }
-                    }, [
-                        h('div', {
-                            class: this.iconTypeCls
-                        }, [
-                            h('i', {
-                                class: this.iconNameCls
-                            })
-                        ]),
-                        h('div', {
-                            attrs: {
-                                class: `${prefixCls}-head-title`
-                            },
-                            domProps: {
-                                innerHTML: this.title
-                            }
-                        })
-                    ]),
+                    head_render,
                     body_render,
                     h('div', {
                         attrs: {