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

Hello_yihao2024-08-31 16:14

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

javascript 复制代码

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

javascript 复制代码

//子组件
<template>
	<el-dialog
		v-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指令。

javascript 复制代码

//子组件
<template>
	<el-dialog
		v-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就行了。