说明：这里使用的代码是 vue3 + TypeScript，下面是全部代码：
<template>
<div>
<el-dialog :title="title"
v-model="open" width="500px"
:close-on-click-modal="false" // 鼠标点击弹窗外部不关闭弹窗
:close-on-press-escape="false" // 按下esc键不关闭弹窗
ref="mv"
>
<template #footer>
<div class="dialog-footer text-center">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ElLoading } from 'element-plus'
const open = ref(false) // 控制 el-dialog 的弹出和关闭
const mv = ref() // 用于接收 el-dialog 对象
const dialogPanel = ref() // 接收 ElLoading.service对象，用于关闭 Loading
// el-dialog 触发 Loading 的函数
function initDialog () {
dialogPanel.value = ElLoading.service({
target: mv.value.dialogRef, // el-dialog 对象
text: 'Loading...', // Loading 的提示信息
background: 'rgba(0,0,0,0.7)', // 设置背景颜色和透明度
})
}
/** 点击提交按钮， el-dialog 触发 Loading */
function submitForm() {
initDialog()
// Loading 延时两秒后关闭
setTimeout(() => {
dialogPanel.value.close()
}, 2000)
}
function handleClose() {
open.value = false;
}
const handleOpen = () => {
open.value = true
}
</script>