介绍
在业务场景中，有时候由于提交的数据很多，导致服务端动作耗时较长，为了保证这个过程中表单内的字段不再能被编辑，我们可以通过自定义能力将整个表单区域处于loading状态
自定义动作组件代码
import {
ActionType,
ActionWidget,
BaseElementViewWidget,
BaseView,
ClickResult,
ServerActionWidget,
SPI,
Widget
} from '@kunlun/dependencies';
@SPI.ClassFactory(ActionWidget.Token({ actionType: ActionType.Server }))
class LoadingServerActionWidget extends ServerActionWidget {
protected async clickAction(): Promise<ClickResult> {
const baseView = Widget.select(this.rootHandle) as unknown as BaseView;
if (!baseView) {
return super.clickAction();
}
const baseViewWidget = baseView.getChildrenInstance().find((a) => a instanceof BaseElementViewWidget) as unknown as BaseElementViewWidget;
if (!baseViewWidget) {
return super.clickAction();
}
return new Promise((resolve, reject) => {
try {
baseViewWidget.load(async () => {
const res = await super.clickAction();
resolve(res);
});
} catch (e) {
reject(false);
}
});
}
}本案例知识点
- BaseElementWidget提供了load方法将继承了该class的元素渲染的区域做整体loading交互，等入参的函数处理完成后恢复正常状态，其实所有继承了ActionWidget的组件也提供了这个能力让按钮在执行函数中的时候处于loading状态，
- 每个组件都有一个全局唯一的
handle值，所在根视图的rootHandle,组件可以用this.rootHandle通过Widget.Select方法查找到所在的根视图组件，从视图的实例化子元素里可以查找到具体的业务类型视图组件，如详情页的DetailWidget、表单页的FormWidget、表格页的TableWidget，拿到这些实例后就可以操作里面的属性和方法了
Oinone社区 作者：nation原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/13057.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
![[前端]平台内置的基类](https://doc.oinone.top/wp-content/themes/justnews/themer/assets/images/lazy.png)
