多次提交

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

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>