第一步,引入loading样式
import { ElLoading } from 'element-plus'
第二步,创建实例
setup() {
let loading = Loading.service({
text: '请选择上传的文件',
spinner:'el-icon-upload',// 可用elment-ui中图标样式
custom-class:"upload-class",// 自定义类名,添加样式
target:"document.querySelector('el-dialog')" // 遮罩层作用的目标节点
})
}
第三步,在需要修改遮罩层文本的事件中设置新文本
loading.setText('正在上传中请稍后')
第四步,文件上传成功或失败都要关闭弹层
loading.close()
第五步,非必须,监听取消上传文件行为,关闭弹层
// 需提前定义变量cancelUploadFile为true,当调用资源管理器选择了文件的beforeUpload或onchange事件里将cancelUploadFile改为false,
// 在特定的地方执行以下代码,调用资源管理器后监听页面的聚焦行为
window.onfocus=function(){
setTimeout(()=>{
if(cancelUploadFile){
loading.close()
}
},100)
}