更新时间:2024-10-14 GMT+08:00
分享

页面JS

编写JS脚本

单击左侧插件栏中页面JS按钮即可打开页面JS面板。在代码编辑区中编写好代码后单击右上角保存按钮

图1 代码编辑区

系统预先编写好了一些范例脚本,单击“展示使用帮助”可以查看提供的范例脚本。

可以将需要使用的相关范例复制,然后单击“关闭使用帮助”回到JS代码编辑页面,粘贴到代码编辑区进行使用。

给组件绑定JS方法

  1. 在页面JS中添加脚本并保存。

    function exampleFunction() {
        // JS逻辑
    }

  2. 选中画布中已有的组件元素。
  3. 在右侧“高级”设置面板中,鼠标移动至添加按钮上,弹出可添加事件的菜单栏(若没有可配置的事件,则菜单栏为空),选择需要绑定的事件。

    图2 绑定事件

  4. 在事件栏中鼠标移至添加按钮上,弹出菜单栏,选择“自定义JS”
  5. 事件绑定中选择在页面JS中新增的exampleFunction方法(或添加新方法)。

    图3 自定义JS

  6. 单击“确定”

给属性绑定JS方法

  1. 选中画布中已有的组件元素。
  2. 在右侧“属性”设置面板中,选择一个支持变量绑定的属性,单击变量绑定按钮,弹出“变量绑定”页面。
  3. “变量列表”选择“自定义处理函数”,并选择在页面JS中新增的方法。

    若需要执行JS方法,需要在变量中给方法名后添加括号,否则为字符串格式。

    图4 自定义处理函数

  4. 单击“确定”

在生命周期中绑定JS方法

生命周期介绍

这里的生命周期特指Vue的生命周期,Vue的生命周期可以简单分为四个阶段:创建阶段,挂载阶段,运行阶段,销毁阶段。

图5 生命周期介绍
  • setup:在组件创建时执行。
  • onBeforeMount:在组件被挂载之前执行。
  • onMounted:在组件挂载完成后执行。
  • onBeforeUpdate:在组件更新之前执行。
  • onUpdated:在组件更新完成后执行。
  • onBeforeUnmount:在组件被卸载之前执行。
  • onUnmounted:在组件卸载完成后执行。
  • onErrorCaptured:在捕获了组件传递的错误时执行。
  • onActivated:当组件被插入到DOM中激活时执行。
  • onDeactivated:当组件从DOM中被移除时执行。

生命周期绑定JS脚本

  1. 在导航树栏中,右键单击当前页面节点弹出菜单栏,单击“绑定生命周期”,弹出绑定生命周期面板。

    图6 绑定生命周期

  2. 根据实际需要,编辑JS脚本,单击“确定”保存。

相关文档