From cc75d8db80057f8b1c073590529fda8c6072379e Mon Sep 17 00:00:00 2001
From: zhang_li <2235006734@qqq.com>
Date: Wed, 27 Mar 2024 14:49:45 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E6=AC=A1=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BasicForm/src/BasicForm.vue |  1 +
 src/components/Dialog/src/Dialog.vue       | 23 +++++++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/components/BasicForm/src/BasicForm.vue b/src/components/BasicForm/src/BasicForm.vue
index 32b083d..7a8c2fe 100644
--- a/src/components/BasicForm/src/BasicForm.vue
+++ b/src/components/BasicForm/src/BasicForm.vue
@@ -4,6 +4,7 @@
     v-model="dialogVisible"
     :width="isBusiness ? '60%' : '40%'"
     :close-on-click-modal="false"
+    :vLoading="formLoading"
   >
   <div 
     style="max-height: 60vh;overflow-y: auto;">
diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
index a1eb550..7d9272c 100644
--- a/src/components/Dialog/src/Dialog.vue
+++ b/src/components/Dialog/src/Dialog.vue
@@ -11,7 +11,8 @@ const props = defineProps({
   fullscreen: propTypes.bool.def(true),
   width: propTypes.oneOfType([String, Number]).def('40%'),
   scroll: propTypes.bool.def(false), // 是否开启滚动条。如果是的话，按照 maxHeight 设置最大高度
-  maxHeight: propTypes.oneOfType([String, Number]).def('400px')
+  maxHeight: propTypes.oneOfType([String, Number]).def('400px'),
+  vLoading:propTypes.bool.def(false)
 })
 
 const getBindValue = computed(() => {
@@ -34,6 +35,22 @@ const toggleFull = () => {
 
 const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : props.maxHeight)
 
+
+let demo = null
+watch(
+  () => props.vLoading,
+  async (val: boolean) => {
+    await nextTick()
+    if (val) {
+      initDialog()
+    } else {
+      if (demo !== null) demo.close()
+    }
+  },
+  {
+    immediate: true
+  }
+)
 watch(
   () => isFullscreen.value,
   async (val: boolean) => {
@@ -55,6 +72,10 @@ const dialogStyle = computed(() => {
     height: unref(dialogHeight)
   }
 })
+const initDialog = () => {
+  // 用服务生成一个el-loading实例，包括了自定义svg的指令如何在服务中使用
+  demo = ElLoading.service({ target: '.loading', text: '加载中...', background: 'rgba(246, 246, 246, 0.8)' })
+}
 </script>
 
 <template>