el-dialog添加loading遮罩

实现效果

index.vue

<template>
	<div>
		<el-button type="text" @click="handleOpen">点击打开 Dialog</el-button>
		
		<el-dialog
		  title="提示"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :before-close="handleClose"
		  >
		  <span>这是一段信息</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false
      };
    },
    methods: {
    handleOpen(){
    	this.$nextTick(() => {
    		// 如果页面有多个dialog，可以使用class进行区分
    		// 如果只想给el-dialog_body添加loading，将el-dialog修改为.el-dialog__body即可，其他同理
            loading = servicesLoading('.el-dialog', '正在加载', true, 'rgba(0,0,0,0.7)')
         })
        setTimeout(() => {
			this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                  loading.close()
            });
		}, 2000);
        
	},
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

封装loading方法，便于其他模块使用

utils.js

import { Loading } from "element-ui";

export const servicesLoading = (node,str,lock,bg) => {
  return Loading.service({
 	//loading需要覆盖的DOM节点，默认为body
    target: document.querySelector(node),
    text: str,			 			 //加载文案
    lock,					 		 //同v-loading的修饰符
    background: bg					 //背景色与透明度
    // spinner: 'el-icon-loading',	 //加载图标
  })
}

官网api，可以根据自己需要修改