test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 11:58:10 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #7016 from hsm-lv/chore-docs

Browse Source 
docs: 事件动作文档补充demo
This commit is contained in:
hsm-lv 2023-05-29 16:57:28 +08:00 committed by GitHub
commit 1ca4a73b93
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
67 changed files with 3785 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
docs/zh-CN/components/action.md
View File

@ -1031,23 +1031,96 @@ action 还可以使用 `body` 来渲染其他组件，让那些不支持行为
| confirmText | [模板](../../docs/concepts/template) | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |
| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
| disabledTip | `'string' \| 'TooltipObject'` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
| disabledTip | `'string' \| 'TooltipObject'` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`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`中进行操作之前，需要指定的字段名的表单项通过验证 |
### TooltipObject
`TooltipObject` 为 [tooltip-wrapper](./tooltip) 属性配置，但是不需要配置如下属性 `type`、`body`、`wrapperComponent`、`className`、`inline`。
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| ---------- | -------------------------------------- | -------------- |
| click | `nativeEvent: MouseEvent` 鼠标事件对象 | 点击时触发 |
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
| 事件名称 | 事件参数 | 说明 |
| ---------- | -------- | -------------- |
| click | - | 点击时触发 |
| mouseenter | - | 鼠标移入时触发 |
| mouseleave | - | 鼠标移出时触发 |
### click
鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "button",
"label": "Button",
"onEvent": {
"click": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}
```
### mouseenter
鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "button",
"label": "Button",
"onEvent": {
"mouseenter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}
```
### mouseleave
鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "button",
"label": "Button",
"onEvent": {
"mouseleave": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}
```
## 动作表

2
docs/zh-CN/components/app.md
View File

@ -73,7 +73,7 @@ order: 99
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| -------- | -------- | --------------------------------------------------- |

219
docs/zh-CN/components/carousel.md
View File

@ -134,41 +134,77 @@ itemSchema: {
## 属性表
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
| ---------------------------- | --------- | ---------------------- | ------------------------------------------------------- | --- |
| type | `string` | `"carousel"` | 指定为 Carousel 渲染器 |
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
| options | `array` | `[]` | 轮播面板数据 |
| options.image | `string` | | 图片链接 |
| options.href | `string` | | 图片打开网址的链接 |
| options.imageClassName | `string` | | 图片类名 |
| options.title | `string` | | 图片标题 |
| options.titleClassName | `string` | | 图片标题类名 |
| options.description | `string` | | 图片描述 |
| options.descriptionClassName | `string` | | 图片描述类名 |
| options.html | `string` | | HTML 自定义，同[Tpl](./tpl)一致 |
| itemSchema | `object` | | 自定义`schema`来展示数据 |
| auto | `boolean` | `true` | 是否自动轮播 |
| interval | `string` | `5s` | 切换动画间隔 |
| duration | `number` | `500` | 切换动画时长（ms） |
| width | `string` | `auto` | 宽度 |
| height | `string` | `200px` | 高度 |
| controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 |
| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 |
| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |
| thumbMode | `string` | `"cover" \| "contain"` | 图片默认缩放模式 |
| multiple | `object` | `{count: 1}` | 多图展示，count表示展示的数量 | `2.8.1` |
| alwaysShowArrow | `boolean` | `false` | 是否一直显示箭头，为false时鼠标hover才会显示 | `2.8.1` |
| icons | {prev: `SchemaCollection`; next: `SchemaCollection`;} | | 自定义箭头图标 | `2.8.1` |
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
| ---------------------------- | ----------------------------------------------------- | ---------------------- | ------------------------------------------------------- | ------- |
| type | `string` | `"carousel"` | 指定为 Carousel 渲染器 |
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
| options | `array` | `[]` | 轮播面板数据 |
| options.image | `string` | | 图片链接 |
| options.href | `string` | | 图片打开网址的链接 |
| options.imageClassName | `string` | | 图片类名 |
| options.title | `string` | | 图片标题 |
| options.titleClassName | `string` | | 图片标题类名 |
| options.description | `string` | | 图片描述 |
| options.descriptionClassName | `string` | | 图片描述类名 |
| options.html | `string` | | HTML 自定义，同[Tpl](./tpl)一致 |
| itemSchema | `object` | | 自定义`schema`来展示数据 |
| auto | `boolean` | `true` | 是否自动轮播 |
| interval | `string` | `5s` | 切换动画间隔 |
| duration | `number` | `500` | 切换动画时长（ms） |
| width | `string` | `auto` | 宽度 |
| height | `string` | `200px` | 高度 |
| controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 |
| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 |
| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |
| thumbMode | `string` | `"cover" \| "contain"` | 图片默认缩放模式 |
| multiple | `object` | `{count: 1}` | 多图展示，count 表示展示的数量 | `2.8.1` |
| alwaysShowArrow | `boolean` | `false` | 是否一直显示箭头，为 false 时鼠标 hover 才会显示 | `2.8.1` |
| icons | {prev: `SchemaCollection`; next: `SchemaCollection`;} | | 自定义箭头图标 | `2.8.1` |
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| -------- | -------------------------------------------------------------------------------- | ---------------- |
| change | `activeIndex: number` 激活图片的索引 <br /> `prevIndex: number` 上一张图片的索引 | 轮播图切换时触发 |
### change
```schema: scope="body"
{
"type": "carousel",
"auto": false,
"thumbMode": "cover",
"animation": "slide",
"height": 300,
"options": [
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
},
{
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
},
{
"thumbMode": "contain",
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
}
],
"onEvent": {
"change": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "滚动至${activeIndex}"
}
}
]
}
}
}
```
## 动作表
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
@ -178,3 +214,132 @@ itemSchema: {
| next | - | 下一张 |
| prev | - | 上一张 |
| goto-image | `activeIndex: number` 切换图片的索引 | 切换轮播图 |
### next
```schema: scope="body"
[
{
"type": "action",
"label": "下一张",
"className": "mr-3 mb-3",
"onEvent": {
"click": {
"actions": [
{
"actionType": "next",
"componentId": "carousel_001"
}
]
}
}
},
{
"type": "carousel",
"id": "carousel_001",
"auto": false,
"thumbMode": "cover",
"animation": "slide",
"height": 300,
"options": [
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
},
{
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
},
{
"thumbMode": "contain",
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
}
]
}
]
```
### prev
```schema: scope="body"
[
{
"type": "action",
"label": "上一张",
"className": "mr-3 mb-3",
"onEvent": {
"click": {
"actions": [
{
"actionType": "prev",
"componentId": "carousel_002"
}
]
}
}
},
{
"type": "carousel",
"id": "carousel_002",
"auto": false,
"thumbMode": "cover",
"animation": "slide",
"height": 300,
"options": [
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
},
{
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
},
{
"thumbMode": "contain",
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
}
]
}
]
```
### goto-image
```schema: scope="body"
[
{
"type": "action",
"label": "滚动到第三张",
"className": "mr-3 mb-3",
"onEvent": {
"click": {
"actions": [
{
"actionType": "goto-image",
"componentId": "carousel_003",
"args": {
"activeIndex": "${index}"
}
}
]
}
}
},
{
"type": "carousel",
"id": "carousel_003",
"auto": false,
"thumbMode": "cover",
"animation": "slide",
"height": 300,
"options": [
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
},
{
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
},
{
"thumbMode": "contain",
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
}
]
}
]
```

598
docs/zh-CN/components/chart.md
View File

@ -697,7 +697,7 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
> 2.4.1 及以上版本
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| ------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------- |
@ -706,6 +706,388 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
| mouseover | 查看[ECharst 事件与行为文档](https://echarts.apache.org/handbook/zh/concepts/event/) | 鼠标悬浮时触发 |
| legendselectchanged | 查看[ECharst 事件与行为文档](https://echarts.apache.org/handbook/zh/concepts/event/) | 切换图例选中状态时触发 |
### init
```schema: scope="body"
{
"type": "chart",
"id": "chart01",
"api": "/api/mock2/chart/chartData",
"config": {
"xAxis": {
"type": "category",
"data": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": "${line || []}",
"type": "line"
}
]
},
"onEvent": {
"init": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "init"
}
}
]
}
}
}
```
### click
用户鼠标操作点击时触发，例如点击下图蓝色线条上的数据点，将弹出详情。
```schema: scope="body"
{
"type": "chart",
"onEvent": {
"click": {
"actions": [
{
"actionType": "dialog",
"dialog": {
"title": "详情",
"body": [
{
"type": "tpl",
"tpl": "<span>当前选中值 ${value|json}<span>"
},
{
"type": "chart",
"api": "/api/mock2/chart/chart1"
}
]
}
}
]
}
},
"config": {
"title": {
"text": "极坐标双数值轴"
},
"legend": {
"data": [
"line"
]
},
"polar": {
"center": [
"50%",
"54%"
]
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross"
}
},
"angleAxis": {
"type": "value",
"startAngle": 0
},
"radiusAxis": {
"min": 0
},
"series": [
{
"coordinateSystem": "polar",
"name": "line",
"type": "line",
"showSymbol": false,
"data": [
[
0,
0
],
[
0.03487823687206265,
1
],
[
0.06958655048003272,
2
],
[
0.10395584540887964,
3
],
[
0.13781867790849958,
4
],
[
0.17101007166283433,
5
],
[
0.2033683215379001,
6
],
[
0.2347357813929454,
7
],
[
0.26495963211660245,
8
],
[
0.2938926261462365,
9
],
[
0.3213938048432697,
10
]
]
}
],
"animationDuration": 2000
}
}
```
### mouseover
用户鼠标悬浮时触发，例如炫富到下图蓝色线条上的数据点，将弹出详情。
```schema: scope="body"
{
"type": "chart",
"onEvent": {
"mouseover": {
"actions": [
{
"actionType": "dialog",
"dialog": {
"title": "详情",
"body": [
{
"type": "tpl",
"tpl": "<span>当前选中值 ${value|json}<span>"
},
{
"type": "chart",
"api": "/api/mock2/chart/chart1"
}
]
}
}
]
}
},
"config": {
"title": {
"text": "极坐标双数值轴"
},
"legend": {
"data": [
"line"
]
},
"polar": {
"center": [
"50%",
"54%"
]
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross"
}
},
"angleAxis": {
"type": "value",
"startAngle": 0
},
"radiusAxis": {
"min": 0
},
"series": [
{
"coordinateSystem": "polar",
"name": "line",
"type": "line",
"showSymbol": false,
"data": [
[
0,
0
],
[
0.03487823687206265,
1
],
[
0.06958655048003272,
2
],
[
0.10395584540887964,
3
],
[
0.13781867790849958,
4
],
[
0.17101007166283433,
5
],
[
0.2033683215379001,
6
],
[
0.2347357813929454,
7
],
[
0.26495963211660245,
8
],
[
0.2938926261462365,
9
],
[
0.3213938048432697,
10
]
]
}
],
"animationDuration": 2000
}
}
```
### legendselectchanged
图例开关的行为会触发 legendselectchanged 事件。
```schema: scope="body"
{
"type": "chart",
"onEvent": {
"legendselectchanged": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "${event.data|json}"
}
}
]
}
},
"config": {
"title": {
"text": "极坐标双数值轴"
},
"legend": {
"data": [
"line"
]
},
"polar": {
"center": [
"50%",
"54%"
]
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross"
}
},
"angleAxis": {
"type": "value",
"startAngle": 0
},
"radiusAxis": {
"min": 0
},
"series": [
{
"coordinateSystem": "polar",
"name": "line",
"type": "line",
"showSymbol": false,
"data": [
[
0,
0
],
[
0.03487823687206265,
1
],
[
0.06958655048003272,
2
],
[
0.10395584540887964,
3
],
[
0.13781867790849958,
4
],
[
0.17101007166283433,
5
],
[
0.2033683215379001,
6
],
[
0.2347357813929454,
7
],
[
0.26495963211660245,
8
],
[
0.2938926261462365,
9
],
[
0.3213938048432697,
10
]
]
}
],
"animationDuration": 2000
}
}
```
## 动作表
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
@ -716,3 +1098,217 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
| setValue | `value: object` 更新的数据 | 更新数据，等于更新图表所依赖数据域中的变量 |
2.4.1 及以上版本，除了以上动作，还支持直接触发[ECharts 组件行为](https://echarts.apache.org/handbook/zh/concepts/event/#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA)，即通过`actionType`指定行为名称，行为配置通过`args: {动作配置项名称: xxx}`来配置具体的参数。
### reload
```schema: scope="body"
[
{
"type": "button",
"label": "刷新请求",
"onEvent": {
"click": {
"actions": [
{
"componentId": "chart01",
"actionType": "reload"
}
]
}
}
},
{
"type": "chart",
"id": "chart01",
"api": "/api/mock2/chart/chartData",
"config": {
"xAxis": {
"type": "category",
"data": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": "${line || []}",
"type": "line"
}
]
}
}
]
```
### setValue
```schema: scope="body"
[
{
"type": "button",
"label": "更新数据",
"onEvent": {
"click": {
"actions": [
{
"componentId": "chart02",
"actionType": "setValue",
"args": {
"value": {"line":[98,41,51,2,90,40]}
}
}
]
}
}
},
{
"type": "chart",
"id": "chart02",
"api": "/api/mock2/chart/chartData",
"config": {
"xAxis": {
"type": "category",
"data": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": "${line || []}",
"type": "line"
}
]
}
}
]
```
### 其他动作
```schema: scope="body"
[
{
"type": "button",
"label": "显示提示框",
"onEvent": {
"click": {
"actions": [
{
"componentId": "chart03",
"actionType": "showTip",
"args": {
"type": "showTip",
"seriesIndex": 0,
"name": "",
"dataIndex": 8
}
}
]
}
}
},
{
"type": "chart",
"id": "chart03",
"config": {
"title": {
"text": "极坐标双数值轴"
},
"legend": {
"data": [
"line"
]
},
"polar": {
"center": [
"50%",
"54%"
]
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross"
}
},
"angleAxis": {
"type": "value",
"startAngle": 0
},
"radiusAxis": {
"min": 0
},
"series": [
{
"coordinateSystem": "polar",
"name": "line",
"type": "line",
"showSymbol": false,
"data": [
[
0,
0
],
[
0.03487823687206265,
1
],
[
0.06958655048003272,
2
],
[
0.10395584540887964,
3
],
[
0.13781867790849958,
4
],
[
0.17101007166283433,
5
],
[
0.2033683215379001,
6
],
[
0.2347357813929454,
7
],
[
0.26495963211660245,
8
],
[
0.2938926261462365,
9
],
[
0.3213938048432697,
10
]
]
}
],
"animationDuration": 2000
}
}
]
```

738
docs/zh-CN/components/crud.md
View File

@ -2975,3 +2975,741 @@ itemAction 里的 onClick 还能通过 `data` 参数拿到当前行的数据，
| icon | `string` | | 按钮的图标 |
| className | `string` | | 外层 CSS 类名 |
| btnClassName | `string` | | 按钮的 CSS 类名 |
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| -------------- | ----------------------------------------------------------------------- | -------------------- |
| selectedChange | `selectedItems: item[]` 已选择行<br/>`unSelectedItems: item[]` 未选择行 | 手动选择表格项时触发 |
| columnSort | `orderBy: string` 列排序列名<br/>`orderDir: string` 列排序值 | 点击列排序时触发 |
| columnFilter | `filterName: string` 列筛选列名<br/>`filterValue: string` 列筛选值 | 点击列筛选时触发 |
| columnSearch | `searchName: string` 列搜索列名<br/>`searchValue: object` 列搜索数据 | 点击列搜索时触发 |
| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 |
| columnToggled | `columns: item[]` 当前显示的列配置数据 | 点击自定义列时触发 |
| rowClick | `item: object` 行点击数据<br/>`index: number` 行索引 | 点击整行时触发 |
| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 | 移入整行时触发 |
| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 | 移出整行时触发 |
### selectedChange
在开启批量操作后才会用到，可以尝试勾选列表的行记录。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "crud",
"api": "/api/mock2/sample",
"syncLocation": false,
"onEvent": {
"selectedChange": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "已选择${event.data.selectedItems.length}条记录"
}
}
]
}
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
}
],
"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"
}
]
}
}
```
### columnSort
列排序，可以尝试点击`Browser`列右侧的排序图标。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "crud",
"api": "/api/mock2/sample",
"syncLocation": false,
"onEvent": {
"columnSort": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "orderBy：${event.data.orderBy},orderDir：${event.data.orderDir}"
}
}
]
}
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
}
],
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
}
```
### columnFilter
列过滤，可以尝试点击`Rendering engine`列右侧的筛选图标。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "crud",
"api": "/api/mock2/sample",
"syncLocation": false,
"onEvent": {
"columnFilter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "filterName：${event.data.filterName},filterValue：${event.data.filterValue}"
}
}
]
}
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
}
],
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
}
```
### columnSearch
列检索，，可以尝试点击`ID`列右侧的检索图标。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "crud",
"api": "/api/mock2/sample",
"syncLocation": false,
"onEvent": {
"columnSearch": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "searchName：${event.data.searchName},searchValue：${event.data.searchValue|json}"
}
}
]
}
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
}
],
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
}
```
### columnToggled
点击自定义列，可以尝试修改`自定义列`的配置。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "crud",
"api": "/api/mock2/sample",
"syncLocation": false,
"onEvent": {
"columnToggled": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "当前显示${event.data.columns.length}列"
}
}
]
}
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
}
],
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
}
```
### orderChange
在开启拖拽排序行记录后才会用到，排序确认后触发。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "crud",
"api": "/api/mock2/sample",
"syncLocation": false,
"draggable": true,
"onEvent": {
"orderChange": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.data.movedItems.length}行发生移动"
}
}
]
}
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
}
],
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
}
```
### rowClick
点击行记录。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "crud",
"api": "/api/mock2/sample",
"syncLocation": false,
"onEvent": {
"rowClick": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "行单击数据：${event.data.item|json}；行索引：${event.data.index}"
}
}
]
}
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
}
],
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
}
```
### rowMouseEnter
鼠标移入行记录。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "crud",
"api": "/api/mock2/sample",
"syncLocation": false,
"onEvent": {
"rowMouseEnter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "行索引：${event.data.index}"
}
}
]
}
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
}
],
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
}
```
### rowMouseLeave
鼠标移出行记录。
```schema: scope="body"
{
"type": "page",
"body": {
"type": "crud",
"api": "/api/mock2/sample",
"syncLocation": false,
"onEvent": {
"rowMouseLeave": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "行索引：${event.data.index}"
}
}
]
}
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
}
],
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
}
```
### 列的事件表
表格的默认列定义的事件如下，即 click、mouseenter、mouseleave。如果列定义是其他组件，则事件表就是这个组件对应的事件表，例如列定义是 Switch 组件，则可以监听 [Switch 的 change 事件](./form/switch#%E4%BA%8B%E4%BB%B6%E8%A1%A8)。
| 事件名称 | 事件参数 | 说明 |
| ---------- | ----------------------------------- | ---------------------------------------------- |
| click | `[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |
| mouseenter | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |
| mouseleave | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移出事件，表格数据鼠标移出时触发 |
```schema: scope="body"
{
"type": "page",
"body": {
"type": "crud",
"api": "/api/mock2/sample",
"syncLocation": false,
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:/api/mock2/sample/${ids|raw}",
"confirmText": "确定要批量删除?"
}
],
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
},
"onEvent": {
"click": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "第${event.data.index}行的${event.data.engine}"
}
}
]
}
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true,
"onEvent": {
"mouseenter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "第${event.data.index}行的${event.data.browser}"
}
}
]
},
"mouseleave": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "第${event.data.index}行的${event.data.browser}"
}
}
]
}
}
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
}
```

99
docs/zh-CN/components/dialog.md
View File

@ -905,7 +905,7 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
@ -914,6 +914,103 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
| confirm | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |
| cancel | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击取消时触发 |
### confirm
```schema: scope="body"
[
{
"label": "弹个框",
"type": "button",
"onEvent": {
"click": {
"actions": [
{
"actionType": "dialog",
"dialog": {
"title": "一个弹框",
"body": [
{
"type": "alert",
"body": "试试点击确认按钮",
"level": "info",
"className": "mb-1"
},
{
"type": "form",
"title": "表单",
"debug": true,
"body": [
{
"label": "你的名字",
"type": "input-text",
"name": "name",
"id": "u:00ef9e3fe9db",
"editorState": "default",
"mode": "horizontal",
"size": "md",
"value": "Amis"
}
],
"id": "u:f4b2a90b685b"
}
],
"onEvent": {
"confirm": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "你的名字是${name}"
}
}
]
}
}
}
}
]
}
}
}
]
```
### cancel
```schema: scope="body"
[
{
"label": "弹个框",
"type": "button",
"onEvent": {
"click": {
"actions": [
{
"actionType": "dialog",
"dialog": {
"title": "一个弹窗",
"body": "试试点击取消按钮或者右上角的关闭",
"onEvent": {
"cancel": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "cancel"
}
}
]
}
}
}
}
]
}
}
}
]
```
## 动作表
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。

74
docs/zh-CN/components/drawer.md
View File

@ -462,13 +462,85 @@ order: 43
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| -------- | ------------------------------------------------------------------------ | ------------------ |
| confirm | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |
| cancel | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击取消时触发 |
### confirm
```schema: scope="body"
[
{
"label": "点击弹框",
"type": "button",
"onEvent": {
"click": {
"actions": [
{
"actionType": "drawer",
"drawer": {
"title": "弹框标题",
"body": "这是一个弹框",
"onEvent": {
"confirm": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "confirm"
}
}
]
}
}
}
}
]
}
}
}
]
```
### cancel
```schema: scope="body"
[
{
"label": "点击弹框",
"type": "button",
"onEvent": {
"click": {
"actions": [
{
"actionType": "drawer",
"drawer": {
"title": "弹框标题",
"body": "这是一个弹框",
"onEvent": {
"cancel": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "cancel"
}
}
]
}
}
}
}
]
}
}
}
]
```
## 动作表
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。

68
docs/zh-CN/components/dropdown-button.md
View File

@ -279,13 +279,79 @@ order: 44
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| ---------- | ---------------------------- | --------------------------------------- |
| mouseenter | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移入时触发 |
| mouseleave | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移出时触发 |
### mouseenter
```schema: scope="body"
{
"type": "dropdown-button",
"label": "下拉按钮",
"trigger": "hover",
"onEvent": {
"mouseenter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "mouseenter ${event.data.items.length}"
}
}
]
}
},
"buttons": [
{
"type": "button",
"label": "按钮1"
},
{
"type": "button",
"label": "按钮2"
}
]
}
```
### mouseleave
```schema: scope="body"
{
"type": "dropdown-button",
"label": "下拉按钮",
"trigger": "hover",
"onEvent": {
"mouseleave": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "mouseleave ${event.data.items.length}"
}
}
]
}
},
"buttons": [
{
"type": "button",
"label": "按钮1"
},
{
"type": "button",
"label": "按钮2"
}
]
}
```
## 动作表
暂无

2
docs/zh-CN/components/form/button-group-select.md
View File

@ -207,7 +207,7 @@ order: 6
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/chain-select.md
View File

@ -57,7 +57,7 @@ order: 7
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/checkbox.md
View File

@ -102,7 +102,7 @@ order: 8
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/checkboxes.md
View File

@ -469,7 +469,7 @@ order: 9
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/combo.md
View File

@ -946,7 +946,7 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/diff-editor.md
View File

@ -86,7 +86,7 @@ order: 17
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

14
docs/zh-CN/components/form/editor.md
View File

@ -157,17 +157,17 @@ amis 的编辑器是基于 monaco 开发的，如果想进行深度定制，比
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| language | `string` | `javascript` | 编辑器高亮的语言，支持通过 `${xxx}` 变量获取 |
| size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` |
| allowFullscreen | `boolean` | `false` | 是否显示全屏模式开关 |
| 属性名 | 类型 | 默认值 | 说明 |
| --------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| language | `string` | `javascript` | 编辑器高亮的语言，支持通过 `${xxx}` 变量获取 |
| size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` |
| allowFullscreen | `boolean` | `false` | 是否显示全屏模式开关 |
| options | `object` | | monaco 编辑器的其它配置，比如是否显示行号等，请参考[这里](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IEditorOptions.html)，不过无法设置 readOnly，只读模式需要使用 `disabled: true` |
| placeholder | `string` | | 占位描述，没有值的时候展示 |
| placeholder | `string` | | 占位描述，没有值的时候展示 |
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

4
docs/zh-CN/components/form/index.md
View File

@ -1449,8 +1449,10 @@ Form 支持轮询初始化接口，步骤如下：
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
| 事件名称 | 事件参数 | 说明 |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
| inited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 |

2
docs/zh-CN/components/form/input-city.md
View File

@ -84,7 +84,7 @@ order: 10
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-date-range.md
View File

@ -195,7 +195,7 @@ order: 15
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-date.md
View File

@ -374,7 +374,7 @@ order: 13
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-datetime-range.md
View File

@ -81,7 +81,7 @@ order: 16
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-datetime.md
View File

@ -346,7 +346,7 @@ order: 14
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-excel.md
View File

@ -254,7 +254,7 @@ order: 14
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-file.md
View File

@ -340,7 +340,7 @@ order: 21
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`file`取值。

2
docs/zh-CN/components/form/input-image.md
View File

@ -496,7 +496,7 @@ app.listen(8080, function () {});
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`file`取值。

2
docs/zh-CN/components/form/input-kv.md
View File

@ -208,7 +208,7 @@ key 只能是字符串，因此输入格式是 `input-text`，但 value 格式
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-month-range.md
View File

@ -63,7 +63,7 @@ order: 15
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-month.md
View File

@ -156,7 +156,7 @@ order: 81
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-number.md
View File

@ -292,7 +292,7 @@ order: 32
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-quarter-range.md
View File

@ -62,7 +62,7 @@ order: 15
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-quarter.md
View File

@ -28,7 +28,7 @@ order: 62
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-range.md
View File

@ -280,7 +280,7 @@ order: 38
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-rating.md
View File

@ -162,7 +162,7 @@ order: 37
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-tag.md
View File

@ -134,7 +134,7 @@ order: 55
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-text.md
View File

@ -423,7 +423,7 @@ order: 56
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-time-range.md
View File

@ -81,7 +81,7 @@ order: 15
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-time.md
View File

@ -255,7 +255,7 @@ order: 58
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-tree.md
View File

@ -1100,7 +1100,7 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-year-range.md
View File

@ -63,7 +63,7 @@ order: 15
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/input-year.md
View File

@ -28,7 +28,7 @@ order: 61
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/list-select.md
View File

@ -93,7 +93,7 @@ ListSelect 一般用来实现选择，可以单选也可以多选，和 Radio/Ch
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/matrix-checkboxes.md
View File

@ -284,7 +284,7 @@ row 模式，每行只能单选某个单元格
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/nestedselect.md
View File

@ -712,7 +712,7 @@ order: 31
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/picker.md
View File

@ -522,7 +522,7 @@ order: 35
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/radios.md
View File

@ -252,7 +252,7 @@ api 返回内容需要包含 options 字段
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/select.md
View File

@ -1228,7 +1228,7 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/switch.md
View File

@ -148,7 +148,7 @@ IconSchema 配置
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/tabs-transfer-picker.md
View File

@ -152,7 +152,7 @@ icon:
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/tabs-transfer.md
View File

@ -369,7 +369,7 @@ icon:
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/textarea.md
View File

@ -107,7 +107,7 @@ order: 57
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/transfer-picker.md
View File

@ -122,7 +122,7 @@ icon:
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/transfer.md
View File

@ -852,7 +852,7 @@ icon:
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

2
docs/zh-CN/components/form/treeselect.md
View File

@ -405,7 +405,7 @@ order: 60
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。

84
docs/zh-CN/components/icon.md
View File

@ -211,10 +211,82 @@ v6 用 fa-regular / fa-solid 等表示前缀，可参考官网[示例](https://f
> 2.6.1 及以上版本
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| ---------- | -------------------------------------- | -------------- |
| click | `nativeEvent: MouseEvent` 鼠标事件对象 | 点击时触发 |
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
| 事件名称 | 事件参数 | 说明 |
| ---------- | -------- | -------------- |
| click | - | 点击时触发 |
| mouseenter | - | 鼠标移入时触发 |
| mouseleave | - | 鼠标移出时触发 |
### click
鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "icon",
"icon": "cloud",
"onEvent": {
"click": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.target.className}"
}
}
]
}
}
}
```
### mouseenter
鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "icon",
"icon": "cloud",
"onEvent": {
"mouseenter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}
```
### mouseleave
鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "icon",
"icon": "cloud",
"onEvent": {
"mouseleave": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}
```

55
docs/zh-CN/components/list.md
View File

@ -292,17 +292,62 @@ interface ListBodyField {
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
| 事件名称 | 事件参数 | 说明 | 版本 |
| --------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| itemClick | `item: IItem` | 单行被点击时触发，[`IItem`](./list#iitem)为点击行的信息。注意`itemAction`和`onEvent`是互斥的，List 组件中的`onEvent`会覆盖`itemAction`的行为 | `2.4.0` |
| 事件名称 | 事件参数 | 说明 | 版本 |
| --------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------- |
| itemClick | `item: IItem` | 单行被点击时触发，`IItem`为点击行的信息。注意`itemAction`和`onEvent`是互斥的，List 组件中的`onEvent`会覆盖`itemAction`的行为 | `2.4.0` |
### IItem
**IItem**
| 属性名 | 类型 | 默认值 | 说明 |
| ------ | --------------------- | ------ | ------------------- |
| data | `Record<string, any>` | | 当前行所在数据域 |
| index | `number` | | 行索引值，从 0 开始 |
### itemClick
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=5",
"body": [
{
"type": "list",
"source": "$rows",
"listItem": {
"body": [
{
"type": "hbox",
"columns": [
{
"label": "Engine",
"name": "engine"
},
{
"name": "version",
"label": "Version"
}
]
}
]
},
"onEvent": {
"itemClick": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.data.item.index} ${event.data.item.data.engine}"
}
}
]
}
}
}
]
}
```

