el-dialog添加loading遮罩

在Element UI中，您可以使用v-loading.lock指令在el-dialog上添加loading遮罩。以下是一个简单的例子：

<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :before-close="handleClose">
    <div v-loading.lock="isLoading">
      <!-- 这里是对话框内容 -->
      正在加载数据，请稍候...
    </div>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: true,
      isLoading: true
    };
  },
  methods: {
    handleClose(done) {
      // 如果需要异步关闭对话框，可以在这里处理
      done();
    }
  },
  mounted() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.isLoading = false;
    }, 3000); // 假设数据加载需要3秒钟
  }
};
</script>

在这个例子中，el-dialog中的div元素被v-loading.lock指令装饰，该指令在isLoading数据属性为true时显示loading遮罩。isLoading初始化为true，表示正在加载。在组件的mounted生命周期钩子中，我们通过设置isLoading为false来模拟数据加载完毕，遮罩消失。

请注意，这里的v-loading.lock指令使得遮罩无法通过点击来关闭，除非你在el-dialog的before-close事件中自定义关闭逻辑。