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" >
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)' }) +}