mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
chore:事件动作文档补充demo
This commit is contained in:
lvxiaojiao
parent
79d87ca940
commit
bbbc804943
@ -1031,23 +1031,96 @@ action 还可以使用 `body` 来渲染其他组件，让那些不支持行为
|
||||
| confirmText | [模板](../../docs/concepts/template) | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |
|
||||
| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| disabledTip | `'string' \| 'TooltipObject'` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| disabledTip | `'string' \| 'TooltipObject'` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |
|
||||
| close | `boolean` or `string` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。当值为字符串，并且是祖先层弹框的名字的时候，会把祖先弹框关闭掉。 |
|
||||
| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |
|
||||
|
||||
### TooltipObject
|
||||
|
||||
`TooltipObject` 为 [tooltip-wrapper](./tooltip) 属性配置，但是不需要配置如下属性 `type`、`body`、`wrapperComponent`、`className`、`inline`。
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | -------------------------------------- | -------------- |
|
||||
| click | `nativeEvent: MouseEvent` 鼠标事件对象 | 点击时触发 |
|
||||
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
|
||||
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | -------- | -------------- |
|
||||
| click | - | 点击时触发 |
|
||||
| mouseenter | - | 鼠标移入时触发 |
|
||||
| mouseleave | - | 鼠标移出时触发 |
|
||||
|
||||
### click
|
||||
|
||||
鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Button",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseenter
|
||||
|
||||
鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Button",
|
||||
"onEvent": {
|
||||
"mouseenter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseleave
|
||||
|
||||
鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Button",
|
||||
"onEvent": {
|
||||
"mouseleave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
|
||||
@ -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)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | -------- | --------------------------------------------------- |
|
||||
|
||||
@ -134,41 +134,77 @@ itemSchema: {
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ---------------------------- | --------- | ---------------------- | ------------------------------------------------------- | --- |
|
||||
| type | `string` | `"carousel"` | 指定为 Carousel 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| options | `array` | `[]` | 轮播面板数据 |
|
||||
| options.image | `string` | | 图片链接 |
|
||||
| options.href | `string` | | 图片打开网址的链接 |
|
||||
| options.imageClassName | `string` | | 图片类名 |
|
||||
| options.title | `string` | | 图片标题 |
|
||||
| options.titleClassName | `string` | | 图片标题类名 |
|
||||
| options.description | `string` | | 图片描述 |
|
||||
| options.descriptionClassName | `string` | | 图片描述类名 |
|
||||
| options.html | `string` | | HTML 自定义，同[Tpl](./tpl)一致 |
|
||||
| itemSchema | `object` | | 自定义`schema`来展示数据 |
|
||||
| auto | `boolean` | `true` | 是否自动轮播 |
|
||||
| interval | `string` | `5s` | 切换动画间隔 |
|
||||
| duration | `number` | `500` | 切换动画时长（ms） |
|
||||
| width | `string` | `auto` | 宽度 |
|
||||
| height | `string` | `200px` | 高度 |
|
||||
| controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 |
|
||||
| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 |
|
||||
| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |
|
||||
| thumbMode | `string` | `"cover" \| "contain"` | 图片默认缩放模式 |
|
||||
| multiple | `object` | `{count: 1}` | 多图展示，count表示展示的数量 | `2.8.1` |
|
||||
| alwaysShowArrow | `boolean` | `false` | 是否一直显示箭头，为false时鼠标hover才会显示 | `2.8.1` |
|
||||
| icons | {prev: `SchemaCollection`; next: `SchemaCollection`;} | | 自定义箭头图标 | `2.8.1` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ---------------------------- | ----------------------------------------------------- | ---------------------- | ------------------------------------------------------- | ------- |
|
||||
| type | `string` | `"carousel"` | 指定为 Carousel 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| options | `array` | `[]` | 轮播面板数据 |
|
||||
| options.image | `string` | | 图片链接 |
|
||||
| options.href | `string` | | 图片打开网址的链接 |
|
||||
| options.imageClassName | `string` | | 图片类名 |
|
||||
| options.title | `string` | | 图片标题 |
|
||||
| options.titleClassName | `string` | | 图片标题类名 |
|
||||
| options.description | `string` | | 图片描述 |
|
||||
| options.descriptionClassName | `string` | | 图片描述类名 |
|
||||
| options.html | `string` | | HTML 自定义，同[Tpl](./tpl)一致 |
|
||||
| itemSchema | `object` | | 自定义`schema`来展示数据 |
|
||||
| auto | `boolean` | `true` | 是否自动轮播 |
|
||||
| interval | `string` | `5s` | 切换动画间隔 |
|
||||
| duration | `number` | `500` | 切换动画时长（ms） |
|
||||
| width | `string` | `auto` | 宽度 |
|
||||
| height | `string` | `200px` | 高度 |
|
||||
| controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 |
|
||||
| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 |
|
||||
| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |
|
||||
| thumbMode | `string` | `"cover" \| "contain"` | 图片默认缩放模式 |
|
||||
| multiple | `object` | `{count: 1}` | 多图展示，count 表示展示的数量 | `2.8.1` |
|
||||
| alwaysShowArrow | `boolean` | `false` | 是否一直显示箭头，为 false 时鼠标 hover 才会显示 | `2.8.1` |
|
||||
| icons | {prev: `SchemaCollection`; next: `SchemaCollection`;} | | 自定义箭头图标 | `2.8.1` |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | -------------------------------------------------------------------------------- | ---------------- |
|
||||
| change | `activeIndex: number` 激活图片的索引 <br /> `prevIndex: number` 上一张图片的索引 | 轮播图切换时触发 |
|
||||
|
||||
### change
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "carousel",
|
||||
"auto": false,
|
||||
"thumbMode": "cover",
|
||||
"animation": "slide",
|
||||
"height": 300,
|
||||
"options": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
},
|
||||
{
|
||||
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
},
|
||||
{
|
||||
"thumbMode": "contain",
|
||||
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
}
|
||||
],
|
||||
"onEvent": {
|
||||
"change": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "滚动至${activeIndex}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
@ -178,3 +214,132 @@ itemSchema: {
|
||||
| next | - | 下一张 |
|
||||
| prev | - | 上一张 |
|
||||
| goto-image | `activeIndex: number` 切换图片的索引 | 切换轮播图 |
|
||||
|
||||
### next
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "action",
|
||||
"label": "下一张",
|
||||
"className": "mr-3 mb-3",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "next",
|
||||
"componentId": "carousel_001"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "carousel",
|
||||
"id": "carousel_001",
|
||||
"auto": false,
|
||||
"thumbMode": "cover",
|
||||
"animation": "slide",
|
||||
"height": 300,
|
||||
"options": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
},
|
||||
{
|
||||
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
},
|
||||
{
|
||||
"thumbMode": "contain",
|
||||
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### prev
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "action",
|
||||
"label": "上一张",
|
||||
"className": "mr-3 mb-3",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "prev",
|
||||
"componentId": "carousel_002"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "carousel",
|
||||
"id": "carousel_002",
|
||||
"auto": false,
|
||||
"thumbMode": "cover",
|
||||
"animation": "slide",
|
||||
"height": 300,
|
||||
"options": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
},
|
||||
{
|
||||
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
},
|
||||
{
|
||||
"thumbMode": "contain",
|
||||
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### goto-image
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "action",
|
||||
"label": "滚动到第三张",
|
||||
"className": "mr-3 mb-3",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "goto-image",
|
||||
"componentId": "carousel_003",
|
||||
"args": {
|
||||
"activeIndex": "${index}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "carousel",
|
||||
"id": "carousel_003",
|
||||
"auto": false,
|
||||
"thumbMode": "cover",
|
||||
"animation": "slide",
|
||||
"height": 300,
|
||||
"options": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
},
|
||||
{
|
||||
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
},
|
||||
{
|
||||
"thumbMode": "contain",
|
||||
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
@ -697,7 +697,7 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
|
||||
|
||||
> 2.4.1 及以上版本
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------- |
|
||||
@ -706,6 +706,388 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
|
||||
| mouseover | 查看[ECharst 事件与行为文档](https://echarts.apache.org/handbook/zh/concepts/event/) | 鼠标悬浮时触发 |
|
||||
| legendselectchanged | 查看[ECharst 事件与行为文档](https://echarts.apache.org/handbook/zh/concepts/event/) | 切换图例选中状态时触发 |
|
||||
|
||||
### init
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"id": "chart01",
|
||||
"api": "/api/mock2/chart/chartData",
|
||||
"config": {
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"data": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat"
|
||||
]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"data": "${line || []}",
|
||||
"type": "line"
|
||||
}
|
||||
]
|
||||
},
|
||||
"onEvent": {
|
||||
"init": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "init"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### click
|
||||
|
||||
用户鼠标操作点击时触发，例如点击下图蓝色线条上的数据点，将弹出详情。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "详情",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "<span>当前选中值 ${value|json}<span>"
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"api": "/api/mock2/chart/chart1"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "极坐标双数值轴"
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"line"
|
||||
]
|
||||
},
|
||||
"polar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"54%"
|
||||
]
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross"
|
||||
}
|
||||
},
|
||||
"angleAxis": {
|
||||
"type": "value",
|
||||
"startAngle": 0
|
||||
},
|
||||
"radiusAxis": {
|
||||
"min": 0
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"coordinateSystem": "polar",
|
||||
"name": "line",
|
||||
"type": "line",
|
||||
"showSymbol": false,
|
||||
"data": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0.03487823687206265,
|
||||
1
|
||||
],
|
||||
[
|
||||
0.06958655048003272,
|
||||
2
|
||||
],
|
||||
[
|
||||
0.10395584540887964,
|
||||
3
|
||||
],
|
||||
[
|
||||
0.13781867790849958,
|
||||
4
|
||||
],
|
||||
[
|
||||
0.17101007166283433,
|
||||
5
|
||||
],
|
||||
[
|
||||
0.2033683215379001,
|
||||
6
|
||||
],
|
||||
[
|
||||
0.2347357813929454,
|
||||
7
|
||||
],
|
||||
[
|
||||
0.26495963211660245,
|
||||
8
|
||||
],
|
||||
[
|
||||
0.2938926261462365,
|
||||
9
|
||||
],
|
||||
[
|
||||
0.3213938048432697,
|
||||
10
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
"animationDuration": 2000
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseover
|
||||
|
||||
用户鼠标悬浮时触发，例如炫富到下图蓝色线条上的数据点，将弹出详情。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"onEvent": {
|
||||
"mouseover": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "详情",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "<span>当前选中值 ${value|json}<span>"
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"api": "/api/mock2/chart/chart1"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "极坐标双数值轴"
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"line"
|
||||
]
|
||||
},
|
||||
"polar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"54%"
|
||||
]
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross"
|
||||
}
|
||||
},
|
||||
"angleAxis": {
|
||||
"type": "value",
|
||||
"startAngle": 0
|
||||
},
|
||||
"radiusAxis": {
|
||||
"min": 0
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"coordinateSystem": "polar",
|
||||
"name": "line",
|
||||
"type": "line",
|
||||
"showSymbol": false,
|
||||
"data": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0.03487823687206265,
|
||||
1
|
||||
],
|
||||
[
|
||||
0.06958655048003272,
|
||||
2
|
||||
],
|
||||
[
|
||||
0.10395584540887964,
|
||||
3
|
||||
],
|
||||
[
|
||||
0.13781867790849958,
|
||||
4
|
||||
],
|
||||
[
|
||||
0.17101007166283433,
|
||||
5
|
||||
],
|
||||
[
|
||||
0.2033683215379001,
|
||||
6
|
||||
],
|
||||
[
|
||||
0.2347357813929454,
|
||||
7
|
||||
],
|
||||
[
|
||||
0.26495963211660245,
|
||||
8
|
||||
],
|
||||
[
|
||||
0.2938926261462365,
|
||||
9
|
||||
],
|
||||
[
|
||||
0.3213938048432697,
|
||||
10
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
"animationDuration": 2000
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### legendselectchanged
|
||||
|
||||
图例开关的行为会触发 legendselectchanged 事件。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"onEvent": {
|
||||
"legendselectchanged": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "${event.data|json}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "极坐标双数值轴"
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"line"
|
||||
]
|
||||
},
|
||||
"polar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"54%"
|
||||
]
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross"
|
||||
}
|
||||
},
|
||||
"angleAxis": {
|
||||
"type": "value",
|
||||
"startAngle": 0
|
||||
},
|
||||
"radiusAxis": {
|
||||
"min": 0
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"coordinateSystem": "polar",
|
||||
"name": "line",
|
||||
"type": "line",
|
||||
"showSymbol": false,
|
||||
"data": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0.03487823687206265,
|
||||
1
|
||||
],
|
||||
[
|
||||
0.06958655048003272,
|
||||
2
|
||||
],
|
||||
[
|
||||
0.10395584540887964,
|
||||
3
|
||||
],
|
||||
[
|
||||
0.13781867790849958,
|
||||
4
|
||||
],
|
||||
[
|
||||
0.17101007166283433,
|
||||
5
|
||||
],
|
||||
[
|
||||
0.2033683215379001,
|
||||
6
|
||||
],
|
||||
[
|
||||
0.2347357813929454,
|
||||
7
|
||||
],
|
||||
[
|
||||
0.26495963211660245,
|
||||
8
|
||||
],
|
||||
[
|
||||
0.2938926261462365,
|
||||
9
|
||||
],
|
||||
[
|
||||
0.3213938048432697,
|
||||
10
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
"animationDuration": 2000
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
@ -716,3 +1098,217 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
|
||||
| setValue | `value: object` 更新的数据 | 更新数据，等于更新图表所依赖数据域中的变量 |
|
||||
|
||||
2.4.1 及以上版本，除了以上动作，还支持直接触发[ECharts 组件行为](https://echarts.apache.org/handbook/zh/concepts/event/#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA)，即通过`actionType`指定行为名称，行为配置通过`args: {动作配置项名称: xxx}`来配置具体的参数。
|
||||
|
||||
### reload
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "刷新请求",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "chart01",
|
||||
"actionType": "reload"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"id": "chart01",
|
||||
"api": "/api/mock2/chart/chartData",
|
||||
"config": {
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"data": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat"
|
||||
]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"data": "${line || []}",
|
||||
"type": "line"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### setValue
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "更新数据",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "chart02",
|
||||
"actionType": "setValue",
|
||||
"args": {
|
||||
"value": {"line":[98,41,51,2,90,40]}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"id": "chart02",
|
||||
"api": "/api/mock2/chart/chartData",
|
||||
"config": {
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"data": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat"
|
||||
]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"data": "${line || []}",
|
||||
"type": "line"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 其他动作
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "显示提示框",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "chart03",
|
||||
"actionType": "showTip",
|
||||
"args": {
|
||||
"type": "showTip",
|
||||
"seriesIndex": 0,
|
||||
"name": "",
|
||||
"dataIndex": 8
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"id": "chart03",
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "极坐标双数值轴"
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"line"
|
||||
]
|
||||
},
|
||||
"polar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"54%"
|
||||
]
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross"
|
||||
}
|
||||
},
|
||||
"angleAxis": {
|
||||
"type": "value",
|
||||
"startAngle": 0
|
||||
},
|
||||
"radiusAxis": {
|
||||
"min": 0
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"coordinateSystem": "polar",
|
||||
"name": "line",
|
||||
"type": "line",
|
||||
"showSymbol": false,
|
||||
"data": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0.03487823687206265,
|
||||
1
|
||||
],
|
||||
[
|
||||
0.06958655048003272,
|
||||
2
|
||||
],
|
||||
[
|
||||
0.10395584540887964,
|
||||
3
|
||||
],
|
||||
[
|
||||
0.13781867790849958,
|
||||
4
|
||||
],
|
||||
[
|
||||
0.17101007166283433,
|
||||
5
|
||||
],
|
||||
[
|
||||
0.2033683215379001,
|
||||
6
|
||||
],
|
||||
[
|
||||
0.2347357813929454,
|
||||
7
|
||||
],
|
||||
[
|
||||
0.26495963211660245,
|
||||
8
|
||||
],
|
||||
[
|
||||
0.2938926261462365,
|
||||
9
|
||||
],
|
||||
[
|
||||
0.3213938048432697,
|
||||
10
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
"animationDuration": 2000
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
@ -2975,3 +2975,741 @@ itemAction 里的 onClick 还能通过 `data` 参数拿到当前行的数据，
|
||||
| icon | `string` | | 按钮的图标 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| btnClassName | `string` | | 按钮的 CSS 类名 |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------------- | ----------------------------------------------------------------------- | -------------------- |
|
||||
| selectedChange | `selectedItems: item[]` 已选择行<br/>`unSelectedItems: item[]` 未选择行 | 手动选择表格项时触发 |
|
||||
| columnSort | `orderBy: string` 列排序列名<br/>`orderDir: string` 列排序值 | 点击列排序时触发 |
|
||||
| columnFilter | `filterName: string` 列筛选列名<br/>`filterValue: string` 列筛选值 | 点击列筛选时触发 |
|
||||
| columnSearch | `searchName: string` 列搜索列名<br/>`searchValue: object` 列搜索数据 | 点击列搜索时触发 |
|
||||
| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 |
|
||||
| columnToggled | `columns: item[]` 当前显示的列配置数据 | 点击自定义列时触发 |
|
||||
| rowClick | `item: object` 行点击数据<br/>`index: number` 行索引 | 点击整行时触发 |
|
||||
| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 | 移入整行时触发 |
|
||||
| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 | 移出整行时触发 |
|
||||
|
||||
### selectedChange
|
||||
|
||||
在开启批量操作后才会用到，可以尝试勾选列表的行记录。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"syncLocation": false,
|
||||
"onEvent": {
|
||||
"selectedChange": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "已选择${event.data.selectedItems.length}条记录"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
}
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID"
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine"
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### columnSort
|
||||
|
||||
列排序，可以尝试点击`Browser`列右侧的排序图标。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"syncLocation": false,
|
||||
"onEvent": {
|
||||
"columnSort": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "orderBy：${event.data.orderBy},orderDir：${event.data.orderDir}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
}
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### columnFilter
|
||||
|
||||
列过滤，可以尝试点击`Rendering engine`列右侧的筛选图标。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"syncLocation": false,
|
||||
"onEvent": {
|
||||
"columnFilter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "filterName：${event.data.filterName},filterValue：${event.data.filterValue}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
}
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### columnSearch
|
||||
|
||||
列检索，，可以尝试点击`ID`列右侧的检索图标。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"syncLocation": false,
|
||||
"onEvent": {
|
||||
"columnSearch": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "searchName：${event.data.searchName},searchValue：${event.data.searchValue|json}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
}
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### columnToggled
|
||||
|
||||
点击自定义列，可以尝试修改`自定义列`的配置。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"syncLocation": false,
|
||||
"onEvent": {
|
||||
"columnToggled": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "当前显示${event.data.columns.length}列"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
}
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### orderChange
|
||||
|
||||
在开启拖拽排序行记录后才会用到，排序确认后触发。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"syncLocation": false,
|
||||
"draggable": true,
|
||||
"onEvent": {
|
||||
"orderChange": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.data.movedItems.length}行发生移动"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
}
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### rowClick
|
||||
|
||||
点击行记录。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"syncLocation": false,
|
||||
"onEvent": {
|
||||
"rowClick": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "行单击数据：${event.data.item|json}；行索引：${event.data.index}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
}
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### rowMouseEnter
|
||||
|
||||
鼠标移入行记录。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"syncLocation": false,
|
||||
"onEvent": {
|
||||
"rowMouseEnter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "行索引：${event.data.index}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
}
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### rowMouseLeave
|
||||
|
||||
鼠标移出行记录。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"syncLocation": false,
|
||||
"onEvent": {
|
||||
"rowMouseLeave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "行索引：${event.data.index}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
}
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 列的事件表
|
||||
|
||||
表格的默认列定义的事件如下，即 click、mouseenter、mouseleave。如果列定义是其他组件，则事件表就是这个组件对应的事件表，例如列定义是 Switch 组件，则可以监听 [Switch 的 change 事件](./form/switch#%E4%BA%8B%E4%BB%B6%E8%A1%A8)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | ----------------------------------- | ---------------------------------------------- |
|
||||
| click | `[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |
|
||||
| mouseenter | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |
|
||||
| mouseleave | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移出事件，表格数据鼠标移出时触发 |
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"syncLocation": false,
|
||||
"bulkActions": [
|
||||
{
|
||||
"label": "批量删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/mock2/sample/${ids|raw}",
|
||||
"confirmText": "确定要批量删除?"
|
||||
}
|
||||
],
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
},
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "第${event.data.index}行的${event.data.engine}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true,
|
||||
"onEvent": {
|
||||
"mouseenter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "第${event.data.index}行的${event.data.browser}"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"mouseleave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "第${event.data.index}行的${event.data.browser}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -905,7 +905,7 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
|
||||
|
||||
@ -914,6 +914,103 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
|
||||
| confirm | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |
|
||||
| cancel | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击取消时触发 |
|
||||
|
||||
### confirm
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"label": "弹个框",
|
||||
"type": "button",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "一个弹框",
|
||||
"body": [
|
||||
{
|
||||
"type": "alert",
|
||||
"body": "试试点击确认按钮",
|
||||
"level": "info",
|
||||
"className": "mb-1"
|
||||
},
|
||||
{
|
||||
"type": "form",
|
||||
"title": "表单",
|
||||
"debug": true,
|
||||
"body": [
|
||||
{
|
||||
"label": "你的名字",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"id": "u:00ef9e3fe9db",
|
||||
"editorState": "default",
|
||||
"mode": "horizontal",
|
||||
"size": "md",
|
||||
"value": "Amis"
|
||||
}
|
||||
],
|
||||
"id": "u:f4b2a90b685b"
|
||||
}
|
||||
],
|
||||
"onEvent": {
|
||||
"confirm": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "你的名字是${name}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### cancel
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"label": "弹个框",
|
||||
"type": "button",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "一个弹窗",
|
||||
"body": "试试点击取消按钮或者右上角的关闭",
|
||||
"onEvent": {
|
||||
"cancel": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "cancel"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
|
||||
@ -462,13 +462,85 @@ order: 43
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | ------------------------------------------------------------------------ | ------------------ |
|
||||
| confirm | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |
|
||||
| cancel | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击取消时触发 |
|
||||
|
||||
### confirm
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"label": "点击弹框",
|
||||
"type": "button",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "弹框标题",
|
||||
"body": "这是一个弹框",
|
||||
"onEvent": {
|
||||
"confirm": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "confirm"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### cancel
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"label": "点击弹框",
|
||||
"type": "button",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "弹框标题",
|
||||
"body": "这是一个弹框",
|
||||
"onEvent": {
|
||||
"cancel": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "cancel"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
|
||||
@ -279,13 +279,79 @@ order: 44
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | ---------------------------- | --------------------------------------- |
|
||||
| mouseenter | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移入时触发 |
|
||||
| mouseleave | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移出时触发 |
|
||||
|
||||
### mouseenter
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "dropdown-button",
|
||||
"label": "下拉按钮",
|
||||
"trigger": "hover",
|
||||
"onEvent": {
|
||||
"mouseenter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "mouseenter ${event.data.items.length}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮1"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮2"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### mouseleave
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "dropdown-button",
|
||||
"label": "下拉按钮",
|
||||
"trigger": "hover",
|
||||
"onEvent": {
|
||||
"mouseleave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "mouseleave ${event.data.items.length}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮1"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮2"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
暂无
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -1449,8 +1449,10 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| inited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 |
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -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}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -292,17 +292,62 @@ interface ListBodyField {
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 | 版本 |
|
||||
| --------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
|
||||
| itemClick | `item: IItem` | 单行被点击时触发，[`IItem`](./list#iitem)为点击行的信息。注意`itemAction`和`onEvent`是互斥的，List 组件中的`onEvent`会覆盖`itemAction`的行为 | `2.4.0` |
|
||||
| 事件名称 | 事件参数 | 说明 | 版本 |
|
||||
| --------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------- |
|
||||
| itemClick | `item: IItem` | 单行被点击时触发，`IItem`为点击行的信息。注意`itemAction`和`onEvent`是互斥的，List 组件中的`onEvent`会覆盖`itemAction`的行为 | `2.4.0` |
|
||||
|
||||
### IItem
|
||||
**IItem**
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------ | --------------------- | ------ | ------------------- |
|
||||
| data | `Record<string, any>` | | 当前行所在数据域 |
|
||||
| index | `number` | | 行索引值，从 0 开始 |
|
||||
|
||||
### itemClick
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=5",
|
||||
"body": [
|
||||
{
|
||||
"type": "list",
|
||||
"source": "$rows",
|
||||
"listItem": {
|
||||
"body": [
|
||||
{
|
||||
"type": "hbox",
|
||||
"columns": [
|
||||
{
|
||||
"label": "Engine",
|
||||
"name": "engine"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"onEvent": {
|
||||
"itemClick": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.data.item.index} ${event.data.item.data.engine}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -282,7 +282,7 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
|
||||
|
||||
@ -292,6 +292,45 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
|
||||
| inited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 |
|
||||
| pullRefresh | - | 开启下拉刷新后，下拉释放后触发（仅用于移动端） |
|
||||
|
||||
### init 和 inited
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/mock2/page/initData",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "当前时间是：${date}"
|
||||
}
|
||||
],
|
||||
"onEvent": {
|
||||
"init": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "init"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"inited": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.data.responseData|json}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
@ -300,3 +339,66 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
|
||||
| -------- | -------------------------- | ---------------------------------------- |
|
||||
| reload | - | 重新加载，调用 `intiApi`，刷新数据域数据 |
|
||||
| setValue | `value: object` 更新的数据 | 更新数据 |
|
||||
|
||||
### reload
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"id": "page01",
|
||||
"initApi": "/api/mock2/page/initData",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "当前时间是：${date}"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "刷新请求",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "page01",
|
||||
"actionType": "reload"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### setValue
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"id": "page02",
|
||||
"initApi": "/api/mock2/page/initData",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "当前时间是：${date}"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "更新数据",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "page02",
|
||||
"actionType": "setValue",
|
||||
"args": {
|
||||
"value": {"date": "2023-05-01"}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -739,7 +739,7 @@ ws.on('connection', function connection(ws) {
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
|
||||
|
||||
@ -749,6 +749,89 @@ ws.on('connection', function connection(ws) {
|
||||
| fetchInited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | api 接口请求完成时触发 |
|
||||
| fetchSchemaInited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | schemaApi 接口请求完成时触发 |
|
||||
|
||||
### init
|
||||
|
||||
开始初始化。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/page/initData",
|
||||
"body": {
|
||||
"type": "panel",
|
||||
"title": "$title",
|
||||
"body": "现在是：${date}"
|
||||
},
|
||||
"onEvent": {
|
||||
"init": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "init"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### fetchInited
|
||||
|
||||
api 接口请求完成。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/page/initData",
|
||||
"body": [
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "$title",
|
||||
"body": "现在是：${date}"
|
||||
}
|
||||
],
|
||||
"onEvent": {
|
||||
"fetchInited": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "title:${event.data.responseData.title}，date:${date}，status:${event.data.responseStatus}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### fetchSchemaInited
|
||||
|
||||
schemaApi 接口请求完成。
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "service",
|
||||
"schemaApi": "/api/mock2/service/schema?type=tabs",
|
||||
"onEvent": {
|
||||
"fetchSchemaInited": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "type:${event.data.responseData.type}，status:${event.data.responseStatus}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
@ -758,3 +841,169 @@ ws.on('connection', function connection(ws) {
|
||||
| reload | - | 重新加载，调用 `api`，刷新数据域数据 |
|
||||
| rebuild | - | 重新构建，调用 `schemaApi`，重新构建容器内 Schema |
|
||||
| setValue | - | 更新数据域数据 |
|
||||
|
||||
### reload
|
||||
|
||||
重新请求 api 接口，并刷新。
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "刷新请求",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "service-reload",
|
||||
"actionType": "reload"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"id": "service-reload",
|
||||
"name": "service-reload",
|
||||
"api": "/api/mock2/number/random",
|
||||
"body": "现在是：${random}"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### rebuild
|
||||
|
||||
重新构建，基于 args 传参和 schemaApi 绑定变量，让 service 获取不同的 schema。
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "alert",
|
||||
"body": "请选择一种构建方式生成组件",
|
||||
"level": "info",
|
||||
"showIcon": true,
|
||||
"className": "mb-3",
|
||||
"visibleOn": "this.schemaType == null"
|
||||
},
|
||||
{
|
||||
"type": "button-group",
|
||||
"tiled": true,
|
||||
"className": "mb-3",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "action",
|
||||
"label": "构建form",
|
||||
"icon": "fa fa-hammer",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "rebuild",
|
||||
"componentId": "service-rebuild",
|
||||
"args": {
|
||||
"schemaType": "form"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "构建tabs",
|
||||
"icon": "fa fa-hammer",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "rebuild",
|
||||
"componentId": "service-rebuild",
|
||||
"args": {
|
||||
"schemaType": "tabs"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "构建crud",
|
||||
"icon": "fa fa-hammer",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "rebuild",
|
||||
"componentId": "service-rebuild",
|
||||
"args": {
|
||||
"schemaType": "crud"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"id": "service-rebuild",
|
||||
"name": "service-rebuild",
|
||||
"schemaApi": {
|
||||
"url": "/api/mock2/service/schema?type=${schemaType}",
|
||||
"method": "post",
|
||||
"sendOn": "this.schemaType != null"
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### setValue
|
||||
|
||||
更新数据域。
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "更新数据",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "setValue",
|
||||
"componentId": "service-setvalue",
|
||||
"args": {
|
||||
"value": {
|
||||
"language": [
|
||||
"🇨🇳 中国"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"id": "service-setvalue",
|
||||
"name": "service-setvalue",
|
||||
"data": {
|
||||
"language": [
|
||||
"🇺🇸 美国"
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"type": "each",
|
||||
"name": "language",
|
||||
"items": {
|
||||
"type": "tpl",
|
||||
"tpl": "<span class='label label-default m-l-sm'><%= data.item %></span> "
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
@ -1862,7 +1862,7 @@ popOver 的其它配置请参考 [popover](./popover)
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------------- | ----------------------------------------------------------------------- | -------------------- |
|
||||
@ -1876,17 +1876,670 @@ popOver 的其它配置请参考 [popover](./popover)
|
||||
| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 | 移入整行时触发 |
|
||||
| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 | 移出整行时触发 |
|
||||
|
||||
### 列配置事件表
|
||||
### selectedChange
|
||||
|
||||
> 2.6.1 及以上版本
|
||||
在开启批量操作后才会用到，可以尝试勾选列表的行记录。
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"selectable": true,
|
||||
"onEvent": {
|
||||
"selectedChange": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "已选择${event.data.selectedItems.length}条记录"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID"
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine"
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | ------------------------------------------------------------------------------ | ---------------------------------------------- |
|
||||
| click | `nativeEvent: MouseEvent` 鼠标事件对象<br/>`[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |
|
||||
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象<br/>`[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |
|
||||
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象<br/>`[columnName]: string` 对应列名的值 | 监听表格列鼠标移出事件，表格数据鼠标移出时触发 |
|
||||
### columnSort
|
||||
|
||||
列排序，可以尝试点击`Browser`列右侧的排序图标。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"onEvent": {
|
||||
"columnSort": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "orderBy：${event.data.orderBy},orderDir：${event.data.orderDir}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### columnFilter
|
||||
|
||||
列过滤，可以尝试点击`Rendering engine`列右侧的筛选图标。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"onEvent": {
|
||||
"columnFilter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "filterName：${event.data.filterName},filterValue：${event.data.filterValue}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### columnSearch
|
||||
|
||||
列检索，，可以尝试点击`ID`列右侧的检索图标。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"onEvent": {
|
||||
"columnSearch": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "searchName：${event.data.searchName},searchValue：${event.data.searchValue|json}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### columnToggled
|
||||
|
||||
点击自定义列，可以尝试修改`自定义列`的配置。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"onEvent": {
|
||||
"columnToggled": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "当前显示${event.data.columns.length}列"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### orderChange
|
||||
|
||||
在开启拖拽排序行记录后才会用到，排序确认后触发。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"draggable": true,
|
||||
"onEvent": {
|
||||
"orderChange": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.data.movedItems.length}行发生移动"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### rowClick
|
||||
|
||||
点击行记录。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"onEvent": {
|
||||
"rowClick": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "行单击数据：${event.data.item|json}；行索引：${event.data.index}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### rowMouseEnter
|
||||
|
||||
鼠标移入行记录。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"onEvent": {
|
||||
"rowMouseEnter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "行索引：${event.data.index}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### rowMouseLeave
|
||||
|
||||
鼠标移出行记录。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"onEvent": {
|
||||
"rowMouseLeave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "行索引：${event.data.index}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 列的事件表
|
||||
|
||||
表格的默认列定义的事件如下，即 click、mouseenter、mouseleave。如果列定义是其他组件，则事件表就是这个组件对应的事件表，例如列定义是 Switch 组件，则可以监听 [Switch 的 change 事件](./form/switch#%E4%BA%8B%E4%BB%B6%E8%A1%A8)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | ----------------------------------- | ---------------------------------------------- |
|
||||
| click | `[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |
|
||||
| mouseenter | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |
|
||||
| mouseleave | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移出事件，表格数据鼠标移出时触发 |
|
||||
|
||||
可以尝试点击某行的`Rendering engine`列数据、鼠标移入某行的`Browser`列数据。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID",
|
||||
"searchable": true
|
||||
},
|
||||
{
|
||||
"name": "engine",
|
||||
"label": "Rendering engine",
|
||||
"filterable": {
|
||||
"options": [
|
||||
"Internet Explorer 4.0",
|
||||
"Internet Explorer 5.0"
|
||||
]
|
||||
},
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "第${event.data.index}行的${event.data.engine}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"sortable": true,
|
||||
"onEvent": {
|
||||
"mouseenter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "第${event.data.index}行的${event.data.browser}"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"mouseleave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "第${event.data.index}行的${event.data.browser}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "platform",
|
||||
"label": "Platform(s)"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS grade"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
@ -1898,3 +2551,234 @@ popOver 的其它配置请参考 [popover](./popover)
|
||||
| selectAll | - | 设置表格全部项选中 |
|
||||
| clearAll | - | 清空表格所有选中项 |
|
||||
| initDrag | - | 开启表格拖拽排序功能 |
|
||||
|
||||
### select
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"className": "m-b",
|
||||
"buttons": [
|
||||
{
|
||||
"name": "trigger1",
|
||||
"id": "trigger1",
|
||||
"type": "action",
|
||||
"label": "设置表格第一项选中",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "select",
|
||||
"componentId": "table-select",
|
||||
"description": "点击设置指定表格第一项内容选中",
|
||||
"args": {
|
||||
"selected": "data.rowIndex === 0"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"id": "table-select",
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"selectable": true,
|
||||
"multiple": true,
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID"
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### select
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"className": "m-b",
|
||||
"buttons": [
|
||||
{
|
||||
"name": "trigger2",
|
||||
"id": "trigger2",
|
||||
"type": "action",
|
||||
"label": "设置表格全部项选中",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "selectAll",
|
||||
"componentId": "table-select",
|
||||
"description": "点击设置指定表格全部内容选中"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"id": "table-select",
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"selectable": true,
|
||||
"multiple": true,
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID"
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### select
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"className": "m-b",
|
||||
"buttons": [
|
||||
{
|
||||
"name": "trigger3",
|
||||
"id": "trigger3",
|
||||
"type": "action",
|
||||
"label": "清空表格全部选中项",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "clearAll",
|
||||
"componentId": "table-select",
|
||||
"description": "点击设置指定表格全部选中项清空"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"id": "table-select",
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"selectable": true,
|
||||
"multiple": true,
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID"
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### select
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"className": "m-b",
|
||||
"buttons": [
|
||||
{
|
||||
"name": "trigger4",
|
||||
"id": "trigger4",
|
||||
"type": "action",
|
||||
"label": "开启表格行排序",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "initDrag",
|
||||
"componentId": "table-select",
|
||||
"description": "点击开启表格行排序功能"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=10",
|
||||
"body": [
|
||||
{
|
||||
"id": "table-select",
|
||||
"type": "table",
|
||||
"source": "$rows",
|
||||
"selectable": true,
|
||||
"multiple": true,
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "ID"
|
||||
},
|
||||
{
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
@ -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}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -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}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -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}获取对应的值。
|
||||
|
||||
|
||||
@ -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),
|
||||
|
||||
@ -991,10 +991,7 @@ export class ActionRenderer extends React.Component<ActionRendererProps> {
|
||||
let mergedData = data;
|
||||
|
||||
if (action?.actionType === 'click' && isObject(action?.args)) {
|
||||
mergedData = createObject(data, {
|
||||
...action.args,
|
||||
nativeEvent: e
|
||||
});
|
||||
mergedData = createObject(data, action.args);
|
||||
}
|
||||
|
||||
const hasOnEvent = $schema.onEvent && Object.keys($schema.onEvent).length;
|
||||
|
||||
@ -46,34 +46,19 @@ export class Icon extends React.Component<IconProps, object> {
|
||||
@autobind
|
||||
handleClick(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
'click',
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
dispatchEvent(e, data);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseEnter(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
e,
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
dispatchEvent(e, data);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseLeave(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
e,
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
dispatchEvent(e, data);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@ -99,7 +99,7 @@ export class TagField extends React.Component<TagProps, object> {
|
||||
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<TagProps, object> {
|
||||
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<TagProps, object> {
|
||||
const {data} = this.props;
|
||||
|
||||
return createObject(data, {
|
||||
nativeEvent,
|
||||
label: this.resolveLabel()
|
||||
}) as {
|
||||
[propName: string]: any;
|
||||
nativeEvent: React.MouseEvent<T>;
|
||||
label: string;
|
||||
};
|
||||
}
|
||||
|
||||
@ -159,34 +159,19 @@ export class Tpl extends React.Component<TplProps, TplState> {
|
||||
@autobind
|
||||
handleClick(e: React.MouseEvent<HTMLDivElement>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
'click',
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
dispatchEvent(e, data);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseEnter(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
e,
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
dispatchEvent(e, data);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseLeave(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
e,
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
dispatchEvent(e, data);
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user