diff --git a/src/components/BasicForm/src/BasicForm.vue b/src/components/BasicForm/src/BasicForm.vue index 4c96ef8e5..70695a55e 100644 --- a/src/components/BasicForm/src/BasicForm.vue +++ b/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" > +
+ diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue index a1eb550c8..69aba1b11 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(() => { @@ -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) +} +