test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:58:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
fce4d95652
amis2/docs/zh-CN/components/action.md

20 KiB
Executable File
Raw Blame History

title description type group menuName icon order
Action 行为按钮 0 ⚙ 组件 Action 行为按钮 26

Action 行为按钮，是触发页面行为的主要方法之一

基本用法

我们这里简单实现一个点击按钮弹框的交互。

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

样式

尺寸

配置size，显示不同尺寸

{
  "type": "button-toolbar",
  "buttons": [
    {
      "type": "action",
      "label": "默认尺寸"
    },
    {
      "type": "action",
      "label": "极小",
      "size": "xs"
    },
    {
      "type": "action",
      "label": "小",
      "size": "sm"
    },
    {
      "type": "action",
      "label": "中等",
      "size": "md"
    },
    {
      "type": "action",
      "label": "大",
      "size": "lg"
    }
  ]
}

主题

可以配置level或者primary，显示不同样式。

{
  "type": "button-toolbar",
  "buttons": [
    {
      "type": "action",
      "label": "默认"
    },
    {
      "type": "action",
      "label": "主要",
      "level": "primary"
    },
    {
      "type": "action",
      "label": "次要",
      "level": "secondary"
    },
    {
      "type": "action",
      "label": "成功",
      "level": "success"
    },
    {
      "type": "action",
      "label": "警告",
      "level": "warning"
    },
    {
      "type": "action",
      "label": "危险",
      "level": "danger"
    },
    {
      "type": "action",
      "label": "浅色",
      "level": "light"
    },
    {
      "type": "action",
      "label": "深色",
      "level": "dark"
    },
    {
      "type": "action",
      "label": "链接",
      "level": "link"
    }
  ]
}

图标

可以配置icon配置项，实现按钮显示图标

{
  "label": "弹框",
  "type": "action",
  "actionType": "dialog",
  "icon": "fa fa-plus",
  "dialog": {
    "title": "弹框",
    "body": "这是个简单的弹框。"
  }
}

icon 也可以是 url 地址，比如

{
  "label": "弹框",
  "type": "action",
  "actionType": "dialog",
  "icon": "../../../examples/static/diamond.svg",
  "dialog": {
    "title": "弹框",
    "body": "这是个简单的弹框。"
  }
}

如果label配置为空字符串，可以只显示icon

{
  "label": "",
  "type": "action",
  "actionType": "dialog",
  "icon": "fa fa-plus",
  "dialog": {
    "title": "弹框",
    "body": "这是个简单的弹框。"
  }
}

操作前确认

可以通过配置confirmText，实现在任意操作前，弹出提示框确认是否进行该操作。

{
    "label": "ajax请求",
    "type": "button",
    "actionType": "ajax",
    "confirmText": "确认要发出这个请求？",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm"
}

ajax 请求

通过配置"actionType":"ajax"和api，可以实现 ajax 请求。

{
    "label": "ajax请求",
    "type": "button",
    "actionType": "ajax",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm"
}

请求成功后，跳转至某个页面

配置相对路径，实现单页跳转
{
    "label": "ajax请求",
    "type": "button",
    "actionType": "ajax",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "redirect": "./getting-started"
}
配置完整路径，直接跳转指定路径
{
    "label": "ajax请求",
    "type": "button",
    "actionType": "ajax",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "redirect": "https://www.baidu.com/"
}

请求成功后，显示反馈弹框

{
    "type": "button",
    "label": "ajax 反馈弹框",
    "actionType": "ajax",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "feedback": {
        "title": "操作成功",
        "body": "xxx 已操作成功"
    }
}

更多内容查看Dialog 文档

请求成功后，刷新目标组件

  1. 目标组件需要配置 name 属性
  2. Action 上添加 "reload": "xxx"，xxx 为目标组件的 name 属性值，如果配置多个组件，name 用逗号分隔，另外如果想让 reload 的时候再携带些数据可以类似这样配置 {"reload": "xxx?a=${a}&b=${b}"}, 这样不仅让目标组件刷新，同时还会把当前环境中的数据 a 和 b 传递给 xxx.
{
  "type": "page",
  "body": [
    {
      "type": "button",
      "label": "ajax 请求",
      "actionType": "ajax",
      "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
      "reload": "crud"
    },
    {
      "type": "divider"
    },
    {
      "type": "crud",
      "name": "crud",
      "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample?waitSeconds=1",
      "columns": [
        {
            "name": "id",
            "label": "ID"
        },
        {
            "name": "engine",
            "label": "Rendering engine"
        },
        {
            "name": "browser",
            "label": "Browser"
        },
        {
            "name": "platform",
            "label": "Platform(s)"
        },
        {
            "name": "version",
            "label": "Engine version"
        },
        {
            "name": "grade",
            "label": "CSS grade"
        }
      ]
    }
  ]
}

配置 "reload": "window" 可刷新当前页面

自定义 toast 文字

可以通过配置messages，自定义接口返回toast信息

{
    "type": "button",
    "label": "ajax 请求",
    "actionType": "ajax",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "messages": {
        "success": "成功了！欧耶",
        "failed": "失败了呢。。"
    }
}

