页面JS及事件绑定 页面JS基本使用与管理 绑定API 父主题： UI编辑器使用帮助

查看更多 →

选中组件，在组件属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上，将显示事件列表。 在事件列表中，选择onClick事件。 在弹框中设置绑定事件。 方法名称：选择已有方法或者添加新方法，如果选项添加新方法，单击“确定”之后将在JS面板中创建一个该名称的新方法。 扩展参数：调用当前事件传入的真实参数，数组格式，追加在原有事件参数之后如:

查看更多 →

没有可配置的事件，则菜单栏为空），选择需要绑定的事件。 图2 绑定事件 在事件栏中鼠标移至添加按钮上，弹出菜单栏，选择“自定义JS”。 事件绑定中选择在页面JS中新增的exampleFunction方法（或添加新方法）。 图3 自定义JS 单击“确定” 给属性绑定JS方法 选中画布中已有的组件元素。

查看更多 →

，选择需要绑定的事件。 图2 绑定事件 在事件栏中鼠标移至添加按钮上，弹出菜单栏，选择“自定义JS”。 事件绑定中选择在页面JS中新增的exampleFunction方法（或添加新方法）。 图3 自定义JS 单击“确定” 给属性绑定JS方法 选中画布中已有的组件元素。 在右侧“属

查看更多 →

registerEvents：用于注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。参数说明如下： thisObj：当前组件实例对象，指为该组件注册事件。 eventName：事件名称，应该与触发事件API中的第一个参数保持一致。 Event Label：事件标签名，在事件列表中展示的事件标题。

查看更多 →

registerEvents：用于注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。参数说明如下： thisObj：当前组件实例对象，指为该组件注册事件。 eventName：事件名称，应该与触发事件API中的第一个参数保持一致。 Event Label：事件标签名，在事件列表中展示的事件标题。

查看更多 →

件用于展示不同产品类别的图片信息。两个组件通过事件-动作机制实现交互，在标签页组件中注册标签切换事件，此事件绑定信息展示组件中切换产品图片的动作。 本章节使用的示例组件开发过程中，使用了前端开发框架Vue及组件库Element。事件-动作机制的详情介绍，请参见如何实现组件交互。 操作步骤

查看更多 →

操作 说明 编辑触发事件 在触发事件列表，单击“操作”列的“编辑”可编辑触发事件。 测试触发事件 在触发事件列表，单击“操作”列的“测试”可测试触发事件。 说明： 测试触发事件前需要先发布连接器。 删除触发事件 在触发事件列表，单击“操作”列的“删除”可删除触发事件。 说明： 删除触发事件后无法恢复，请谨慎操作。

查看更多 →

绑定事件 参考登录AstroPro界面中操作，登录AstroPro界面。 在左侧导航栏中，选择“前端应用”。 单击待编辑应用模块内的“应用开发”，进入设计器。 选中组件，在组件属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上，将显示事件列表。 在事件列表中，单击需要绑定的事件。

查看更多 →

@opentiny/vue 导出名称 Loading 是否解构 开启 入口路径 本示例不填 版本号 0.1.20 CDN 本示例不填 单击“保存”。 绑定事件 在中心画布中选中按钮组件。 在右侧属性设置面板选择“高级”。 鼠标悬停在“绑定事件”上，将显示事件列表。 在事件列表中，单击OnClick事件。

查看更多 →

件用于展示不同产品类别的图片信息。两个组件通过事件-动作机制实现交互，在标签页组件中注册标签切换事件，此事件绑定信息展示组件中切换产品图片的动作。 本章节使用的示例组件开发过程中，使用了前端开发框架Vue及组件库Element。事件-动作机制的详情介绍，请参见如何实现组件交互。 操作步骤

查看更多 →

Vue应用部署 在主机上部署Vue框架的web服务，并启动该服务。 请确认目标主机已安装Nginx，若已安装请移除模板中“安装Nginx”步骤。 该模板涉及的部署步骤如下所示： 安装Nginx 下载软件包 解压软件包 启动Nginx 重载Nginx配置文件 服务启动测试 该模板需要填写的参数如下表所示。

查看更多 →

全部应用”中，单击对应的应用，进入应用。 在主菜单中，选择“流程管理”，单击“创建流程”。 设置流程名称（如事件触发流程），触发条件选择“事件触发”，单击“创建”。 图1 创建事件触发流程 创建完成后，系统自动进入流程设计页面，如图2所示。流程设计页面默认为纵向布局，单击主菜单中的“切换横向布局”，可将页面调整为横向布局，如图3。

查看更多 →

registerEvents：用于注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。参数说明如下： thisObj：当前组件实例对象，指为该组件注册事件。 eventName：事件名称，应该与触发事件API中的第一个参数保持一致。 Event Label：事件标签名，在事件列表中展示的事件标题。

查看更多 →

获取该组件国际化配置文件中定义的国际化文件内容，推荐配置vue和vueI18n使用。 hideWidget 隐藏组件。 showWidget 显示组件。 triggerEvent 触发事件，需要配合registerEvent使用。 registerResizeEvent 监听必要的dom尺寸变化事件，画布resize时会触发重新绘制。

查看更多 →

获取该组件国际化配置文件中定义的国际化文件内容，推荐配置vue和vueI18n使用。 hideWidget 隐藏组件。 showWidget 显示组件。 triggerEvent 触发事件，需要配合registerEvent使用。 registerResizeEvent 监听必要的dom尺寸变化事件，画布resize时会触发重新绘制。

查看更多 →

registerEvents：用于注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。参数说明如下： thisObj：当前组件实例对象，指为该组件注册事件。 eventName：事件名称，应该与触发事件API中的第一个参数保持一致。 Event Label：事件标签名，在事件列表中展示的事件标题。

查看更多 →

性与对应的数据进行绑定。当其他组件的事件、服务编排、事件等使属性绑定值发生变化时，绑定的属性也随即发生变化，实现了组件之间的交互。 数据绑定方式 在标准页面开发界面，选中任意组件，在右侧“属性”页签进行数据绑定。 数据绑定分为值绑定和属性绑定，如图2所示，绑定会在指定组件上，创建双向数据绑定。

查看更多 →

性与对应的数据进行绑定。当其他组件的事件、服务编排、事件等使属性绑定值发生变化时，绑定的属性也随即发生变化，实现了组件之间的交互。 数据绑定方式 在标准页面开发界面，选中任意组件，在右侧“属性”页签进行数据绑定。 数据绑定分为值绑定和属性绑定，如图2所示，绑定会在指定组件上，创建双向数据绑定。

查看更多 →

调试工具 Vue Devtools是一个专为Vue.js开发者设计的浏览器扩展。它提供了一系列强大的功能，帮助开发者更容易地调试和优化他们的Vue应用程序。 Vue Devtools 以下是Vue Devtools的主要特点和功能： 组件树查看：允许用户查看完整的Vue组件层次结

查看更多 →

registerEvents：用于注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。 thisObj：当前组件实例对象，指为该组件注册事件。 "eventName"：事件名称，应该与触发事件API中的第一个参数保持一致。 "Event Label"：事件标签名，在事件列表中展示的事件标题。 [

查看更多 →