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

最近遇到一个需求,在页面中有个组件,子组件由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就行了。

相关推荐
DoraBigHead2 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
年纪轻轻就扛不住6 分钟前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js
Trust yourself24316 分钟前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统27 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead41 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛2 小时前
零一开源|前沿技术周报 #7
android·前端·ios