属性表

属性名 类型 默认值 说明
api Api - 请求地址，参考 api 格式说明。
redirect 模板字符串 - 指定当前请求结束后跳转的路径，可用 ${xxx} 取值。
feedback DialogObject - 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考Dialog
messages object - success：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。failed：ajax 操作失败提示。

跳转链接

单页跳转

{
    "label": "进入介绍页",
    "type": "button",
    "level": "info",
    "actionType": "link",
    "link": "../index"
}

属性表

属性名 类型 默认值 说明
actionType string link 单页跳转
link string link 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 ${xxx} 取值。

直接跳转

{
    "label": "打开 Baidu",
    "type": "button",
    "level": "success",
    "actionType": "url",
    "url": "http://www.baidu.com"
}

属性表

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

弹框

{
  "label": "Dialog Form",
  "type": "button",
  "level": "primary",
  "actionType": "dialog",
  "dialog": {
    "title": "表单设置",
    "body": {
      "type": "form",
      "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
      "controls": [
        {
          "type": "text",
          "name": "text",
          "label": "文本"
        }
      ]
    }
  }
}

弹框结合 reload 刷新下拉框的例子

下面是一种典型场景，有个一个下拉框，然后有个按钮能弹框新增数据，新增了之后需要下拉框重新拉取最新列表（这个例子因为没实现新增功能，所以看不出更新，如果看网络请求会发现重新请求了一次）。

{
    "type": "form",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "name": "myForm",
    "controls": [
        {
          "type": "select",
          "name": "group",
          "label": "分组",
          "source": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/getOptions"
        },
        {
          "label": "新增分组",
          "type": "button",
          "level": "primary",
          "actionType": "dialog",
          "reload": "myForm.group",
          "dialog": {
            "title": "新增分组",
            "body": {
              "type": "form",
              "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
              "controls": [
                {
                  "type": "text",
                  "name": "groupName",
                  "label": "分组名"
                }
              ]
            }
          }
        }
    ]
}

可以看到 reload 是 myForm.group，第一个是表单的 name，第二个是下拉框的 name。

属性表

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

抽屉

{
  "label": "Drawer Form",
  "type": "button",
  "actionType": "drawer",
  "drawer": {
    "title": "表单设置",
    "body": {
      "type": "form",
      "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=1",
      "controls": [
        {
          "type": "text",
          "name": "text",
          "label": "文本"
        }
      ]
    }
  }
}

属性表

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

复制文本

{
    "label": "复制一段文本",
    "type": "button",
    "actionType": "copy",
    "content": "http://www.baidu.com"
}

属性表

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

刷新其他组件

属性表

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

组件特有的行为类型

表单中表格添加一行

该 actionType 为FormItem-Table专用行为

重置表单

在 form 中，配置"type": "reset"的按钮，可以实现重置表单数据的功能

{
    "type": "form",
    "api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
    "controls": [
        {
            "type": "text",
            "name": "username",
            "placeholder": "请输入用户名",
            "label": "用户名"
        },
        {
            "type": "password",
            "name": "password",
            "label": "密码",
            "placeholder": "请输入密码"
        },
        {
            "type": "checkbox",
            "name": "rememberMe",
            "option": "记住登录"
        }
    ],
    "actions": [
        {
            "type": "reset",
            "label": "重置"
        },
        {
            "type": "submit",
            "label": "提交",
            "level": "primary"
        }
    ]
}

通用属性表

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

属性名 类型 默认值 说明
type string action 指定为 Page 渲染器。
actionType string - 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：ajax、link、url、drawer、dialog、confirm、cancel、prev、next、copy、close。
label string - 按钮文本。可用 ${xxx} 取值。
level string default 按钮样式，支持：link、primary、secondary、info、success、warning、danger、light、dark、default。
size string - 按钮大小，支持：xs、sm、md、lg。
icon string - 设置图标，例如fa fa-plus。
iconClassName string - 给图标上添加类名。
active boolean - 按钮是否高亮。
activeLevel string - 按钮高亮时的样式，配置支持同level。
activeClassName string is-active 给按钮高亮添加类名。
block boolean - 用display:"block"来显示按钮。
confirmText 模板 - 当设置后，操作在开始前会询问用户。可用 ${xxx} 取值。
reload string - 指定此次操作完后，需要刷新的目标组件名字（组件的name值，自己配置的），多个请用 , 号隔开。
tooltip string - 鼠标停留时弹出该段文字，也可以配置对象类型：字段为title和content。可用 ${xxx} 取值。
disabledTip string - 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为title和content。可用 ${xxx} 取值。
tooltipPlacement string top 如果配置了tooltip或者disabledTip，指定提示信息位置，可配置top、bottom、left、right。
close boolean or string - 当action配置在dialog或drawer的actions中时，配置为true指定此次操作完后关闭当前dialog或drawer。当值为字符串，并且是祖先层弹框的名字的时候，会把祖先弹框关闭掉。
required Array<string> - 配置字符串数组，指定在form中进行操作之前，需要指定的字段名的表单项通过验证