104
docs/zh-CN/components/page.md
View File

@ -282,7 +282,7 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
@ -292,6 +292,45 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
| inited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 |
| pullRefresh | - | 开启下拉刷新后，下拉释放后触发（仅用于移动端） |
### init 和 inited
```schema
{
"type": "page",
"initApi": "/api/mock2/page/initData",
"body": [
{
"type": "tpl",
"tpl": "当前时间是：${date}"
}
],
"onEvent": {
"init": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "init"
}
}
]
},
"inited": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.data.responseData|json}"
}
}
]
}
}
}
```
## 动作表
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
@ -300,3 +339,66 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
| -------- | -------------------------- | ---------------------------------------- |
| reload | - | 重新加载，调用 `intiApi`，刷新数据域数据 |
| setValue | `value: object` 更新的数据 | 更新数据 |
### reload
```schema
{
"type": "page",
"id": "page01",
"initApi": "/api/mock2/page/initData",
"body": [
{
"type": "tpl",
"tpl": "当前时间是：${date}"
},
{
"type": "button",
"label": "刷新请求",
"onEvent": {
"click": {
"actions": [
{
"componentId": "page01",
"actionType": "reload"
}
]
}
}
}
]
}
```
### setValue
```schema
{
"type": "page",
"id": "page02",
"initApi": "/api/mock2/page/initData",
"body": [
{
"type": "tpl",
"tpl": "当前时间是：${date}"
},
{
"type": "button",
"label": "更新数据",
"onEvent": {
"click": {
"actions": [
{
"componentId": "page02",
"actionType": "setValue",
"args": {
"value": {"date": "2023-05-01"}
}
}
]
}
}
}
]
}
```

