Merge pull request '完成弹窗组件的封装' (#27) from Brunch_LPQ into main

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>

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
+  }
+}

order-system/src/http/index.ts

@@ -131,4 +131,5 @@ class Http{
   }
 }
 
+// 导出
 export default new Http(config)

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>
 

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;
 }