element plus下载进度增加遮罩层loading

一开始用的二次封装的工具方法，去加遮罩层，发现进度数字无法响应式更新。

改进：

import request from '@/utils/request';
import { ElLoading } from 'element-plus';

const loadProgress = ref('0');
const loadingInstance = ref(null);
// 打开遮罩层
const openLoading = () => {
	// loading实例
	loadingInstance.value = ElLoading.service({
		lock: true,
		text: '开始下载，请勿刷新页面...',
		background: 'rgba(0, 0, 0, 0.7)',
		fullscreen: true,
	});
	if (loadProgress.value == '100.00') {
		loadingInstance.value.close(); //关闭遮罩层
		loadingInstance.value = null;
	}
};

// 下载请求
function downloadFile(href) {
	return request({
		url: href,
		method: 'get',
		responseType: 'arraybuffer',
		timeout: 3600000,
		// 下载进度
		onDownloadProgress: (progressEvent) => {
			let percentCompleted = ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2);
			loadProgress.value = percentCompleted;
			loadingInstance.value?.setText(`正在下载，下载进度为 ${loadProgress.value}%...`);
		},
	});
}

// 注意关闭遮罩层
downloadFile(cosFileHerf).then((data) => {
    loadingInstance.value.close(); //关闭遮罩层
    loadingInstance.value = null;
    // 获取文件名
    const cosFileName = file.cosFileName;
    console.log('cosFileName:', cosFileName);
    zip.file(cosFileName, data, { binary: true }); // 逐个添加文件
    cache[cosFileName] = data;
})
    .catch(() => {
    loadingInstance.value?.close(); //关闭遮罩层
    loadingInstance.value = null;
});