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;
});