amis2/docs/zh-CN/concepts/action.md

1.7 KiB
Raw Permalink Blame History

title description type group menuName icon order
行为 0 💡 概念 行为 12

页面的交互操作,例如:提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板等等操作,都可以视作页面的一种行为

在 amis 中,大部分 行为 是跟 行为按钮组件 进行绑定的,也就是说,当你想要配置一个行为,大部分情况下你应该遵循下面的步骤:

  1. 添加一个 行为按钮组件
  2. 配置当前 行为类型actionType
  3. 根据当前行为类型,配置你想要的 属性

如何配置行为?

通过行为按钮

{
    "type": "action",
    "label": "发出一个请求",
    "actionType": "ajax",
    "api": "/api/mock2/form/saveForm"
}
  1. page内容区中,添加一个action行为按钮组件
  2. 配置当前行为类型是 ajax即发送一个 ajax 请求)
  3. 配置请求 api值为 API 类型

现在点击该按钮,你会发现浏览器发出了这个ajax请求。

很简单是吧?我们再来一个例子:

{
    "type": "action",
    "label": "弹个框",
    "actionType": "dialog",
    "dialog": {
      "title": "弹框",
      "body": "Hello World!"
    }
}

这次我们配置actionTypedialog,意味着点击该按钮会弹出一个模态框,并配置dialog内容,来显示字符串Hello World!

dialog是容器,也就意味着可以在body属性中配置其他组件

完整的行为列表可以查看 action组件

组件所支持的行为

一些特殊组件,例如 Chart 组件 中的图表点击行为,可以直接配置clickAction,来配置行为对象。