组件同步

sgzb-ui/src/components/DialogModel/index.vue

@@ -0,0 +1,55 @@
+<template>
+    <!-- 弹框组件 -->
+    <div>
+        <el-dialog
+            :title="dialogConfig.outerTitle"
+            :width="dialogConfig.outerWidth"
+            :visible.sync="dialogConfig.outerVisible"
+            v-if="dialogConfig.outerVisible"
+            :before-close="handleCloseOuter"
+            append-to-body
+        >
+            <!-- 外层弹框内容 -->
+            <slot name="outerContent"></slot>
+
+            <!-- 内层对话框 -->
+            <el-dialog
+                :title="dialogConfig.innerTitle"
+                :width="dialogConfig.innerWidth"
+                :visible.sync="dialogConfig.innerVisible"
+                v-if="dialogConfig.innerVisible"
+                :before-close="handleCloseInner"
+                append-to-body
+            >
+                <!-- 内层弹框内容 -->
+                <slot name="innerContent"></slot>
+            </el-dialog>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            /* 配置项 */
+            dialogConfig: {
+                type: Object,
+                default: () => {
+                    return {}
+                },
+            },
+        },
+        methods: {
+            /* 右上角关闭外层 */
+            handleCloseOuter() {
+                /* 通知父组件更改弹框显示值 */
+                this.$emit('closeDialogOuter', false)
+            },
+            /* 右上角关闭内层 */
+            handleCloseInner() {
+                /* 通知父组件更改弹框显示值 */
+                this.$emit('closeDialogInner', false)
+            },
+        },
+    }
+</script>