amis2/docs/renderers/Action.md

12 KiB
Raw Blame History

Action

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

通用配置项

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

属性名 类型 默认值 说明
type string action 指定为 Page 渲染器。
actionType string - 【必填】这是action最核心的配置来指定该action的作用类型支持ajaxlinkurldawerdialogconfirmcancelprevnextcopyclose
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

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

ajax

属性名 类型 默认值 说明
actionType string ajax 发送请求
api stringApiObject - 请求地址,参考 api 格式说明。
redirect string - 指定当前请求结束后跳转的路径,可用 ${xxx} 取值。
feedback DialogObject - 如果 ajax 类型的,当 ajax 返回正常后,还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考Dialog
messages object - successajax 操作成功后提示,可以不指定,不指定时以 api 返回为准。failedajax 操作失败提示。
属性名 类型 默认值 说明
actionType string link 单页跳转
link string link 用来指定跳转地址,跟 url 不同的是,这是单页跳转方式,不会渲染浏览器,请指定 amis 平台内的页面。可用 ${xxx} 取值。

url

属性名 类型 默认值 说明
actionType string url 页面跳转
url string - 按钮点击后,会打开指定页面。可用 ${xxx} 取值。
blank boolean false 如果为 true 将在新tab页面打开。

dialog

属性名 类型 默认值 说明
actionType string dialog 点击后显示一个弹出框
dialog stringDialogObject - 指定弹框内容,格式可参考Dialog
nextCondition boolean - 可以用来设置下一条数据的条件,默认为 true

drawer

属性名 类型 默认值 说明
actionType string drawer 点击后显示一个侧边栏
drawer stringDrawerObject - 指定弹框内容,格式可参考Drawer

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值),多个请用 , 号隔开。

其他配置项

属性名 类型 默认值 说明
close boolean false action配置在dialogdraweractions中时,配置为true指定此次操作完后关闭当前dialogdrawer
required Array<string> - 配置字符串数组,指定在form中进行操作之前,需验证必填的表单项字段

示例:

  • ajax 当按钮点击时,发送 ajax 请求,发送的数据取决于所在的容器里面。

    {
      "data": {
        "user": "no one"
      },
      "body": {
        "label": "Post",
        "type": "button",
        "actionType": "ajax",
        "confirmText": "确定?",
        "api": "/api/mock2/form/saveForm",
        "messages": {
          "success": "发送成功"
        }
      }
    }
    
  • link 当按钮点击后,无刷新进入 amis 内部某个页面。

      {
        "body": {
          "label": "进入简介页面",
          "type": "button",
          "level": "info",
          "actionType": "link",
          "link": "/docs/index"
        }
      }
    
  • url 当按钮点击后,新窗口打开指定页面。

      {
        "body": {
          "label": "打开 Baidu",
          "type": "button",
          "level": "success",
          "actionType": "url",
          "url": "raw:http://www.baidu.com"
        }
      }
    
  • dialog 当按钮点击后,弹出一个对话框。 关于 dialog 配置,请查看 Dialog 模型

      {
        "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 当按钮点击后,弹出一个抽出式对话框。 关于 drawer 配置,请查看 Drawer 模型

      {
        "body": {
          "label": "Drawer Form",
          "type": "button",
          "level": "primary",
          "actionType": "drawer",
          "drawer": {1
            "title": "表单设置",
            "body": {
              "type": "form",
              "api": "/api/mock2/form/saveForm?waitSeconds=1",
              "controls": [
                {
                  "type": "text",
                  "name": "text",
                  "label": "文本"
                }
              ]
            }
          }
        }
      }