在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就行了。

相关推荐
一枚前端小能手4 分钟前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript
Komorebi_99994 分钟前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
用户14125016652718 分钟前
一文彻底掌握 ECharts:从配置解读到实战应用
前端
LRH20 分钟前
React 架构设计:从 stack reconciler 到 fiber reconciler 的演进
前端
VIjolie21 分钟前
文档/会议类应用的协同同步机制(OT/CRDT简要理解)
前端
不一样的少年_23 分钟前
【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片
前端·javascript·浏览器
golang学习记23 分钟前
从0死磕全栈之Next.js 企业级 next.config.js 配置详解:打造高性能、安全、可维护的中大型项目
前端
1024小神26 分钟前
next项目使用状态管理zustand说明
前端
Asort26 分钟前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
刘永胜是我28 分钟前
【iTerm2 实用技巧】解决两大顽疾:历史记录看不全 & 鼠标滚轮失灵
前端·iterm