自定义弹窗组件

web/src/apps/AppMenu.vue

@@ -17,7 +17,7 @@
         </template>
       </ku-table>
     </ku-layout>
-    <el-dialog title="编辑菜单" v-model="dialog" draggable @close="form={}" width="500">
+    <ku-dialog title="编辑菜单" v-model="dialog" draggable @close="form={}" width="500">
       <el-form ref="MenuForm" :model="form" label-width="80px" :rules="rules">
         <el-form-item label="菜单名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入" clearable/>
@@ -56,7 +56,7 @@
           <el-input v-model="form.showIndex" placeholder="请输入" clearable/>
         </el-form-item>
       </el-form>
-    </el-dialog>
+    </ku-dialog>
   </section>
 </template>
 
@@ -65,10 +65,11 @@ import KuLayout from "../components/KuLayout";
 import KuSearchBar from "../components/KuSearchBar";
 import KuTable from "../components/KuTable";
 import KuSelect from "../components/KuSelect";
+import KuDialog from "../components/KuDialog";
 
 export default {
   name: "AppMenu",
-  components: {KuSelect, KuTable, KuSearchBar, KuLayout},
+  components: {KuDialog, KuSelect, KuTable, KuSearchBar, KuLayout},
   label: "菜单管理",
   data() {
     return {

web/src/components/KuDialog.vue

@@ -1,6 +1,14 @@
 <template>
-  <section class="KuDialog" v-if="show">
+  <section class="KuDialog">
-    <div class="modal" v-if="modal"/>
+    <el-dialog :modelValue="modelValue" v-bind="$attrs" :modal="modal" :draggable="draggable">
+      <slot/>
+      <template #footer>
+        <el-row justify="center">
+          <el-button @click="$emit('update:modelValue',false)">取消</el-button>
+          <el-button type="primary" @click="handleConfirm">确定</el-button>
+        </el-row>
+      </template>
+    </el-dialog>
   </section>
 </template>
 
@@ -8,13 +16,18 @@
 export default {
   name: "KuDialog",
   props: {
-    show: Boolean,
+    modelValue: Boolean,
-    modal: {type: Boolean, default: true}
+    modal: {type: Boolean, default: true},
+    draggable: {default: true}
   },
   data() {
     return {}
   },
-  methods: {},
+  methods: {
+    handleConfirm() {
+      this.$emit("confirm")
+    }
+  },
   created() {
   }
 }
@@ -22,15 +35,22 @@ export default {
 
 <style lang="scss" scoped>
 .KuDialog {
-  position: fixed;
+  :deep(.el-dialog__header) {
-  z-index: 6800;
+    border-bottom: 1px solid #ddd;
+    margin-right: 0;
 
-  .modal {
+    .el-dialog__title {
-    position: fixed;
+      font-weight: bold;
-    background: rgba(#000, .2);
+    }
-    z-index: 6700;
+  }
+
+  :deep(.el-dialog__footer) {
+    background-color: var(--background-color);
+    padding: 16px;
+
+    .el-button {
+      width: 92px;
+    }
   }
 }
-
-
 </style>