在element-plus的Dialog组件中使用el-loading效果

本文主要是介绍在element-plus的Dialog组件中使用el-loading效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近遇到一个需求，在页面中有个组件，子组件由el-dialog包裹，希望展示隐藏el-dialog时有加载动画，加载动画用的是v-loading。

//父组件
<template><tabs v-model="tabsVisible"/>
</template>
<script setup>const tabsVisible = ref(false);
</script>

//子组件
<template><el-dialogv-model="modalVisible"title="":close-on-click-modal="false"width="85%"v-loading="loading"><!--> 这里是展示的内容 <--></el-dialog>
</template>
<script setup>import { ref, computed, watch } from "vue";const loading = ref(false);const props = defineProps({//接收参数modelValue: false,		});const emit = defineEmits(["update:modelValue"]);const modalVisible = computed({get() {return props.modelValue;},set(value) {emit("update:modelValue", value);},});
</script>

如果直接在el-dialog上面加v-loading那么进入页面会报错，我查了下大概意思是：在具有非元素根节点的组件上使用的运行时指令，这些指令将无法按预期发挥作用（Runtime directive used on component with non-element root node. The directives will not function as intended. ）。

这个时候我换了种方式，使用element-plus提供的loading指令。

//子组件
<template><el-dialogv-model="modalVisible"title="":close-on-click-modal="false"width="85%"><!--> 这里是展示的内容 <--></el-dialog>
</template>
<script setup>import { ref, computed, watch } from "vue";const props = defineProps({//接收参数modelValue: false,		});const emit = defineEmits(["update:modelValue"]);const modalVisible = computed({get() {return props.modelValue;},set(value) {emit("update:modelValue", value);},});watch(modalVisible, (newVal, oldVal) => {if (newVal) {initData();} else {//处理数据}});const initData = async () => {//获取数据let loading = null;try {setTimeout(() => {loading = ElLoading.service({ fullscreen: true });}, 30);let res = await getInfo();} catch (e) {console.error(e);}loading.close();};</script>