173
docs/zh-CN/components/search-box.md
View File

@ -202,7 +202,7 @@ icon:
> 2.4.1 及以上版本
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
@ -213,6 +213,114 @@ icon:
| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |
| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |
### search
```schema
{
"type": "page",
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
"body": [
{
"type": "search-box",
"name": "keywords",
"onEvent": {
"search": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "${keywords}"
}
}
]
}
}
}
]
}
```
### change
```schema: scope="body"
{
"type": "page",
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
"body": [
{
"type": "search-box",
"name": "keywords",
"onEvent": {
"change": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "${keywords}"
}
}
]
}
}
}
]
}
```
### focus
```schema: scope="body"
{
"type": "page",
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
"body": [
{
"type": "search-box",
"name": "keywords",
"onEvent": {
"focus": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "${keywords}"
}
}
]
}
}
}
]
}
```
### blur
```schema: scope="body"
{
"type": "page",
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
"body": [
{
"type": "search-box",
"name": "keywords",
"onEvent": {
"blur": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "${keywords}"
}
}
]
}
}
}
]
}
```
## 动作表
> 2.4.1 及以上版本
@ -223,3 +331,66 @@ icon:
| -------- | ------------------------ | -------- |
| clear | - | 清空 |
| setValue | `value: string` 更新的值 | 更新数据 |
### clear
```schema: scope="body"
{
"type": "page",
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
"body": [
{
"type": "search-box",
"name": "keywords",
"id": "s01"
},
{
"type": "button",
"label": "清除",
"onEvent": {
"click": {
"actions": [
{
"actionType": "clear",
"componentId": "s01"
}
]
}
}
}
]
}
```
### setValue
```schema: scope="body"
{
"type": "page",
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
"body": [
{
"type": "search-box",
"name": "keywords",
"id": "s02"
},
{
"type": "button",
"label": "设置关键字",
"onEvent": {
"click": {
"actions": [
{
"actionType": "setValue",
"componentId": "s02",
"args": {
"value": "amis"
}
}
]
}
}
}
]
}
```

