From 84055fe6160e4759ae36e01ddc0dbb9987013e7c Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Wed, 13 Aug 2025 14:31:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8components=E6=96=87=E4=BB=B6=E5=A4=B9?=
 =?UTF-8?q?=E4=B8=8B=E6=96=B0=E5=BB=BASysDialog=E6=96=87=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E4=BB=8EElement-plus=E4=B8=AD=E5=AF=BC=E5=85=A5=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在src中新建hooks模块，用于存储需要大量复用的代码

在hooks文件夹下新建useDialog.ts文件，用于定义dialog相关属性及方法
并通过返回值将属性及方法导出使用

在vite-env.d.ts文件中添加hooks的路径别名支持

在首页dashboard中添加一个测试弹窗用于测试上述封装是否成功
（测试成功）
---
 order-system/src/components/SysDialog.vue  | 103 +++++++++++++++++++++
 order-system/src/hooks/useDialog.ts        |  37 ++++++++
 order-system/src/http/index.ts             |   1 +
 order-system/src/views/dashboard/Index.vue |  20 ++++
 order-system/src/vite-env.d.ts             |   7 ++
 5 files changed, 168 insertions(+)
 create mode 100644 order-system/src/components/SysDialog.vue
 create mode 100644 order-system/src/hooks/useDialog.ts

diff --git a/order-system/src/components/SysDialog.vue b/order-system/src/components/SysDialog.vue
new file mode 100644
index 0000000..10b6c2e
--- /dev/null
+++ b/order-system/src/components/SysDialog.vue
@@ -0,0 +1,103 @@
+<!-- 封装弹框组件 -->
+ <template>
+  <el-dialog
+    :model-value="visible"
+    :title="title"
+    :width="width"
+    :height="height + 'px'"
+    append-to-body
+    :before-close="onClose"
+  >
+    <!-- 弹框内容通过插槽实现 -->
+    <div class="container" :style="{height: height + 'px'}">
+      <slot name="content"></slot>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="danger" @click="onClose">取消</el-button>
+        <el-button type="primary" @click="onConfirm">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+ </template>
+ 
+ <script setup lang="ts">
+//  定义参数类型
+//  定义为可选参数
+interface DialogProps{
+  // 弹框标题
+  title?: string;
+  // 弹框显示&隐藏
+  visible: boolean;
+  // 弹框宽高
+  width?: number;
+  height?: number;
+}
+
+// 子组件接收父组件传递的参数
+// withDefaults指定默认值
+// defineProps接收父组件传递参数值
+const props = withDefaults(defineProps<DialogProps>(),{
+  title: '标题',
+  visible: false,
+  width: 630,
+  height: 280
+})
+
+// 注册方法，在子组件中调用
+const emits = defineEmits(['onClose','onConfirm'])
+// 定义onClose方法,弹框关闭
+const onClose = ()=>{
+  emits('onClose')
+}
+// 定义onConfirm方法,弹框确定
+const onConfirm = ()=>{
+  emits('onConfirm')
+}
+ </script>
+ 
+ <style lang="scss">
+  .container{
+    overflow-x: initial;
+    overflow-y: auto;
+  }
+
+  .el-dialog{
+    border-top-left-radius: 7px !important;
+    border-top-right-radius: 7px !important;
+    padding: 0 !important;
+    .el-dialog__header{
+      padding-right: 0;
+      
+      border-top-left-radius: 7px !important;
+      border-top-right-radius: 7px !important;
+      background-color: #009688 !important;
+      
+      .el-dialog__title{
+        color: #fff;
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 40px;
+        margin-left: 10px;
+      }
+    }
+
+    .el-dialog__headerbtn{
+      .el-dialog__close{
+        color: #fff;
+      }
+    }
+
+    .el-dialog__body{
+      padding: 10px;
+    }
+
+    .el-dialog__footer{
+      border-top: 1px solid #e8eaec !important;
+      padding: 10px;
+    }
+  }
+ 
+ </style>
\ No newline at end of file
diff --git a/order-system/src/hooks/useDialog.ts b/order-system/src/hooks/useDialog.ts
new file mode 100644
index 0000000..3fec937
--- /dev/null
+++ b/order-system/src/hooks/useDialog.ts
@@ -0,0 +1,37 @@
+// hooks便于复用
+import { reactive } from "vue"
+export default function useDialog(){
+  // 定义弹框属性
+  // ref： 定义简单、基础数据类型的响应式数据
+  // reactive： 定义复杂数据类型的响应式数据
+
+  const dialog = reactive({
+    // title: '新增',
+    visible: false,
+    // width: 600,
+    // height: 100
+  })
+
+  // 弹框关闭
+  const onClose = ()=>{
+    dialog.visible = false
+  }
+
+  // 弹框确定
+  const onConfirm = ()=>{
+    dialog.visible = false
+  }
+
+  // 显示弹框
+  const onShow = ()=>{
+    dialog.visible = true
+  }
+
+  // 将定义的属性及方法返回出去
+  return {
+    dialog,
+    onClose,
+    onConfirm,
+    onShow
+  }
+}
\ No newline at end of file
diff --git a/order-system/src/http/index.ts b/order-system/src/http/index.ts
index a12a83e..335c547 100644
--- a/order-system/src/http/index.ts
+++ b/order-system/src/http/index.ts
@@ -131,4 +131,5 @@ class Http{
   }
 }
 
+// 导出
 export default new Http(config)
\ No newline at end of file
diff --git a/order-system/src/views/dashboard/Index.vue b/order-system/src/views/dashboard/Index.vue
index 8bf3445..402dcf2 100644
--- a/order-system/src/views/dashboard/Index.vue
+++ b/order-system/src/views/dashboard/Index.vue
@@ -1,10 +1,30 @@
 <template>
   <div>
     首页面
+    <el-button type="primary" size="default" @click="onShow">测试弹框组件</el-button>
+    
   </div>
+  <SysDialog
+  :title="dialog.title"
+  :visible="dialog.visible"
+  :width="dialog.width"
+  :height="dialog.height"
+  @onClose="onClose"
+  @onConfirm="onConfirm"
+  >
+    <!-- 使用弹框组件，在插槽中传递值 -->
+    <template #content>
+      测试弹框组件
+    </template>
+  </SysDialog>
 </template>
 
 <script setup lang="ts">
+  import SysDialog from '@/components/SysDialog.vue';
+
+  // import { reactive } from 'vue';
+  import useDialog from '@/hooks/useDialog';
+  const { dialog,onClose,onConfirm,onShow } = useDialog()
 
 </script>
 
diff --git a/order-system/src/vite-env.d.ts b/order-system/src/vite-env.d.ts
index 5d4dd01..1c31ea3 100644
--- a/order-system/src/vite-env.d.ts
+++ b/order-system/src/vite-env.d.ts
@@ -46,4 +46,11 @@ declare module '@/store/*' {
 
   // useCollapseStore导出
   export function useCollapseStore(): any;
+}
+
+// 添加hooks路径别名支持
+declare module '@/hooks/useDialog' {
+  // 我们可以根据实际情况导出具体的类型，如果暂时不想写具体类型，可以导出any
+  const content: any;
+  export default content;
 }
\ No newline at end of file