From 0e9633ad0217999402d877d14c43671262c0b824 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Mon, 27 Jul 2020 13:02:12 +0800
Subject: [PATCH] =?UTF-8?q?<form-dialog>=E4=BD=BF=E7=94=A8=E5=87=BD?=
 =?UTF-8?q?=E6=95=B0=E5=BC=8F=E6=94=B9=E5=86=99=20=E7=A4=BA=E4=BE=8B-?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=A1=B5=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/components/FormDialog/index.vue  | 98 ++++++++++--------------
 vue/src/components/FormDialog/style.scss | 29 +++++++
 vue/src/views/example/stylePage.vue      | 28 ++-----
 3 files changed, 75 insertions(+), 80 deletions(-)
 create mode 100644 vue/src/components/FormDialog/style.scss

diff --git a/vue/src/components/FormDialog/index.vue b/vue/src/components/FormDialog/index.vue
index 089853e..ae11a7e 100644
--- a/vue/src/components/FormDialog/index.vue
+++ b/vue/src/components/FormDialog/index.vue
@@ -1,74 +1,54 @@
-<template>
-    <el-dialog
-            v-drag-dialog
-            v-bind="$props"
-            v-on="$listeners"
-            :visible="value"
-            custom-class="form-dialog"
-    >
-        <slot slot="title" name="title">{{title}}</slot>
-
-        <div class="form-dialog-container">
-            <loading-mask :show="loading"/>
-            <el-scrollbar>
-                <div class="form-dialog-body">
-                    <slot/>
-                </div>
-                <div style="margin-bottom: 17px"/>
-            </el-scrollbar>
-        </div>
-
-        <slot slot="footer" name="footer"/>
-    </el-dialog>
-</template>
-
-<script>
+<script type="text/jsx">
     import LoadingMask from '@/components/LoadingMask'
 
     export default {
         name: "FormDialog",
 
-        components: {LoadingMask},
+        functional: true,
 
         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;
-        }
+            loading: {type: Boolean, default: true},
+            top: {type: String, default: '50px'},
+            width: {type: String, default: '30%'}
+        },
 
-        .form-dialog-container {
-            position: relative;
-            width: 100%;
+        render(h, context) {
+            const {value, title, loading, top, width} = context.props
+            const l = context.listeners
 
-            .form-dialog-body {
-                padding: 24px 24px 0
+            function onClose() {
+                l.input && l.input(false)
             }
 
-            .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;
-            }
+            return (
+                <el-dialog
+                    v-drag-dialog
+                    visible={value}
+                    custom-class="form-dialog"
+                    top={top}
+                    width={width}
+                    on-close={onClose}
+                    {...context.data}
+                >
+                    <slot slot="title" name="title">{title}</slot>
+
+                    <div class="form-dialog-container">
+                        <LoadingMask show={loading}/>
+                        <el-scrollbar>
+                            <div class="form-dialog-body">
+                                {context.children}
+                            </div>
+                            <div style="margin-bottom: 17px"/>
+                        </el-scrollbar>
+                    </div>
+
+                    <slot slot="footer" name="footer"/>
+                </el-dialog>
+            )
         }
     }
-</style>
+</script>
+
+<style lang="scss" src="./style.scss"></style>
diff --git a/vue/src/components/FormDialog/style.scss b/vue/src/components/FormDialog/style.scss
new file mode 100644
index 0000000..cf746bb
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/vue/src/views/example/stylePage.vue b/vue/src/views/example/stylePage.vue
index 155795f..0461da5 100644
--- a/vue/src/views/example/stylePage.vue
+++ b/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)
             }