el-dialog怎么使用局部遮罩层
时间: 2024-06-17 10:06:46 浏览: 212
el-dialog 是 element-ui 提供的对话框组件,可以使用局部遮罩层来实现在弹窗打开时,背景部分被遮挡,从而减少用户的干扰。具体实现方式如下:
在 el-dialog 中添加属性 v-loading 和 :loading-text ,如下所示:
```
<el-dialog
v-loading="loading"
:loading-text="'拼命加载中...'"
title="提示"
:visible.sync="dialogVisible">
<p>这是一段内容...</p>
</el-dialog>
```
其中,v-loading 绑定了一个变量 loading ,控制局部遮罩层的显示和隐藏。:loading-text 属性设置了局部遮罩层显示时的文本提示。
在相关代码中,可以通过改变 loading 变量的值来控制局部遮罩层的显示和隐藏。例如:
```
data() {
return {
dialogVisible: false,
loading: false
}
},
methods: {
showDialog() {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.dialogVisible = true;
}, 2000);
}
}
```
在上述代码中,首先将 loading 变量设置为 true,从而显示局部遮罩层;接着使用 setTimeout 函数延迟 2 秒,将 loading 变量设置为 false,从而隐藏局部遮罩层,并打开对话框。
阅读全文