优化此段方法,实现浏览器文件下载时显示下载中动画,当文件下载完成时,隐藏下载中,显示下载完成动画,下载完成后延时1.5秒关闭所有动画 // 导出充电站列表 exportStationTable() { const url = '/omElecStation/exportOmElecStationList'; const params = { regionId: this.selectedRegion, cityId: this.selectedCity, areaId: this.selectedCoun
时间: 2024-04-05 18:30:01 浏览: 65
CSS3动画下载按钮特效
try {
const url = '/omElecStation/exportOmElecStationList';
const params = {
regionId: this.selectedRegion,
cityId: this.selectedCity,
areaId: this.selectedCounty,
stationName: this.searchInput,
operatorId: this.selectedOperator,
stationStatus: this.selectedStatus,
stationType: this.selectedType
};
const downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
downloadLink.style.display = "none";
downloadLink.href = url + "?" + this.serialize(params);
downloadLink.download = "充电站列表.xls";
downloadLink.click();
const downloading = document.createElement("div");
downloading.innerHTML = "下载中...";
document.body.appendChild(downloading);
const downloadCompleted = document.createElement("div");
downloadCompleted.innerHTML = "下载完成!";
downloadCompleted.style.display = "none";
document.body.appendChild(downloadCompleted);
downloadLink.addEventListener("click", () => {
downloading.style.display = "block";
});
downloadLink.addEventListener("load", () => {
downloading.style.display = "none";
downloadCompleted.style.display = "block";
setTimeout(() => {
downloadCompleted.style.display = "none";
}, 1500);
});
} catch (err) {
console.error(err);
}
优化建议:
1. 将下载链接和参数序列化的代码封装成一个函数,提高代码的复用性和可维护性。
2. 可以在下载完成后通过回调函数来处理下载完成后的逻辑,避免代码的嵌套和冗余。
3. 可以考虑使用 CSS 来控制下载中和下载完成的动画,提高代码的可读性和可维护性。
阅读全文