文档首页/ Astro企业应用 AstroPro/ 用户指南/ 前端应用管理/ 使用工具类方法/ npm utils使用示例
更新时间：2024-11-13 GMT+08:00
查看PDF
分享

npm utils使用示例

本章节以按钮组件单击时显示Loading效果为例为您介绍npm utils的使用。

添加组件

  1. 参考登录AstroPro界面中操作，登录AstroPro界面。
  2. 在左侧导航栏中，选择“前端开发平台 > 前端应用”。
  3. 单击待编辑应用模块内的“开发应用”，进入设计器。
  4. 在左侧插件栏中，单击，展开物料资产包。
  5. 在物料资产包中选择按钮组件，并拖拽至中心画布中。

添加npm utils

  1. 在左侧插件栏中，单击，展开资源管理页面。
  2. 单击，进入添加工具类页面。
  3. 工具类型选择“npm”。
  4. 参考表1配置工具类的参数。

    表1 参数说明

    参数

    示例

    名称

    Loading

    包名

    @opentiny/vue

    导出名称

    Loading

    是否解构

    开启

    入口路径

    本示例不填

    版本号

    0.1.20

    CDN

    本示例不填

  5. 单击“保存”。

绑定事件

  1. 在中心画布中选中按钮组件。
  2. 在右侧属性设置面板选择“高级”。
  3. 鼠标悬停在“绑定事件”上，将显示事件列表。
  4. 在事件列表中，单击OnClick事件。
  5. 在弹框中输入方法名称，例如handleOnClick。

    图1 事件绑定

  6. 单击“确定”，弹出JS面板。
  7. 在JS面板中编写代码。

    代码示例：

    function handleOnClick(event) {
    this.loadingInstance = this.utils.Loading.service({
      text: "加载中",
    target: document.getElementById("tiny-loading1"),
  });
  setTimeout(() => {
      this.loadingInstance.close();
  }, 3000);
}

  8. 单击“保存”，绑定事件完成。

查看预览效果

  1. 在顶部工具栏单击保存，保存页面配置。
  2. 在顶部工具栏单击预览，进入预览页面。

    图2 预览页面

  3. 单击预览页面的按钮，查看效果。

    图3 单击后效果

父主题： 使用工具类方法

相关文档