amis/docs/renderers/Action.md

12 KiB
Raw Blame History

Action

Action 是一种特殊的渲染器,它本身是一个按钮,同时它能触发事件。

{
  "label": "弹个框",
  "type": "button",
  "level": "dark",
  "actionType": "dialog",
  "dialog": {
    "title": "弹框",
    "body": "这是个简单的弹框。"
  }
}

除了能弹框,它还能设定很多行为比如:提交表单、发送 ajax、页面跳转、关闭弹框、复制文本等等。

通用配置项

所有actionType都支持的通用配置项

属性名 类型 默认值 说明
type string action 指定为 Page 渲染器。
actionType string - 【必填】这是 action 最核心的配置,来指定该 action 的作用类型,支持:ajaxlinkurldrawerdialogconfirmcancelprevnextcopyclose
label string - 按钮文本。可用 ${xxx} 取值。
level string default 按钮样式,支持:linkprimarysecondaryinfosuccesswarningdangerlightdarkdefault
size string - 按钮大小,支持:xssmmdlg
icon string - 设置图标,例如fa fa-plus
iconClassName string - 给图标上添加类名。
active boolean - 按钮是否高亮。
activeLevel string - 按钮高亮时的样式,配置支持同level
activeClassName string is-active 给按钮高亮添加类名。
block boolean - display:"block"来显示按钮。
confirmText string - 当设置后,操作在开始前会询问用户。可用 ${xxx} 取值。
reload string - 指定此次操作完后,需要刷新的目标组件名字(组件的name值,自己配置的),多个请用 , 号隔开。
tooltip string - 鼠标停留时弹出该段文字,也可以配置对象类型:字段为titlecontent。可用 ${xxx} 取值。
disabledTip string - 被禁用后鼠标停留时弹出该段文字,也可以配置对象类型:字段为titlecontent。可用 ${xxx} 取值。
tooltipPlacement string top 如果配置了tooltip或者disabledTip,指定提示信息位置,可配置topbottomleftright
close boolean - action配置在dialogdraweractions中时,配置为true指定此次操作完后关闭当前dialogdrawer
required Array<string> - 配置字符串数组,指定在form中进行操作之前,需要指定的字段名的表单项通过验证

下面会分别介绍每种类型的 Action 配置项

ajax

属性名 类型 默认值 说明
actionType string ajax 发送请求
api stringApiObject - 请求地址,参考 api 格式说明。
redirect string - 指定当前请求结束后跳转的路径,可用 ${xxx} 取值。
feedback DialogObject - 如果 ajax 类型的,当 ajax 返回正常后,还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考Dialog
feedback.visibleOn string - 可以用来配置 feedback 弹框出现的条件。
feedback.skipRestOnCancel boolean - 如果配置了,在 feedback 弹窗里面,如果用户点了取消,那么这个按钮的其他动作也不做了。
messages object - successajax 操作成功后提示,可以不指定,不指定时以 api 返回为准。failedajax 操作失败提示。
{
  "data": {
    "user": "no one"
  },
  "body": {
    "label": "Post",
    "type": "button",
    "actionType": "ajax",
    "confirmText": "确定?",
    "api": "/api/mock2/form/saveForm",
    "messages": {
      "success": "发送成功"
    }
  }
}
属性名 类型 默认值 说明
actionType string link 单页跳转
link string link 用来指定跳转地址,跟 url 不同的是,这是单页跳转方式,不会渲染浏览器,请指定 amis 平台内的页面。可用 ${xxx} 取值。
{
  "body": {
    "label": "进入简介页面",
    "type": "button",
    "level": "info",
    "actionType": "link",
    "link": "/docs/index"
  }
}

url

属性名 类型 默认值 说明
actionType string url 页面跳转
url string - 按钮点击后,会打开指定页面。可用 ${xxx} 取值。
blank boolean false 如果为 true 将在新 tab 页面打开。
{
  "body": {
    "label": "打开 Baidu",
    "type": "button",
    "level": "success",
    "actionType": "url",
    "url": "raw:http://www.baidu.com"
  }
}

注意:由于 amis 平台内 http 地址会被替换成 proxy 地址,所以在 amis 平台内使用请加上 raw: 作为前缀。 比如raw:http://www.baidu.com

dialog

属性名 类型 默认值 说明
actionType string dialog 点击后显示一个弹出框
dialog stringDialogObject - 指定弹框内容,格式可参考Dialog
nextCondition boolean - 可以用来设置下一条数据的条件,默认为 true
{
  "body": {
    "label": "Dialog Form",
    "type": "button",
    "level": "primary",
    "actionType": "dialog",
    "dialog": {
      "title": "表单设置",
      "body": {
        "type": "form",
        "api": "/api/mock2/form/saveForm?waitSeconds=1",
        "controls": [
          {
            "type": "text",
            "name": "text",
            "label": "文本"
          }
        ]
      }
    }
  }
}

drawer

属性名 类型 默认值 说明
actionType string drawer 点击后显示一个侧边栏
drawer stringDrawerObject - 指定弹框内容,格式可参考Drawer
  {
    "body": {
      "label": "Drawer Form",
      "type": "button",
      "level": "primary",
      "actionType": "drawer",
      "drawer": {
        "title": "表单设置",
        "body": {
          "type": "form",
          "api": "/api/mock2/form/saveForm?waitSeconds=1",
          "controls": [
            {
              "type": "text",
              "name": "text",
              "label": "文本"
            }
          ]
        }
      }
    }
  }

copy

属性名 类型 默认值 说明
actionType string copy 复制一段内容到粘贴板
content string - 指定复制的内容。可用 ${xxx} 取值。

reload

属性名 类型 默认值 说明
actionType string reload 刷新目标组件
target string - 需要刷新的目标组件名字(组件的name值,自己配置的),多个请用 , 号隔开。

add

该 actionType 为FormItem-Table专用

属性名 类型 默认值 说明
actionType string add 给指定FormItem-Table添加一条数据,
target string - 指定FormItem-Table的名字(Tablename值),多个请用 , 号隔开。