本文主要是介绍在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>
当然如果不是父子组件，直接用v-loading就行了。
这篇关于在element-plus的Dialog组件中使用el-loading效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