251
docs/zh-CN/components/service.md
View File

@ -739,7 +739,7 @@ ws.on('connection', function connection(ws) {
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
@ -749,6 +749,89 @@ ws.on('connection', function connection(ws) {
| fetchInited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | api 接口请求完成时触发 |
| fetchSchemaInited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | schemaApi 接口请求完成时触发 |
### init
开始初始化。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/page/initData",
"body": {
"type": "panel",
"title": "$title",
"body": "现在是：${date}"
},
"onEvent": {
"init": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "init"
}
}
]
}
}
}
```
### fetchInited
api 接口请求完成。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/page/initData",
"body": [
{
"type": "panel",
"title": "$title",
"body": "现在是：${date}"
}
],
"onEvent": {
"fetchInited": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "title:${event.data.responseData.title}，date:${date}，status:${event.data.responseStatus}"
}
}
]
}
}
}
```
### fetchSchemaInited
schemaApi 接口请求完成。
```schema: scope="body"
[
{
"type": "service",
"schemaApi": "/api/mock2/service/schema?type=tabs",
"onEvent": {
"fetchSchemaInited": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "type:${event.data.responseData.type}，status:${event.data.responseStatus}"
}
}
]
}
}
}
]
```
## 动作表
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
@ -758,3 +841,169 @@ ws.on('connection', function connection(ws) {
| reload | - | 重新加载，调用 `api`，刷新数据域数据 |
| rebuild | - | 重新构建，调用 `schemaApi`，重新构建容器内 Schema |
| setValue | - | 更新数据域数据 |
### reload
重新请求 api 接口，并刷新。
```schema: scope="body"
[
{
"type": "button",
"label": "刷新请求",
"onEvent": {
"click": {
"actions": [
{
"componentId": "service-reload",
"actionType": "reload"
}
]
}
}
},
{
"type": "service",
"id": "service-reload",
"name": "service-reload",
"api": "/api/mock2/number/random",
"body": "现在是：${random}"
}
]
```
### rebuild
重新构建，基于 args 传参和 schemaApi 绑定变量，让 service 获取不同的 schema。
```schema: scope="body"
[
{
"type": "alert",
"body": "请选择一种构建方式生成组件",
"level": "info",
"showIcon": true,
"className": "mb-3",
"visibleOn": "this.schemaType == null"
},
{
"type": "button-group",
"tiled": true,
"className": "mb-3",
"buttons": [
{
"type": "action",
"label": "构建form",
"icon": "fa fa-hammer",
"onEvent": {
"click": {
"actions": [
{
"actionType": "rebuild",
"componentId": "service-rebuild",
"args": {
"schemaType": "form"
}
}
]
}
}
},
{
"type": "action",
"label": "构建tabs",
"icon": "fa fa-hammer",
"onEvent": {
"click": {
"actions": [
{
"actionType": "rebuild",
"componentId": "service-rebuild",
"args": {
"schemaType": "tabs"
}
}
]
}
}
},
{
"type": "action",
"label": "构建crud",
"icon": "fa fa-hammer",
"onEvent": {
"click": {
"actions": [
{
"actionType": "rebuild",
"componentId": "service-rebuild",
"args": {
"schemaType": "crud"
}
}
]
}
}
}
]
},
{
"type": "service",
"id": "service-rebuild",
"name": "service-rebuild",
"schemaApi": {
"url": "/api/mock2/service/schema?type=${schemaType}",
"method": "post",
"sendOn": "this.schemaType != null"
}
}
]
```
### setValue
更新数据域。
```schema: scope="body"
[
{
"type": "button",
"label": "更新数据",
"onEvent": {
"click": {
"actions": [
{
"actionType": "setValue",
"componentId": "service-setvalue",
"args": {
"value": {
"language": [
"🇨🇳 中国"
]
}
}
}
]
}
}
},
{
"type": "service",
"id": "service-setvalue",
"name": "service-setvalue",
"data": {
"language": [
"🇺🇸 美国"
]
},
"body": {
"type": "each",
"name": "language",
"items": {
"type": "tpl",
"tpl": "<span class='label label-default m-l-sm'><%= data.item %></span> "
}
}
}
]
```

902
docs/zh-CN/components/table.md
View File

@ -1862,7 +1862,7 @@ popOver 的其它配置请参考 [popover](./popover)
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| -------------- | ----------------------------------------------------------------------- | -------------------- |
@ -1876,17 +1876,670 @@ popOver 的其它配置请参考 [popover](./popover)
| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 | 移入整行时触发 |
| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 | 移出整行时触发 |
### 列配置事件表
### selectedChange
> 2.6.1 及以上版本
在开启批量操作后才会用到，可以尝试勾选列表的行记录。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"selectable": true,
"onEvent": {
"selectedChange": {
"actions": [
{
"actionType": "toast",
"args": {
"msg": "已选择${event.data.selectedItems.length}条记录"
}
}
]
}
},
"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"
}
]
}
]
}
```
| 事件名称 | 事件参数 | 说明 |
| ---------- | ------------------------------------------------------------------------------ | ---------------------------------------------- |
| click | `nativeEvent: MouseEvent` 鼠标事件对象<br/>`[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象<br/>`[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象<br/>`[columnName]: string` 对应列名的值 | 监听表格列鼠标移出事件，表格数据鼠标移出时触发 |
### columnSort
列排序，可以尝试点击`Browser`列右侧的排序图标。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"onEvent": {
"columnSort": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "orderBy：${event.data.orderBy},orderDir：${event.data.orderDir}"
}
}
]
}
},
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
]
}
```
### columnFilter
列过滤，可以尝试点击`Rendering engine`列右侧的筛选图标。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"onEvent": {
"columnFilter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "filterName：${event.data.filterName},filterValue：${event.data.filterValue}"
}
}
]
}
},
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
]
}
```
### columnSearch
列检索，，可以尝试点击`ID`列右侧的检索图标。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"onEvent": {
"columnSearch": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "searchName：${event.data.searchName},searchValue：${event.data.searchValue|json}"
}
}
]
}
},
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
]
}
```
### columnToggled
点击自定义列，可以尝试修改`自定义列`的配置。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"onEvent": {
"columnToggled": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "当前显示${event.data.columns.length}列"
}
}
]
}
},
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
]
}
```
### orderChange
在开启拖拽排序行记录后才会用到，排序确认后触发。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"draggable": true,
"onEvent": {
"orderChange": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.data.movedItems.length}行发生移动"
}
}
]
}
},
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
]
}
```
### rowClick
点击行记录。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"onEvent": {
"rowClick": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "行单击数据：${event.data.item|json}；行索引：${event.data.index}"
}
}
]
}
},
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
]
}
```
### rowMouseEnter
鼠标移入行记录。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"onEvent": {
"rowMouseEnter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "行索引：${event.data.index}"
}
}
]
}
},
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
]
}
```
### rowMouseLeave
鼠标移出行记录。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"onEvent": {
"rowMouseLeave": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "行索引：${event.data.index}"
}
}
]
}
},
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
]
}
```
### 列的事件表
表格的默认列定义的事件如下，即 click、mouseenter、mouseleave。如果列定义是其他组件，则事件表就是这个组件对应的事件表，例如列定义是 Switch 组件，则可以监听 [Switch 的 change 事件](./form/switch#%E4%BA%8B%E4%BB%B6%E8%A1%A8)。
| 事件名称 | 事件参数 | 说明 |
| ---------- | ----------------------------------- | ---------------------------------------------- |
| click | `[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |
| mouseenter | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |
| mouseleave | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移出事件，表格数据鼠标移出时触发 |
可以尝试点击某行的`Rendering engine`列数据、鼠标移入某行的`Browser`列数据。
```schema: scope="body"
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"type": "table",
"source": "$rows",
"columns": [
{
"name": "id",
"label": "ID",
"searchable": true
},
{
"name": "engine",
"label": "Rendering engine",
"filterable": {
"options": [
"Internet Explorer 4.0",
"Internet Explorer 5.0"
]
},
"onEvent": {
"click": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "第${event.data.index}行的${event.data.engine}"
}
}
]
}
}
},
{
"name": "browser",
"label": "Browser",
"sortable": true,
"onEvent": {
"mouseenter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "第${event.data.index}行的${event.data.browser}"
}
}
]
},
"mouseleave": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "第${event.data.index}行的${event.data.browser}"
}
}
]
}
}
},
{
"name": "platform",
"label": "Platform(s)"
},
{
"name": "version",
"label": "Engine version"
},
{
"name": "grade",
"label": "CSS grade"
}
]
}
]
}
```
## 动作表
@ -1898,3 +2551,234 @@ popOver 的其它配置请参考 [popover](./popover)
| selectAll | - | 设置表格全部项选中 |
| clearAll | - | 清空表格所有选中项 |
| initDrag | - | 开启表格拖拽排序功能 |
### select
```schema: scope="body"
[
{
"type": "button-toolbar",
"className": "m-b",
"buttons": [
{
"name": "trigger1",
"id": "trigger1",
"type": "action",
"label": "设置表格第一项选中",
"onEvent": {
"click": {
"actions": [
{
"actionType": "select",
"componentId": "table-select",
"description": "点击设置指定表格第一项内容选中",
"args": {
"selected": "data.rowIndex === 0"
}
}
]
}
}
}
]
},
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"id": "table-select",
"type": "table",
"source": "$rows",
"selectable": true,
"multiple": true,
"columns": [
{
"name": "id",
"label": "ID"
},
{
"name": "browser",
"label": "Browser"
},
{
"name": "version",
"label": "Version"
}
]
}
]
}
]
```
### select
```schema: scope="body"
[
{
"type": "button-toolbar",
"className": "m-b",
"buttons": [
{
"name": "trigger2",
"id": "trigger2",
"type": "action",
"label": "设置表格全部项选中",
"onEvent": {
"click": {
"actions": [
{
"actionType": "selectAll",
"componentId": "table-select",
"description": "点击设置指定表格全部内容选中"
}
]
}
}
}
]
},
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"id": "table-select",
"type": "table",
"source": "$rows",
"selectable": true,
"multiple": true,
"columns": [
{
"name": "id",
"label": "ID"
},
{
"name": "browser",
"label": "Browser"
},
{
"name": "version",
"label": "Version"
}
]
}
]
}
]
```
### select
```schema: scope="body"
[
{
"type": "button-toolbar",
"className": "m-b",
"buttons": [
{
"name": "trigger3",
"id": "trigger3",
"type": "action",
"label": "清空表格全部选中项",
"onEvent": {
"click": {
"actions": [
{
"actionType": "clearAll",
"componentId": "table-select",
"description": "点击设置指定表格全部选中项清空"
}
]
}
}
}
]
},
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"id": "table-select",
"type": "table",
"source": "$rows",
"selectable": true,
"multiple": true,
"columns": [
{
"name": "id",
"label": "ID"
},
{
"name": "browser",
"label": "Browser"
},
{
"name": "version",
"label": "Version"
}
]
}
]
}
]
```
### select
```schema: scope="body"
[
{
"type": "button-toolbar",
"className": "m-b",
"buttons": [
{
"name": "trigger4",
"id": "trigger4",
"type": "action",
"label": "开启表格行排序",
"onEvent": {
"click": {
"actions": [
{
"actionType": "initDrag",
"componentId": "table-select",
"description": "点击开启表格行排序功能"
}
]
}
}
}
]
},
{
"type": "service",
"api": "/api/mock2/sample?perPage=10",
"body": [
{
"id": "table-select",
"type": "table",
"source": "$rows",
"selectable": true,
"multiple": true,
"columns": [
{
"name": "id",
"label": "ID"
},
{
"name": "browser",
"label": "Browser"
},
{
"name": "version",
"label": "Version"
}
]
}
]
}
]
```

126
docs/zh-CN/components/tabs.md
View File

@ -792,13 +792,49 @@ order: 68
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
| 事件名称 | 事件参数 | 说明 |
| -------- | ------------------------------------- | ---------------- |
| change | `[name]: number \| string` 选项卡索引 | 切换选项卡时触发 |
| 事件名称 | 事件参数 | 说明 |
| -------- | ------------------------------------ | ---------------- |
| change | `value: number \| string` 选项卡索引 | 切换选项卡时触发 |
### change
```schema: scope="body"
{
"type": "tabs",
"mode": "line",
"tabs": [
{
"title": "选项卡1",
"body": "选项卡内容1"
},
{
"title": "选项卡2",
"body": "选项卡内容2"
},
{
"title": "选项卡3",
"body": "选项卡内容3"
}
],
"onEvent": {
"change": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "切换至选项卡${event.data.value}"
}
}
]
}
}
}
```
## 动作表
@ -807,3 +843,85 @@ order: 68
| 动作名称 | 动作配置 | 说明 |
| --------------- | ---------------------------------------- | ---------------- |
| changeActiveKey | `activeKey: number \| string` 选项卡索引 | 激活指定的选项卡 |
### changeActiveKey
可以尝试点击下方按钮，实现选项卡激活。
```schema: scope="body"
[
{
"type": "action",
"label": "激活选项卡1",
"className": "mr-3 mb-3",
"onEvent": {
"click": {
"actions": [
{
"actionType": "changeActiveKey",
"componentId": "tabs-change-receiver",
"args": {
"activeKey": 1
}
}
]
}
}
},
{
"type": "action",
"label": "激活选项卡2",
"className": "mr-3 mb-3",
"onEvent": {
"click": {
"actions": [
{
"actionType": "changeActiveKey",
"componentId": "tabs-change-receiver",
"args": {
"activeKey": 2
}
}
]
}
}
},
{
"type": "action",
"label": "激活选项卡3",
"className": "mr-3 mb-3",
"onEvent": {
"click": {
"actions": [
{
"actionType": "changeActiveKey",
"componentId": "tabs-change-receiver",
"args": {
"activeKey": 3
}
}
]
}
}
},
{
"id": "tabs-change-receiver",
"type": "tabs",
"mode": "line",
"tabs": [
{
"title": "选项卡1",
"body": "选项卡内容1"
},
{
"title": "选项卡2",
"body": "选项卡内容2"
},
{
"title": "选项卡3",
"body": "选项卡内容3"
}
]
}
]
```

119
docs/zh-CN/components/tag.md
View File

@ -206,11 +206,116 @@ icon:
> 2.6.1 及以上版本
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| ---------- | ------------------------------------------------------- | ---------------- |
| click | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `点击`时触发 |
| mouseenter | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `鼠标移入`时触发 |
| mouseleave | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `鼠标移出`时触发 |
| close | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `关闭`时触发 |
| 事件名称 | 事件参数 | 说明 |
| ---------- | ---------------------------- | ---------------- |
| click | `label: string` 鼠标事件对象 | `点击`时触发 |
| mouseenter | `label: string` 鼠标事件对象 | `鼠标移入`时触发 |
| mouseleave | `label: string` 鼠标事件对象 | `鼠标移出`时触发 |
| close | `label: string` 鼠标事件对象 | `关闭`时触发 |
### click
鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "tag",
"label": "success",
"displayMode": "normal",
"color": "success",
"onEvent": {
"click": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type} ${event.data.label}"
}
}
]
}
}
}
```
### mouseenter
鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "tag",
"label": "success",
"displayMode": "normal",
"color": "success",
"onEvent": {
"mouseenter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type} ${event.data.label}"
}
}
]
}
}
}
```
### mouseleave
鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "tag",
"label": "success",
"displayMode": "normal",
"color": "success",
"onEvent": {
"mouseleave": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type} ${event.data.label}"
}
}
]
}
}
}
```
### close
鼠标点击关闭标签。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "tag",
"label": "success",
"displayMode": "normal",
"color": "success",
"closable": true,
"onEvent": {
"close": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "close ${event.context.nativeEvent.label}"
}
}
]
}
}
}
```

