深入理解baidu/amis中的事件动作机制-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00089/article/details/148374952

深入理解baidu/amis中的事件动作机制

amis 前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/gh_mirrors/am/amis

什么是事件动作机制

baidu/amis框架提供了一套强大的事件动作机制，允许开发者通过配置的方式实现复杂的UI交互逻辑。这种机制将用户操作（事件）与系统响应（动作）解耦，使得前端交互开发更加灵活和高效。

事件动作的核心概念

事件监听与响应

在amis中，事件动作机制基于"监听-响应"模式工作：

事件监听：组件可以监听各种用户交互事件，如点击、鼠标移入、值变化等
动作响应：当事件触发时，执行预定义的动作序列，如发送请求、打开弹窗等

基本配置结构

事件动作通过onEvent属性配置，其基本结构如下：

{
  "type": "button",
  "onEvent": {
    "click": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msg": "点击事件触发"
          }
        }
      ]
    }
  }
}

事件动作的详细分类

1. 事件类型

渲染器事件

每个amis组件都提供了一系列内置事件，例如：

按钮：click, mouseenter, mouseleave
表单：submit, submitSucc, submitFail
输入框：change, focus, blur

广播事件

开发者可以自定义事件名称，实现跨组件通信：

{
  "type": "button",
  "label": "发送广播",
  "onEvent": {
    "click": {
      "actions": [
        {
          "actionType": "broadcast",
          "eventName": "custom_event",
          "args": {
            "data": "自定义数据"
          }
        }
      ]
    }
  }
}

2. 动作类型

通用动作

toast：显示提示信息
ajax：发送HTTP请求
dialog：打开模态对话框
drawer：打开抽屉
link：页面跳转
reload：刷新组件
back：浏览器后退
forward：浏览器前进
refresh：刷新页面

组件专有动作

不同组件有特定的动作，例如：

表单：submit, validate, reset
表格：selectAll, clearSelection
树形控件：expandAll, collapseAll

自定义动作

custom：执行自定义JavaScript代码
broadcast：发送广播事件
parallel：并行执行多个动作

事件动作的高级用法

1. 数据上下文

在执行动作时，可以访问多种上下文数据：

事件数据：通过${event.data}获取
组件数据域：通过${__rendererData}获取
全局数据：通过${xxx}获取页面级数据

{
  "type": "input-text",
  "name": "username",
  "onEvent": {
    "change": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msg": "当前值：${username}"
          }
        }
      ]
    }
  }
}

2. 动作链

可以配置多个动作按顺序执行：

"actions": [
  {
    "actionType": "validate",
    "componentId": "form1"
  },
  {
    "actionType": "ajax",
    "api": {
      "url": "/api/submit",
      "method": "post"
    }
  },
  {
    "actionType": "toast",
    "args": {
      "msg": "提交成功"
    }
  }
]

3. 条件执行

通过expression属性实现条件判断：

{
  "actionType": "toast",
  "expression": "${event.data.responseStatus === 0}",
  "args": {
    "msg": "操作成功"
  }
}

实际应用示例

表单提交后处理

{
  "type": "form",
  "api": "/api/submit",
  "onEvent": {
    "submitSucc": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msg": "提交成功"
          }
        },
        {
          "actionType": "reload",
          "componentId": "table1"
        }
      ]
    }
  }
}

复杂交互流程

{
  "type": "button",
  "label": "复杂操作",
  "onEvent": {
    "click": {
      "actions": [
        {
          "actionType": "dialog",
          "dialog": {
            "title": "确认操作",
            "body": "确定要执行此操作吗？",
            "actions": [
              {
                "type": "button",
                "label": "确认",
                "actionType": "confirm"
              }
            ]
          },
          "waitForAction": true,
          "outputVar": "dialogResult"
        },
        {
          "actionType": "ajax",
          "expression": "${dialogResult.confirmed}",
          "api": {
            "url": "/api/do-something",
            "method": "post"
          }
        }
      ]
    }
  }
}