diff --git a/docs/zh-CN/components/action.md b/docs/zh-CN/components/action.md index 066c77688..3ea4f341b 100755 --- a/docs/zh-CN/components/action.md +++ b/docs/zh-CN/components/action.md @@ -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` | - | 配置字符串数组,指定在`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}" + } + } + ] + } + } +} +``` ## 动作表 diff --git a/docs/zh-CN/components/app.md b/docs/zh-CN/components/app.md index f026f7723..0cd43ed2b 100644 --- a/docs/zh-CN/components/app.md +++ b/docs/zh-CN/components/app.md @@ -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)。 | 事件名称 | 事件参数 | 说明 | | -------- | -------- | --------------------------------------------------- | diff --git a/docs/zh-CN/components/carousel.md b/docs/zh-CN/components/carousel.md index 75482e45c..83e329ab2 100755 --- a/docs/zh-CN/components/carousel.md +++ b/docs/zh-CN/components/carousel.md @@ -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` 激活图片的索引
`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": "
carousel data
" + }, + { + "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": "
carousel data
" + }, + { + "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": "
carousel data
" + }, + { + "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": "
carousel data
" + }, + { + "thumbMode": "contain", + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg" + } + ] + } +] +``` diff --git a/docs/zh-CN/components/chart.md b/docs/zh-CN/components/chart.md index 376dc5a84..50ae0b7a1 100755 --- a/docs/zh-CN/components/chart.md +++ b/docs/zh-CN/components/chart.md @@ -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": "当前选中值 ${value|json}" + }, + { + "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": "当前选中值 ${value|json}" + }, + { + "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 + } + } + ] +``` diff --git a/docs/zh-CN/components/crud.md b/docs/zh-CN/components/crud.md index 8a641900c..b91340db0 100755 --- a/docs/zh-CN/components/crud.md +++ b/docs/zh-CN/components/crud.md @@ -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[]` 已选择行
`unSelectedItems: item[]` 未选择行 | 手动选择表格项时触发 | +| columnSort | `orderBy: string` 列排序列名
`orderDir: string` 列排序值 | 点击列排序时触发 | +| columnFilter | `filterName: string` 列筛选列名
`filterValue: string` 列筛选值 | 点击列筛选时触发 | +| columnSearch | `searchName: string` 列搜索列名
`searchValue: object` 列搜索数据 | 点击列搜索时触发 | +| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 | +| columnToggled | `columns: item[]` 当前显示的列配置数据 | 点击自定义列时触发 | +| rowClick | `item: object` 行点击数据
`index: number` 行索引 | 点击整行时触发 | +| rowMouseEnter | `item: object` 行移入数据
`index: number` 行索引 | 移入整行时触发 | +| rowMouseLeave | `item: object` 行移出数据
`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" + } + ] + } +} +``` diff --git a/docs/zh-CN/components/dialog.md b/docs/zh-CN/components/dialog.md index 0e7b10a0c..c99ff5cd4 100755 --- a/docs/zh-CN/components/dialog.md +++ b/docs/zh-CN/components/dialog.md @@ -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` 弹窗数据
`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 | | cancel | `event.data: object` 弹窗数据
`[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#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/drawer.md b/docs/zh-CN/components/drawer.md index 57074be39..863bb1be5 100755 --- a/docs/zh-CN/components/drawer.md +++ b/docs/zh-CN/components/drawer.md @@ -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` 抽屉数据
`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 | | cancel | `event.data: object` 抽屉数据
`[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#触发其他组件的动作)。 diff --git a/docs/zh-CN/components/dropdown-button.md b/docs/zh-CN/components/dropdown-button.md index 32b12418f..a24233454 100755 --- a/docs/zh-CN/components/dropdown-button.md +++ b/docs/zh-CN/components/dropdown-button.md @@ -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 | 触发方式为 hover 模式下,鼠标移入时触发 | | mouseleave | items: Array | 触发方式为 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" + } + ] +} +``` + ## 动作表 暂无 diff --git a/docs/zh-CN/components/form/button-group-select.md b/docs/zh-CN/components/form/button-group-select.md index 6c9e732b9..5d17d0007 100755 --- a/docs/zh-CN/components/form/button-group-select.md +++ b/docs/zh-CN/components/form/button-group-select.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/chain-select.md b/docs/zh-CN/components/form/chain-select.md index 780c50657..4cb556340 100755 --- a/docs/zh-CN/components/form/chain-select.md +++ b/docs/zh-CN/components/form/chain-select.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/checkbox.md b/docs/zh-CN/components/form/checkbox.md index 574c3d839..1f3676327 100755 --- a/docs/zh-CN/components/form/checkbox.md +++ b/docs/zh-CN/components/form/checkbox.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/checkboxes.md b/docs/zh-CN/components/form/checkboxes.md index f54701ce3..1f6744db9 100755 --- a/docs/zh-CN/components/form/checkboxes.md +++ b/docs/zh-CN/components/form/checkboxes.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/combo.md b/docs/zh-CN/components/form/combo.md index f02296835..1cca582fc 100755 --- a/docs/zh-CN/components/form/combo.md +++ b/docs/zh-CN/components/form/combo.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/diff-editor.md b/docs/zh-CN/components/form/diff-editor.md index e43d776da..e1d4f30eb 100755 --- a/docs/zh-CN/components/form/diff-editor.md +++ b/docs/zh-CN/components/form/diff-editor.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/editor.md b/docs/zh-CN/components/form/editor.md index a45cfc349..445572de8 100755 --- a/docs/zh-CN/components/form/editor.md +++ b/docs/zh-CN/components/form/editor.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/index.md b/docs/zh-CN/components/form/index.md index fb695f39e..d3c5546ca 100755 --- a/docs/zh-CN/components/form/index.md +++ b/docs/zh-CN/components/form/index.md @@ -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` 请求的响应数据
`responseStatus: number` 响应状态,0 表示成功
`responseMsg: string`响应消息, `error`表示接口是否成功
`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 | diff --git a/docs/zh-CN/components/form/input-city.md b/docs/zh-CN/components/form/input-city.md index dfdb185fd..75deef347 100755 --- a/docs/zh-CN/components/form/input-city.md +++ b/docs/zh-CN/components/form/input-city.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-date-range.md b/docs/zh-CN/components/form/input-date-range.md index 6c86d9c86..b523d199d 100755 --- a/docs/zh-CN/components/form/input-date-range.md +++ b/docs/zh-CN/components/form/input-date-range.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-date.md b/docs/zh-CN/components/form/input-date.md index 56ae39577..8fff61aa6 100755 --- a/docs/zh-CN/components/form/input-date.md +++ b/docs/zh-CN/components/form/input-date.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-datetime-range.md b/docs/zh-CN/components/form/input-datetime-range.md index 9cd1f2308..322e17107 100755 --- a/docs/zh-CN/components/form/input-datetime-range.md +++ b/docs/zh-CN/components/form/input-datetime-range.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-datetime.md b/docs/zh-CN/components/form/input-datetime.md index 99094d317..fc2b45741 100755 --- a/docs/zh-CN/components/form/input-datetime.md +++ b/docs/zh-CN/components/form/input-datetime.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-excel.md b/docs/zh-CN/components/form/input-excel.md index ee1f7e0d3..f2da60cfb 100644 --- a/docs/zh-CN/components/form/input-excel.md +++ b/docs/zh-CN/components/form/input-excel.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-file.md b/docs/zh-CN/components/form/input-file.md index 60d7a8edb..28c3deeec 100755 --- a/docs/zh-CN/components/form/input-file.md +++ b/docs/zh-CN/components/form/input-file.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-image.md b/docs/zh-CN/components/form/input-image.md index 98ed081da..808d0276f 100755 --- a/docs/zh-CN/components/form/input-image.md +++ b/docs/zh-CN/components/form/input-image.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-kv.md b/docs/zh-CN/components/form/input-kv.md index 1fd96e881..5c4fb5c9e 100644 --- a/docs/zh-CN/components/form/input-kv.md +++ b/docs/zh-CN/components/form/input-kv.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-month-range.md b/docs/zh-CN/components/form/input-month-range.md index 307af516b..b99afaeaf 100644 --- a/docs/zh-CN/components/form/input-month-range.md +++ b/docs/zh-CN/components/form/input-month-range.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-month.md b/docs/zh-CN/components/form/input-month.md index adb116893..f51c177db 100755 --- a/docs/zh-CN/components/form/input-month.md +++ b/docs/zh-CN/components/form/input-month.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-number.md b/docs/zh-CN/components/form/input-number.md index fc1081bce..8a38ff935 100755 --- a/docs/zh-CN/components/form/input-number.md +++ b/docs/zh-CN/components/form/input-number.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-quarter-range.md b/docs/zh-CN/components/form/input-quarter-range.md index 38df5f265..e8605988b 100644 --- a/docs/zh-CN/components/form/input-quarter-range.md +++ b/docs/zh-CN/components/form/input-quarter-range.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-quarter.md b/docs/zh-CN/components/form/input-quarter.md index 802a230a5..3438eb3c5 100644 --- a/docs/zh-CN/components/form/input-quarter.md +++ b/docs/zh-CN/components/form/input-quarter.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-range.md b/docs/zh-CN/components/form/input-range.md index ee6c2ac20..a94b4271c 100755 --- a/docs/zh-CN/components/form/input-range.md +++ b/docs/zh-CN/components/form/input-range.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-rating.md b/docs/zh-CN/components/form/input-rating.md index 79bd58be2..1253e530e 100755 --- a/docs/zh-CN/components/form/input-rating.md +++ b/docs/zh-CN/components/form/input-rating.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-tag.md b/docs/zh-CN/components/form/input-tag.md index de2c9e6f1..7174662d5 100755 --- a/docs/zh-CN/components/form/input-tag.md +++ b/docs/zh-CN/components/form/input-tag.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-text.md b/docs/zh-CN/components/form/input-text.md index d347764a3..50160c89c 100755 --- a/docs/zh-CN/components/form/input-text.md +++ b/docs/zh-CN/components/form/input-text.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-time-range.md b/docs/zh-CN/components/form/input-time-range.md index 93f6af6c5..da33be392 100644 --- a/docs/zh-CN/components/form/input-time-range.md +++ b/docs/zh-CN/components/form/input-time-range.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-time.md b/docs/zh-CN/components/form/input-time.md index 51b5f87f2..26baa9a2d 100755 --- a/docs/zh-CN/components/form/input-time.md +++ b/docs/zh-CN/components/form/input-time.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-tree.md b/docs/zh-CN/components/form/input-tree.md index aa6180403..9bc6272d5 100755 --- a/docs/zh-CN/components/form/input-tree.md +++ b/docs/zh-CN/components/form/input-tree.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-year-range.md b/docs/zh-CN/components/form/input-year-range.md index 08b87b383..93dc2847f 100644 --- a/docs/zh-CN/components/form/input-year-range.md +++ b/docs/zh-CN/components/form/input-year-range.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/input-year.md b/docs/zh-CN/components/form/input-year.md index 44cdbdae8..7ea3903ca 100644 --- a/docs/zh-CN/components/form/input-year.md +++ b/docs/zh-CN/components/form/input-year.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/list-select.md b/docs/zh-CN/components/form/list-select.md index da150d21d..d687633e2 100755 --- a/docs/zh-CN/components/form/list-select.md +++ b/docs/zh-CN/components/form/list-select.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/matrix-checkboxes.md b/docs/zh-CN/components/form/matrix-checkboxes.md index 5c2f0065b..6cd039ec7 100755 --- a/docs/zh-CN/components/form/matrix-checkboxes.md +++ b/docs/zh-CN/components/form/matrix-checkboxes.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/nestedselect.md b/docs/zh-CN/components/form/nestedselect.md index 75ca8edcc..6843b8f5d 100755 --- a/docs/zh-CN/components/form/nestedselect.md +++ b/docs/zh-CN/components/form/nestedselect.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/picker.md b/docs/zh-CN/components/form/picker.md index 9eff70264..990dff93e 100755 --- a/docs/zh-CN/components/form/picker.md +++ b/docs/zh-CN/components/form/picker.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/radios.md b/docs/zh-CN/components/form/radios.md index 8e3a63cf6..dbdf78d2a 100644 --- a/docs/zh-CN/components/form/radios.md +++ b/docs/zh-CN/components/form/radios.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/select.md b/docs/zh-CN/components/form/select.md index 68f0855ee..08e367185 100755 --- a/docs/zh-CN/components/form/select.md +++ b/docs/zh-CN/components/form/select.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/switch.md b/docs/zh-CN/components/form/switch.md index d6fc034cd..4e7768484 100755 --- a/docs/zh-CN/components/form/switch.md +++ b/docs/zh-CN/components/form/switch.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/tabs-transfer-picker.md b/docs/zh-CN/components/form/tabs-transfer-picker.md index a165ce8cf..df2c7d3b6 100644 --- a/docs/zh-CN/components/form/tabs-transfer-picker.md +++ b/docs/zh-CN/components/form/tabs-transfer-picker.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/tabs-transfer.md b/docs/zh-CN/components/form/tabs-transfer.md index 3991412c1..8dc358473 100644 --- a/docs/zh-CN/components/form/tabs-transfer.md +++ b/docs/zh-CN/components/form/tabs-transfer.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/textarea.md b/docs/zh-CN/components/form/textarea.md index 3b1ea1581..e580607d2 100755 --- a/docs/zh-CN/components/form/textarea.md +++ b/docs/zh-CN/components/form/textarea.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/transfer-picker.md b/docs/zh-CN/components/form/transfer-picker.md index fd73385ab..e113f3030 100644 --- a/docs/zh-CN/components/form/transfer-picker.md +++ b/docs/zh-CN/components/form/transfer-picker.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/transfer.md b/docs/zh-CN/components/form/transfer.md index db02b45b4..9bcd66b97 100644 --- a/docs/zh-CN/components/form/transfer.md +++ b/docs/zh-CN/components/form/transfer.md @@ -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`取值。 diff --git a/docs/zh-CN/components/form/treeselect.md b/docs/zh-CN/components/form/treeselect.md index 4024137eb..8ef7f3b7e 100755 --- a/docs/zh-CN/components/form/treeselect.md +++ b/docs/zh-CN/components/form/treeselect.md @@ -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`取值。 diff --git a/docs/zh-CN/components/icon.md b/docs/zh-CN/components/icon.md index 775d64c3f..be4c7b7c7 100755 --- a/docs/zh-CN/components/icon.md +++ b/docs/zh-CN/components/icon.md @@ -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}" + } + } + ] + } + } +} +``` diff --git a/docs/zh-CN/components/list.md b/docs/zh-CN/components/list.md index f5867b8bb..e877a46de 100755 --- a/docs/zh-CN/components/list.md +++ b/docs/zh-CN/components/list.md @@ -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` | | 当前行所在数据域 | | 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}" + } + } + ] + } + } + } + ] +} +``` diff --git a/docs/zh-CN/components/page.md b/docs/zh-CN/components/page.md index fe2612be6..79c2f3ea9 100755 --- a/docs/zh-CN/components/page.md +++ b/docs/zh-CN/components/page.md @@ -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` 请求的响应数据
`responseStatus: number` 响应状态,0 表示成功
`responseMsg: string`响应消息, `error`表示接口是否成功
`[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"} + } + } + ] + } + } + } + ] +} +``` diff --git a/docs/zh-CN/components/search-box.md b/docs/zh-CN/components/search-box.md index 23dabead2..e271fe436 100644 --- a/docs/zh-CN/components/search-box.md +++ b/docs/zh-CN/components/search-box.md @@ -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" + } + } + ] + } + } + } + ] +} +``` diff --git a/docs/zh-CN/components/service.md b/docs/zh-CN/components/service.md index bd36f1c5b..c9d792533 100755 --- a/docs/zh-CN/components/service.md +++ b/docs/zh-CN/components/service.md @@ -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` 请求的响应数据
`responseStatus: number` 响应状态,0 表示成功
`responseMsg: string`响应消息, `error`表示接口是否成功
`[name]: any` 当前数据域中指定字段的值 | api 接口请求完成时触发 | | fetchSchemaInited | `responseData: any` 请求的响应数据
`responseStatus: number` 响应状态,0 表示成功
`responseMsg: string`响应消息, `error`表示接口是否成功
`[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": "<%= data.item %> " + } + } + } +] +``` diff --git a/docs/zh-CN/components/table.md b/docs/zh-CN/components/table.md index 238fc85c4..891592dbd 100755 --- a/docs/zh-CN/components/table.md +++ b/docs/zh-CN/components/table.md @@ -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` 行移入数据
`index: number` 行索引 | 移入整行时触发 | | rowMouseLeave | `item: object` 行移出数据
`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` 鼠标事件对象
`[columnName]: string` 对应列名的值 | 监听表格列点击事件,表格数据点击时触发 | -| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象
`[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件,表格数据鼠标移入时触发 | -| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象
`[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" + } + ] + } + ] +} +] +``` diff --git a/docs/zh-CN/components/tabs.md b/docs/zh-CN/components/tabs.md index 42d183a34..cd3367fbc 100755 --- a/docs/zh-CN/components/tabs.md +++ b/docs/zh-CN/components/tabs.md @@ -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" + } + ] + } +] +``` diff --git a/docs/zh-CN/components/tag.md b/docs/zh-CN/components/tag.md index 96cc7d7f0..5eef925fb 100644 --- a/docs/zh-CN/components/tag.md +++ b/docs/zh-CN/components/tag.md @@ -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}" + } + } + ] + } + } +} +``` diff --git a/docs/zh-CN/components/tpl.md b/docs/zh-CN/components/tpl.md index e377e6504..b185f4734 100755 --- a/docs/zh-CN/components/tpl.md +++ b/docs/zh-CN/components/tpl.md @@ -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}" + } + } + ] + } + } +} +``` diff --git a/docs/zh-CN/components/wizard.md b/docs/zh-CN/components/wizard.md index 0c3ae2c12..3e0f5b75e 100755 --- a/docs/zh-CN/components/wizard.md +++ b/docs/zh-CN/components/wizard.md @@ -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}获取对应的值。 diff --git a/packages/amis-core/src/actions/ToastAction.ts b/packages/amis-core/src/actions/ToastAction.ts index 37a946130..8d5519378 100644 --- a/packages/amis-core/src/actions/ToastAction.ts +++ b/packages/amis-core/src/actions/ToastAction.ts @@ -37,7 +37,7 @@ export class ToastAction implements RendererAction { if (!renderer.props.env?.notify) { throw new Error('env.notify is required!'); } - + debugger; event.context.env.notify?.( action.args?.msgType || 'info', String(action.args?.msg), diff --git a/packages/amis/src/renderers/Action.tsx b/packages/amis/src/renderers/Action.tsx index 7360300e7..386c6afc5 100644 --- a/packages/amis/src/renderers/Action.tsx +++ b/packages/amis/src/renderers/Action.tsx @@ -991,10 +991,7 @@ export class ActionRenderer extends React.Component { 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; diff --git a/packages/amis/src/renderers/Icon.tsx b/packages/amis/src/renderers/Icon.tsx index fac235679..7d362c2bd 100644 --- a/packages/amis/src/renderers/Icon.tsx +++ b/packages/amis/src/renderers/Icon.tsx @@ -46,34 +46,19 @@ export class Icon extends React.Component { @autobind handleClick(e: React.MouseEvent) { const {dispatchEvent, data} = this.props; - dispatchEvent( - 'click', - createObject(data, { - nativeEvent: e - }) - ); + dispatchEvent(e, data); } @autobind handleMouseEnter(e: React.MouseEvent) { const {dispatchEvent, data} = this.props; - dispatchEvent( - e, - createObject(data, { - nativeEvent: e - }) - ); + dispatchEvent(e, data); } @autobind handleMouseLeave(e: React.MouseEvent) { const {dispatchEvent, data} = this.props; - dispatchEvent( - e, - createObject(data, { - nativeEvent: e - }) - ); + dispatchEvent(e, data); } render() { diff --git a/packages/amis/src/renderers/Tag.tsx b/packages/amis/src/renderers/Tag.tsx index f30e98147..c0ae5def9 100644 --- a/packages/amis/src/renderers/Tag.tsx +++ b/packages/amis/src/renderers/Tag.tsx @@ -99,7 +99,7 @@ export class TagField extends React.Component { const {dispatchEvent, onClick} = this.props; const params = this.getResolvedEventParams(nativeEvent); - dispatchEvent('click', params); + dispatchEvent(nativeEvent, params); onClick?.(params); } @@ -124,7 +124,13 @@ export class TagField extends React.Component { const {dispatchEvent, onClose} = this.props; const params = this.getResolvedEventParams(nativeEvent); - dispatchEvent('close', params); + dispatchEvent( + { + ...nativeEvent, + type: 'close' + }, + params + ); onClose?.(params); } @@ -183,11 +189,9 @@ export class TagField extends React.Component { const {data} = this.props; return createObject(data, { - nativeEvent, label: this.resolveLabel() }) as { [propName: string]: any; - nativeEvent: React.MouseEvent; label: string; }; } diff --git a/packages/amis/src/renderers/Tpl.tsx b/packages/amis/src/renderers/Tpl.tsx index 5ce656f6f..9d7efaae0 100644 --- a/packages/amis/src/renderers/Tpl.tsx +++ b/packages/amis/src/renderers/Tpl.tsx @@ -159,34 +159,19 @@ export class Tpl extends React.Component { @autobind handleClick(e: React.MouseEvent) { const {dispatchEvent, data} = this.props; - dispatchEvent( - 'click', - createObject(data, { - nativeEvent: e - }) - ); + dispatchEvent(e, data); } @autobind handleMouseEnter(e: React.MouseEvent) { const {dispatchEvent, data} = this.props; - dispatchEvent( - e, - createObject(data, { - nativeEvent: e - }) - ); + dispatchEvent(e, data); } @autobind handleMouseLeave(e: React.MouseEvent) { const {dispatchEvent, data} = this.props; - dispatchEvent( - e, - createObject(data, { - nativeEvent: e - }) - ); + dispatchEvent(e, data); } render() {