84
docs/zh-CN/components/tpl.md
View File

@ -63,10 +63,82 @@ order: 70
> 2.5.3 及以上版本
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
| 事件名称 | 事件参数 | 说明 |
| ---------- | -------------------------------------- | -------------- |
| click | `nativeEvent: MouseEvent` 鼠标事件对象 | 点击时触发 |
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
| 事件名称 | 事件参数 | 说明 |
| ---------- | -------- | -------------- |
| click | - | 点击时触发 |
| mouseenter | - | 鼠标移入时触发 |
| mouseleave | - | 鼠标移出时触发 |
### click
鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "tpl",
"tpl": "Hello",
"onEvent": {
"click": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}
```
### mouseenter
鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "tpl",
"tpl": "Hello",
"onEvent": {
"mouseenter": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}
```
### mouseleave
鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
```schema: scope="body"
{
"type": "tpl",
"tpl": "Hello",
"onEvent": {
"mouseleave": {
"actions": [
{
"actionType": "toast",
"args": {
"msgType": "info",
"msg": "${event.context.nativeEvent.type}"
}
}
]
}
}
}
```

2
docs/zh-CN/components/wizard.md
View File

@ -96,7 +96,7 @@ order: 73
## 事件表
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。

12
packages/amis/__tests__/renderers/Carousel.test.tsx
View File

