element ui的Loading组件在Dialog对话框内使用

发布时间 2023-05-17 11:18:58作者: 天宁哦

说明

想要实现在Dialog对话框上加载效果,
父组件开启loding,子组件关闭
首先需要在父组件传值的时候把this.$loading的结果赋我们定义好的变量

代码

父组件

<page-details :data="details" ></page-details>
// data部分
data(){
	return{
		details:{
			show:false,
			id:'',
			month:'',
			loadingInstance:null
		}, //详情页面
	}
}

methods:{
	dblclick(){
		this.details.show = true;
		//就是下面这个部分,记得选择器最好给Dialog加上class或者id,
		//因为如果有多个Dialog就会默认选择第一个
		this.details.loadingInstance = this.$loading({
			target: '.box .el-dialog'
		});
	}
}

子组件

//在想要关闭的地方直接调用这个即可
this.data.loadingInstance.close();