<form-dialog>使用函数式改写

示例-样式页修改

vue/src/components/FormDialog/index.vue

@@ -1,18 +1,44 @@
-<template>
+<script type="text/jsx">
+    import LoadingMask from '@/components/LoadingMask'
+
+    export default {
+        name: "FormDialog",
+
+        functional: true,
+
+        props: {
+            value: Boolean,
+            title: String,
+            loading: {type: Boolean, default: true},
+            top: {type: String, default: '50px'},
+            width: {type: String, default: '30%'}
+        },
+
+        render(h, context) {
+            const {value, title, loading, top, width} = context.props
+            const l = context.listeners
+
+            function onClose() {
+                l.input && l.input(false)
+            }
+
+            return (
                 <el-dialog
                     v-drag-dialog
-            v-bind="$props"
-            v-on="$listeners"
-            :visible="value"
+                    visible={value}
                     custom-class="form-dialog"
+                    top={top}
+                    width={width}
+                    on-close={onClose}
+                    {...context.data}
                 >
-        <slot slot="title" name="title">{{title}}</slot>
+                    <slot slot="title" name="title">{title}</slot>
 
                     <div class="form-dialog-container">
-            <loading-mask :show="loading"/>
+                        <LoadingMask show={loading}/>
                         <el-scrollbar>
                             <div class="form-dialog-body">
-                    <slot/>
+                                {context.children}
                             </div>
                             <div style="margin-bottom: 17px"/>
                         </el-scrollbar>
@@ -20,55 +46,9 @@
 
                     <slot slot="footer" name="footer"/>
                 </el-dialog>
-</template>
-
-<script>
-    import LoadingMask from '@/components/LoadingMask'
-
-    export default {
-        name: "FormDialog",
-
-        components: {LoadingMask},
-
-        props: {
-            value: Boolean,
-            appendToBody: Boolean,
-            top: {type: String, default: '50px'},
-            width: {type: String, default: '30%'},
-            loading: {type: Boolean, default: true},
-            title: String,
+            )
         }
     }
 </script>
 
-<style lang="scss">
-    .form-dialog {
-        .el-dialog__body {
-            padding: 0;
-        }
-
-        .form-dialog-container {
-            position: relative;
-            width: 100%;
-
-            .form-dialog-body {
-                padding: 24px 24px 0
-            }
-
-            .el-form {
-                padding: 0;
-            }
-
-            .el-upload.el-upload--picture-card {
-                height: 100px;
-                width: 100px;
-                line-height: 105px;
-            }
-
-            .el-upload-list .el-upload-list__item {
-                height: 100px;
-                width: 100px;
-            }
-        }
-    }
-</style>
+<style lang="scss" src="./style.scss"></style>

vue/src/components/FormDialog/style.scss

@@ -0,0 +1,29 @@
+.form-dialog {
+    .el-dialog__body {
+        padding: 0;
+    }
+
+    .form-dialog-container {
+        position: relative;
+        width: 100%;
+
+        .form-dialog-body {
+            padding: 24px 24px 0
+        }
+
+        .el-form {
+            padding: 0;
+        }
+
+        .el-upload.el-upload--picture-card {
+            height: 100px;
+            width: 100px;
+            line-height: 105px;
+        }
+
+        .el-upload-list .el-upload-list__item {
+            height: 100px;
+            width: 100px;
+        }
+    }
+}

vue/src/views/example/stylePage.vue

@@ -23,13 +23,13 @@
                 </div>
             </el-row>
             <el-row>
-                <el-button size="small" @click="dialog=true">默认按钮（点击打开dialog）</el-button>
+                <el-button size="small" @click="dialog=true">默认按钮（点击打开dialog</el-button>
                 <el-button size="small" plain type="dashed">dashed按钮</el-button>
                 <el-button size="small" type="primary">主要按钮</el-button>
-                <el-button size="small" type="success">成功按钮</el-button>
-                <el-button size="small" type="info">信息按钮</el-button>
-                <el-button size="small" type="warning">警告按钮</el-button>
-                <el-button size="small" type="danger">危险按钮</el-button>
+                <el-button size="small" type="success" @click="$message.success('成功消息')">成功按钮</el-button>
+                <el-button size="small" type="info" @click="$message.info('信息消息')">信息按钮</el-button>
+                <el-button size="small" type="warning" @click="$message.warning('警告消息')">警告按钮</el-button>
+                <el-button size="small" type="danger" @click="$message.error('错误消息')">危险按钮</el-button>
             </el-row>
             <el-row class="table-container">
                 <liner-progress show/>
@@ -40,13 +40,6 @@
                     <el-table-column label="年龄" prop="age"/>
                 </abstract-table>
             </el-row>
-            <el-row style="min-height: 50px">
-                <el-tree
-                        :data="treeData"
-                        :expand-on-click-node="false"
-                        highlight-current
-                />
-            </el-row>
         </el-card>
 
         <form-dialog v-model="dialog" :loading="false" title="封装的dialog">
@@ -76,12 +69,6 @@
                     {name: '老王', address: '中国', tel: '13232423232', age: 18},
                     {name: '老王', address: '中国', tel: '13232423232', age: 18},
                     {name: '老王', address: '中国', tel: '13232423232', age: 18}
-                ],
-                treeData: [
-                    {
-                        id: 1, label: '测试',
-                        children: [{id: 2, label: '测试1'}, {id: 3, label: '测试2'}]
-                    }
                 ]
             }
         },
@@ -91,9 +78,8 @@
                 setTimeout(() => {
                     this.$notify({
                         title: type,
-                        message: '不会自动关闭',
-                        type,
-                        duration: 0
+                        message: '提示信息',
+                        type
                     })
                 }, time)
             }