mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 05:28:37 +08:00
12 KiB
12 KiB
Action
Action 是一种特殊的渲染器,它本身是一个按钮,同时它能触发事件。
通用配置项
所有actionType
都支持的通用配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
action |
指定为 Page 渲染器。 |
actionType | string |
- | 【必填】这是action最核心的配置,来指定该action的作用类型,支持:ajax 、link 、url 、dawer 、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 | string |
- | 当设置后,操作在开始前会询问用户。可用 ${xxx} 取值。 |
reload | string |
- | 指定此次操作完后,需要刷新的目标组件名字(组件的name 值,自己配置的),多个请用 , 号隔开。 |
tooltip | string |
- | 鼠标停留时弹出该段文字,也可以配置对象类型:字段为title 和content 。可用 ${xxx} 取值。 |
disabledTip | string |
- | 被禁用后鼠标停留时弹出该段文字,也可以配置对象类型:字段为title 和content 。可用 ${xxx} 取值。 |
tooltipPlacement | string |
top |
如果配置了tooltip 或者disabledTip ,指定提示信息位置,可配置top 、bottom 、left 、right 。 |
下面会分别介绍每种类型的Action配置项
ajax
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
actionType | string |
ajax |
发送请求 |
api | string 或 ApiObject |
- | 请求地址,参考 api 格式说明。 |
redirect | string |
- | 指定当前请求结束后跳转的路径,可用 ${xxx} 取值。 |
feedback | DialogObject |
- | 如果 ajax 类型的,当 ajax 返回正常后,还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考Dialog |
messages | object |
- | success :ajax 操作成功后提示,可以不指定,不指定时以 api 返回为准。failed :ajax 操作失败提示。 |
link
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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 | string 或 DialogObject |
- | 指定弹框内容,格式可参考Dialog |
nextCondition | boolean |
- | 可以用来设置下一条数据的条件,默认为 true 。 |
drawer
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
actionType | string |
drawer |
点击后显示一个侧边栏 |
drawer | string 或 DrawerObject |
- | 指定弹框内容,格式可参考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 的名字(Table 的name 值),多个请用 , 号隔开。 |
其他配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
close | boolean |
false |
当action 配置在dialog 或drawer 的actions 中时,配置为true 指定此次操作完后关闭当前dialog 或drawer 。 |
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": "文本" } ] } } } }