更新时间：2024-07-03 GMT+08:00
npm utils使用示例
本章节以按钮组件单击时显示Loading效果为例为您介绍npm utils的使用。
添加组件
- 参考登录AstroPro界面中操作，登录AstroPro界面。
- 在左侧导航栏中，选择“前端应用”。
- 单击待编辑应用模块内的“应用开发”，进入设计器。
- 在左侧插件栏中，单击
，展开物料资产包。 - 在物料资产包中选择按钮组件，并拖拽至中心画布中。
添加npm utils
- 在左侧插件栏中，单击
，展开资源管理页面。 - 单击
，进入添加工具类页面。 - 工具类型选择“npm”。
- 参考表1配置工具类的参数。
- 单击“保存”。
绑定事件
- 在中心画布中选中按钮组件。
- 在右侧属性设置面板选择“高级”。
- 鼠标悬停在“绑定事件”上，将显示事件列表。
- 在事件列表中，单击OnClick事件。
- 在弹框中输入方法名称，例如handleOnClick。
图1 事件绑定
- 单击“确定”，弹出JS面板。
- 在JS面板中编写代码。
代码示例：
function handleOnClick(event) { this.loadingInstance = this.utils.Loading.service({ text: "加载中", target: document.getElementById("tiny-loading1"), }); setTimeout(() => { this.loadingInstance.close(); }, 3000); } - 单击“保存”，绑定事件完成。
查看预览效果
- 在顶部工具栏单击保存，保存页面配置。
- 在顶部工具栏单击预览，进入预览页面。
图2 预览页面
- 单击预览页面的按钮，查看效果。
图3 单击后效果