@ -147,13 +147,13 @@ test('Renderer:Carousel with name & option config', async () => {
);
expect(item).toHaveTextContent('这是标题');
fireEvent.click(container.querySelector('.cxd-Carousel-dot:nth-child(2')!);
fireEvent.click(container.querySelector('.cxd-Carousel-dot:nth-child(2)')!);
await wait(600);
expect(container.querySelector('.cxd-Carousel-item')!).toHaveTextContent(
'carousel data'
);
await waitFor(() => {
expect(container.querySelector('.cxd-Carousel-item')!).toHaveTextContent(
'carousel data'
);
});
});
test('Renderer:Carousel with controls & controlsTheme & thumbMode', async () => {

5
packages/amis/src/renderers/Action.tsx
View File

@ -991,10 +991,7 @@ export class ActionRenderer extends React.Component<ActionRendererProps> {
let mergedData = data;
if (action?.actionType === 'click' && isObject(action?.args)) {
mergedData = createObject(data, {
...action.args,
nativeEvent: e
});
mergedData = createObject(data, action.args);
}
const hasOnEvent = $schema.onEvent && Object.keys($schema.onEvent).length;

21
packages/amis/src/renderers/Icon.tsx
View File

@ -46,34 +46,19 @@ export class Icon extends React.Component<IconProps, object> {
@autobind
handleClick(e: React.MouseEvent<any>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(
'click',
createObject(data, {
nativeEvent: e
})
);
dispatchEvent(e, data);
}
@autobind
handleMouseEnter(e: React.MouseEvent<any>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(
e,
createObject(data, {
nativeEvent: e
})
);
dispatchEvent(e, data);
}
@autobind
handleMouseLeave(e: React.MouseEvent<any>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(
e,
createObject(data, {
nativeEvent: e
})
);
dispatchEvent(e, data);
}
render() {

34
packages/amis/src/renderers/Tag.tsx
View File

@ -77,16 +77,8 @@ export interface TagSchema extends BaseSchema {
export interface TagProps
extends RendererProps,
Omit<TagSchema, 'type' | 'className'> {
onClick?: (params: {
[propName: string]: any;
nativeEvent: React.MouseEvent<any>;
label: string;
}) => void;
onClose?: (params: {
[propName: string]: any;
nativeEvent: React.MouseEvent<any>;
label: string;
}) => void;
onClick?: (params: {[propName: string]: any}) => void;
onClose?: (params: {[propName: string]: any}) => void;
}
export class TagField extends React.Component<TagProps, object> {
@ -97,16 +89,16 @@ export class TagField extends React.Component<TagProps, object> {
@autobind
handleClick(nativeEvent: React.MouseEvent<any>) {
const {dispatchEvent, onClick} = this.props;
const params = this.getResolvedEventParams(nativeEvent);
const params = this.getResolvedEventParams();
dispatchEvent('click', params);
dispatchEvent(nativeEvent, params);
onClick?.(params);
}
@autobind
handleMouseEnter(e: React.MouseEvent<any>) {
const {dispatchEvent} = this.props;
const params = this.getResolvedEventParams(e);
const params = this.getResolvedEventParams();
dispatchEvent(e, params);
}
@ -114,7 +106,7 @@ export class TagField extends React.Component<TagProps, object> {
@autobind
handleMouseLeave(e: React.MouseEvent<any>) {
const {dispatchEvent} = this.props;
const params = this.getResolvedEventParams(e);
const params = this.getResolvedEventParams();
dispatchEvent(e, params);
}
@ -122,9 +114,15 @@ export class TagField extends React.Component<TagProps, object> {
@autobind
handleClose(nativeEvent: React.MouseEvent<HTMLElement>) {
const {dispatchEvent, onClose} = this.props;
const params = this.getResolvedEventParams(nativeEvent);
const params = this.getResolvedEventParams();
dispatchEvent('close', params);
dispatchEvent(
{
...nativeEvent,
type: 'close'
},
params
);
onClose?.(params);
}
@ -179,15 +177,13 @@ export class TagField extends React.Component<TagProps, object> {
);
}
private getResolvedEventParams<T>(nativeEvent: T) {
private getResolvedEventParams<T>() {
const {data} = this.props;
return createObject(data, {
nativeEvent,
label: this.resolveLabel()
}) as {
[propName: string]: any;
nativeEvent: React.MouseEvent<T>;
label: string;
};
}

21
packages/amis/src/renderers/Tpl.tsx
View File

@ -159,34 +159,19 @@ export class Tpl extends React.Component<TplProps, TplState> {
@autobind
handleClick(e: React.MouseEvent<HTMLDivElement>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(
'click',
createObject(data, {
nativeEvent: e
})
);
dispatchEvent(e, data);
}
@autobind
handleMouseEnter(e: React.MouseEvent<any>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(
e,
createObject(data, {
nativeEvent: e
})
);
dispatchEvent(e, data);
}
@autobind
handleMouseLeave(e: React.MouseEvent<any>) {
const {dispatchEvent, data} = this.props;
dispatchEvent(
e,
createObject(data, {
nativeEvent: e
})
);
dispatchEvent(e, data);
}
render() {