el-dialog被遮罩层遮挡

你可以尝试修改遮罩层的 z-index（层级）属性，确保它在 el-dialog 的下方。你可以通过给遮罩层添加一个自定义的类名，然后在样式中设置 z-index 属性来实现。例如：

<el-dialog :visible="dialogVisible" class="custom-dialog">
  ...
</el-dialog>

.custom-dialog .el-dialog__wrapper {
  z-index: 1000; /* 设置一个较高的值 */
}
.custom-dialog .v-modal {
  z-index: 999; /* 设置一个较低的值 */
}

这样可以确保遮罩层位于对话框下方。如果仍然存在问题，请检查是否有其他元素覆盖了对话框或遮罩层。

相关问题

el-dialog遮罩层把内容遮住

el-dialog是一个基于Element UI的弹出框组件，它的遮罩层和显示层都设置了position:fixed。如果el-dialog的父级元素也设置了position:fixed，并且其z-index比弹出框的遮罩层小，就会出现遮罩层把内容遮挡的问题。解决这个问题的方法是给el-dialog设置modal-append-to-body='false'，使遮罩层插入到Dialog的父元素上。这样就可以避免遮罩层把内容遮挡的问题了。

el-dialog怎么使用局部遮罩层

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，从而隐藏局部遮罩层，并打开对话框。