dialog 遮罩功能

src/components/BasicForm/src/BasicForm.vue

@@ -4,8 +4,9 @@
     v-model="dialogVisible"
     :width="dialogWidth"
     :close-on-click-modal="false"
-    v-loading="formLoading"
+    :vLoading="formLoading"
   >
+  
   <div 
     style="max-height: 60vh;overflow-y: auto;">
     <Form
@@ -106,6 +107,7 @@
     <template #footer>
       <ButtonBase :Butttondata="Butttondata" @button-base-click="buttonBaseClick" />
     </template>
+  
   </Dialog>
   <SearchTable ref="searchTableRef" @searchTableSuccess="searchTableSuccess" />
 </template>

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(() => {
@@ -50,11 +51,38 @@ watch(
   }
 )
 
+const demo = ref()
+watch(
+  () => props.vLoading,
+  async (val: boolean) => {
+    await nextTick()
+    if (val) {
+      initDialog()
+    } else {
+      demo.close()
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
 const dialogStyle = computed(() => {
   return {
     height: unref(dialogHeight)
   }
 })
+
+
+const initDialog = () => {
+  // 用服务生成一个el-loading实例，包括了自定义svg的指令如何在服务中使用
+  demo.value = ElLoading.service({ target: '.loading', text: '加载中...', background: 'rgba(246, 246, 246, 0.8)' })
+  // setTimeout(() => {
+  //   // 延时执行关闭，对应dom清除，如要再使用loading，需重新生成新实例
+  //   demo.close()
+  // }, 5000)
+}
+
 </script>
 
 <template>
@@ -68,6 +96,7 @@ const dialogStyle = computed(() => {
     draggable
     class="com-dialog"
     :show-close="false"
+    custom-class="loading"
   >
     <template #header="{ close }">
       <div class="relative h-54px flex items-center justify-between pl-15px pr-15px">