在el-dialog中使用Loading

说明：这里使用的代码是 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>