使用Hooks实现按钮或页面Loading效果
场景：当在基础资料作业或任务卡等页面上，点击按钮执行调用API或其他类似操作时，希望在执行过程中在页面呈现loading效果，让用户知道后台正在执行中需要等待。
效果1：按钮呈现loading效果
在按钮的hooks中用 component.loading = true 来让按钮呈现loading效果
用 component.loading = false 来解除按钮loading效果
以下是一个调用ESP API时加上按钮loading效果的hooks示例：
//将按钮设为loading状态
component.loading = true;
console.log(component.loading);
//调用ESP API
options.utils.espApi
.getEspByActionId({
actionId: 'esp_isv.pdemo.sample.personnel.report.get',
parameter:{"employee_info":[{"employee_no":"0001"}]}
})
.subscribe(
(res) => {
console.log(res.data);
//执行结束后解除按钮loading状态
component.loading = false;
console.log(component.loading);
},
(err) => {
console.log(err.error.betterErrorMessage);
//执行结束后解除按钮loading状态
component.loading = false;
console.log(component.loading);
}
);
效果2：整体页面（表格）呈现loading效果，并遮罩页面
此效果必须页面上有表格组件才能使用
需要先获取表格组件的ID，然后在按钮的hooks中用 component.getComponentById('...') 来获取表格组件，
假设获取的表格组件为 tableComponent，再用 tableComponent.setLoading(true) 来加上loading效果，
用 tableComponent.setLoading(false) 解除loading效果
以下是一个点击按钮后呈现5秒loading效果的hooks示例：
//获取表格组件
let tableComponent = component.getComponentById("9528ff20-f56d-25b9-fba4-b204c93cede1");
if (tableComponent) {
//将表格设为loading状态
tableComponent.setLoading(true);
tableComponent.markForCheck();
setTimeout(() => {
//取消表格loading状态
tableComponent.setLoading(false);
tableComponent.markForCheck();
}, 5000)
} else {
console.log('获取表格组件异常......');
}表格ID可以在这取得
页:
[1]