el-dialog内部中间区域显示loading遮罩
在el-dialog内部的中间区域显示loading遮罩,可以通过以下步骤实现:
- 在el-dialog中添加一个div元素,作为中间区域的容器:
<el-dialog>
<div class="content">
<!-- 中间区域内容 -->
</div>
</el-dialog>
- 在该div元素上添加一个class,例如"loading",用于控制loading遮罩的显示和隐藏:
<el-dialog>
<div class="content loading">
<!-- 中间区域内容 -->
</div>
</el-dialog>
- 在Vue的data中添加一个loading变量,用于控制loading遮罩的显示和隐藏:
data() {
return {
loading: false
}
}
- 在el-dialog的mounted钩子函数中,监听loading变量的变化,并根据变化状态显示或隐藏loading遮罩:
mounted() {
this.$watch('loading', (val) => {
if (val) {
this.$el.querySelector('.content').classList.add('loading');
} else {
this.$el.querySelector('.content').classList.remove('loading');
}
})
}
- 在需要显示loading遮罩的地方,设置loading变量为true,例如在请求数据的方法中:
methods: {
fetchData() {
this.loading = true;
// 发起数据请求
// 请求完成后将loading变量设为false
}
}
- 在CSS中定义.loading类的样式,用于显示loading遮罩:
.loading {
position: relative;
}
.loading:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.loading:after {
content: "";
border: 2px solid #fff;
border-top-color: transparent;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
这样就可以在el-dialog内部的中间区域显示loading遮罩了。当loading变量为true时,中间区域会显示loading遮罩,当loading变量为false时,遮罩会隐藏
原文地址: https://www.cveoy.top/t/topic/iAgc 著作权归作者所有。请勿转载和采集!