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
@ -1037,17 +1037,90 @@ action 还可以使用 `body` 来渲染其他组件，让那些不支持行为
|
|||||||
| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |
|
| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |
|
||||||
|
|
||||||
### TooltipObject
|
### TooltipObject
|
||||||
|
|
||||||
`TooltipObject` 为 [tooltip-wrapper](./tooltip) 属性配置，但是不需要配置如下属性 `type`、`body`、`wrapperComponent`、`className`、`inline`。
|
`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` 鼠标事件对象 | 点击时触发 |
|
| click | - | 点击时触发 |
|
||||||
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
|
| mouseenter | - | 鼠标移入时触发 |
|
||||||
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
|
| 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)。
|
||||||
|
|
||||||
| 事件名称 | 事件参数 | 说明 |
|
| 事件名称 | 事件参数 | 说明 |
|
||||||
| -------- | -------- | --------------------------------------------------- |
|
| -------- | -------- | --------------------------------------------------- |
|
||||||
|
|||||||
@ -135,7 +135,7 @@ itemSchema: {
|
|||||||
## 属性表
|
## 属性表
|
||||||
|
|
||||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||||
| ---------------------------- | --------- | ---------------------- | ------------------------------------------------------- | --- |
|
| ---------------------------- | ----------------------------------------------------- | ---------------------- | ------------------------------------------------------- | ------- |
|
||||||
| type | `string` | `"carousel"` | 指定为 Carousel 渲染器 |
|
| type | `string` | `"carousel"` | 指定为 Carousel 渲染器 |
|
||||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||||
| options | `array` | `[]` | 轮播面板数据 |
|
| options | `array` | `[]` | 轮播面板数据 |
|
||||||
@ -163,12 +163,48 @@ itemSchema: {
|
|||||||
|
|
||||||
## 事件表
|
## 事件表
|
||||||
|
|
||||||
当前组件会对外派发以下事件，可以通过`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 | `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#触发其他组件的动作)。
|
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||||
@ -178,3 +214,132 @@ itemSchema: {
|
|||||||
| next | - | 下一张 |
|
| next | - | 下一张 |
|
||||||
| prev | - | 上一张 |
|
| prev | - | 上一张 |
|
||||||
| goto-image | `activeIndex: number` 切换图片的索引 | 切换轮播图 |
|
| 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 及以上版本
|
> 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/) | 鼠标悬浮时触发 |
|
| mouseover | 查看[ECharst 事件与行为文档](https://echarts.apache.org/handbook/zh/concepts/event/) | 鼠标悬浮时触发 |
|
||||||
| legendselectchanged | 查看[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#触发其他组件的动作)。
|
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||||
@ -716,3 +1098,217 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
|
|||||||
| setValue | `value: object` 更新的数据 | 更新数据，等于更新图表所依赖数据域中的变量 |
|
| 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}`来配置具体的参数。
|
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` | | 按钮的图标 |
|
| icon | `string` | | 按钮的图标 |
|
||||||
| className | `string` | | 外层 CSS 类名 |
|
| className | `string` | | 外层 CSS 类名 |
|
||||||
| btnClassName | `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}获取对应的值。
|
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
|
||||||
|
|
||||||
@ -914,6 +914,103 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
|
|||||||
| confirm | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |
|
| confirm | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |
|
||||||
| cancel | `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#触发其他组件的动作)。
|
当前组件对外暴露以下特性动作，其他组件可以通过指定`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` 当前数据域中指定字段的值 | 点击确认提交时触发 |
|
| confirm | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |
|
||||||
| cancel | `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#触发其他组件的动作)。
|
当前组件对外暴露以下特性动作，其他组件可以通过指定`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 模式下，鼠标移入时触发 |
|
| mouseenter | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移入时触发 |
|
||||||
| mouseleave | 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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||||
|
|
||||||
|
|||||||
@ -158,7 +158,7 @@ amis 的编辑器是基于 monaco 开发的，如果想进行深度定制，比
|
|||||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||||
|
|
||||||
| 属性名 | 类型 | 默认值 | 说明 |
|
| 属性名 | 类型 | 默认值 | 说明 |
|
||||||
| --------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
| --------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| language | `string` | `javascript` | 编辑器高亮的语言，支持通过 `${xxx}` 变量获取 |
|
| language | `string` | `javascript` | 编辑器高亮的语言，支持通过 `${xxx}` 变量获取 |
|
||||||
| size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` |
|
| size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` |
|
||||||
| allowFullscreen | `boolean` | `false` | 是否显示全屏模式开关 |
|
| allowFullscreen | `boolean` | `false` | 是否显示全屏模式开关 |
|
||||||
@ -167,7 +167,7 @@ amis 的编辑器是基于 monaco 开发的，如果想进行深度定制，比
|
|||||||
|
|
||||||
## 事件表
|
## 事件表
|
||||||
|
|
||||||
当前组件会对外派发以下事件，可以通过`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`取值。
|
> `[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 接口请求完成时触发 |
|
| 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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[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`取值。
|
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||||
|
|
||||||
|
|||||||
@ -211,10 +211,82 @@ v6 用 fa-regular / fa-solid 等表示前缀，可参考官网[示例](https://f
|
|||||||
|
|
||||||
> 2.6.1 及以上版本
|
> 2.6.1 及以上版本
|
||||||
|
|
||||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||||
|
|
||||||
| 事件名称 | 事件参数 | 说明 |
|
| 事件名称 | 事件参数 | 说明 |
|
||||||
| ---------- | -------------------------------------- | -------------- |
|
| ---------- | -------- | -------------- |
|
||||||
| click | `nativeEvent: MouseEvent` 鼠标事件对象 | 点击时触发 |
|
| click | - | 点击时触发 |
|
||||||
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
|
| mouseenter | - | 鼠标移入时触发 |
|
||||||
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
|
| 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`取值。
|
> `[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>` | | 当前行所在数据域 |
|
| data | `Record<string, any>` | | 当前行所在数据域 |
|
||||||
| index | `number` | | 行索引值，从 0 开始 |
|
| 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}获取对应的值。
|
> `[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 接口请求完成时触发 |
|
| inited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 |
|
||||||
| pullRefresh | - | 开启下拉刷新后，下拉释放后触发（仅用于移动端） |
|
| 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#触发其他组件的动作)。
|
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||||
@ -300,3 +339,66 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
|
|||||||
| -------- | -------------------------- | ---------------------------------------- |
|
| -------- | -------------------------- | ---------------------------------------- |
|
||||||
| reload | - | 重新加载，调用 `intiApi`，刷新数据域数据 |
|
| reload | - | 重新加载，调用 `intiApi`，刷新数据域数据 |
|
||||||
| setValue | `value: object` 更新的数据 | 更新数据 |
|
| 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 及以上版本
|
> 2.4.1 及以上版本
|
||||||
|
|
||||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||||
|
|
||||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||||
|
|
||||||
@ -213,6 +213,114 @@ icon:
|
|||||||
| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |
|
| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |
|
||||||
| blur | `[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 及以上版本
|
> 2.4.1 及以上版本
|
||||||
@ -223,3 +331,66 @@ icon:
|
|||||||
| -------- | ------------------------ | -------- |
|
| -------- | ------------------------ | -------- |
|
||||||
| clear | - | 清空 |
|
| clear | - | 清空 |
|
||||||
| setValue | `value: string` 更新的值 | 更新数据 |
|
| 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}获取对应的值。
|
> `[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 接口请求完成时触发 |
|
| 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 接口请求完成时触发 |
|
| 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#触发其他组件的动作)。
|
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||||
@ -758,3 +841,169 @@ ws.on('connection', function connection(ws) {
|
|||||||
| reload | - | 重新加载，调用 `api`，刷新数据域数据 |
|
| reload | - | 重新加载，调用 `api`，刷新数据域数据 |
|
||||||
| rebuild | - | 重新构建，调用 `schemaApi`，重新构建容器内 Schema |
|
| rebuild | - | 重新构建，调用 `schemaApi`，重新构建容器内 Schema |
|
||||||
| setValue | - | 更新数据域数据 |
|
| 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` 行索引 | 移入整行时触发 |
|
| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 | 移入整行时触发 |
|
||||||
| rowMouseLeave | `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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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 | `nativeEvent: MouseEvent` 鼠标事件对象<br/>`[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |
|
| click | `[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |
|
||||||
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象<br/>`[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |
|
| mouseenter | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |
|
||||||
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象<br/>`[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 | - | 设置表格全部项选中 |
|
| selectAll | - | 设置表格全部项选中 |
|
||||||
| clearAll | - | 清空表格所有选中项 |
|
| clearAll | - | 清空表格所有选中项 |
|
||||||
| initDrag | - | 开启表格拖拽排序功能 |
|
| 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`取值。
|
> `[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 | `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 及以上版本
|
> 2.6.1 及以上版本
|
||||||
|
|
||||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||||
|
|
||||||
| 事件名称 | 事件参数 | 说明 |
|
| 事件名称 | 事件参数 | 说明 |
|
||||||
| ---------- | ------------------------------------------------------- | ---------------- |
|
| ---------- | ---------------------------- | ---------------- |
|
||||||
| click | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `点击`时触发 |
|
| click | `label: string` 鼠标事件对象 | `点击`时触发 |
|
||||||
| mouseenter | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `鼠标移入`时触发 |
|
| mouseenter | `label: string` 鼠标事件对象 | `鼠标移入`时触发 |
|
||||||
| mouseleave | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `鼠标移出`时触发 |
|
| mouseleave | `label: string` 鼠标事件对象 | `鼠标移出`时触发 |
|
||||||
| close | `{nativeEvent: MouseEvent, 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 及以上版本
|
> 2.5.3 及以上版本
|
||||||
|
|
||||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||||
|
|
||||||
| 事件名称 | 事件参数 | 说明 |
|
| 事件名称 | 事件参数 | 说明 |
|
||||||
| ---------- | -------------------------------------- | -------------- |
|
| ---------- | -------- | -------------- |
|
||||||
| click | `nativeEvent: MouseEvent` 鼠标事件对象 | 点击时触发 |
|
| click | - | 点击时触发 |
|
||||||
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
|
| mouseenter | - | 鼠标移入时触发 |
|
||||||
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
|
| 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}获取对应的值。
|
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
|
||||||
|
|
||||||
|
|||||||
@ -37,7 +37,7 @@ export class ToastAction implements RendererAction {
|
|||||||
if (!renderer.props.env?.notify) {
|
if (!renderer.props.env?.notify) {
|
||||||
throw new Error('env.notify is required!');
|
throw new Error('env.notify is required!');
|
||||||
}
|
}
|
||||||
|
debugger;
|
||||||
event.context.env.notify?.(
|
event.context.env.notify?.(
|
||||||
action.args?.msgType || 'info',
|
action.args?.msgType || 'info',
|
||||||
String(action.args?.msg),
|
String(action.args?.msg),
|
||||||
|
|||||||
@ -991,10 +991,7 @@ export class ActionRenderer extends React.Component<ActionRendererProps> {
|
|||||||
let mergedData = data;
|
let mergedData = data;
|
||||||
|
|
||||||
if (action?.actionType === 'click' && isObject(action?.args)) {
|
if (action?.actionType === 'click' && isObject(action?.args)) {
|
||||||
mergedData = createObject(data, {
|
mergedData = createObject(data, action.args);
|
||||||
...action.args,
|
|
||||||
nativeEvent: e
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const hasOnEvent = $schema.onEvent && Object.keys($schema.onEvent).length;
|
const hasOnEvent = $schema.onEvent && Object.keys($schema.onEvent).length;
|
||||||
|
|||||||
@ -46,34 +46,19 @@ export class Icon extends React.Component<IconProps, object> {
|
|||||||
@autobind
|
@autobind
|
||||||
handleClick(e: React.MouseEvent<any>) {
|
handleClick(e: React.MouseEvent<any>) {
|
||||||
const {dispatchEvent, data} = this.props;
|
const {dispatchEvent, data} = this.props;
|
||||||
dispatchEvent(
|
dispatchEvent(e, data);
|
||||||
'click',
|
|
||||||
createObject(data, {
|
|
||||||
nativeEvent: e
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@autobind
|
@autobind
|
||||||
handleMouseEnter(e: React.MouseEvent<any>) {
|
handleMouseEnter(e: React.MouseEvent<any>) {
|
||||||
const {dispatchEvent, data} = this.props;
|
const {dispatchEvent, data} = this.props;
|
||||||
dispatchEvent(
|
dispatchEvent(e, data);
|
||||||
e,
|
|
||||||
createObject(data, {
|
|
||||||
nativeEvent: e
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@autobind
|
@autobind
|
||||||
handleMouseLeave(e: React.MouseEvent<any>) {
|
handleMouseLeave(e: React.MouseEvent<any>) {
|
||||||
const {dispatchEvent, data} = this.props;
|
const {dispatchEvent, data} = this.props;
|
||||||
dispatchEvent(
|
dispatchEvent(e, data);
|
||||||
e,
|
|
||||||
createObject(data, {
|
|
||||||
nativeEvent: e
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|||||||
@ -99,7 +99,7 @@ export class TagField extends React.Component<TagProps, object> {
|
|||||||
const {dispatchEvent, onClick} = this.props;
|
const {dispatchEvent, onClick} = this.props;
|
||||||
const params = this.getResolvedEventParams(nativeEvent);
|
const params = this.getResolvedEventParams(nativeEvent);
|
||||||
|
|
||||||
dispatchEvent('click', params);
|
dispatchEvent(nativeEvent, params);
|
||||||
onClick?.(params);
|
onClick?.(params);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -124,7 +124,13 @@ export class TagField extends React.Component<TagProps, object> {
|
|||||||
const {dispatchEvent, onClose} = this.props;
|
const {dispatchEvent, onClose} = this.props;
|
||||||
const params = this.getResolvedEventParams(nativeEvent);
|
const params = this.getResolvedEventParams(nativeEvent);
|
||||||
|
|
||||||
dispatchEvent('close', params);
|
dispatchEvent(
|
||||||
|
{
|
||||||
|
...nativeEvent,
|
||||||
|
type: 'close'
|
||||||
|
},
|
||||||
|
params
|
||||||
|
);
|
||||||
onClose?.(params);
|
onClose?.(params);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -183,11 +189,9 @@ export class TagField extends React.Component<TagProps, object> {
|
|||||||
const {data} = this.props;
|
const {data} = this.props;
|
||||||
|
|
||||||
return createObject(data, {
|
return createObject(data, {
|
||||||
nativeEvent,
|
|
||||||
label: this.resolveLabel()
|
label: this.resolveLabel()
|
||||||
}) as {
|
}) as {
|
||||||
[propName: string]: any;
|
[propName: string]: any;
|
||||||
nativeEvent: React.MouseEvent<T>;
|
|
||||||
label: string;
|
label: string;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -159,34 +159,19 @@ export class Tpl extends React.Component<TplProps, TplState> {
|
|||||||
@autobind
|
@autobind
|
||||||
handleClick(e: React.MouseEvent<HTMLDivElement>) {
|
handleClick(e: React.MouseEvent<HTMLDivElement>) {
|
||||||
const {dispatchEvent, data} = this.props;
|
const {dispatchEvent, data} = this.props;
|
||||||
dispatchEvent(
|
dispatchEvent(e, data);
|
||||||
'click',
|
|
||||||
createObject(data, {
|
|
||||||
nativeEvent: e
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@autobind
|
@autobind
|
||||||
handleMouseEnter(e: React.MouseEvent<any>) {
|
handleMouseEnter(e: React.MouseEvent<any>) {
|
||||||
const {dispatchEvent, data} = this.props;
|
const {dispatchEvent, data} = this.props;
|
||||||
dispatchEvent(
|
dispatchEvent(e, data);
|
||||||
e,
|
|
||||||
createObject(data, {
|
|
||||||
nativeEvent: e
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@autobind
|
@autobind
|
||||||
handleMouseLeave(e: React.MouseEvent<any>) {
|
handleMouseLeave(e: React.MouseEvent<any>) {
|
||||||
const {dispatchEvent, data} = this.props;
|
const {dispatchEvent, data} = this.props;
|
||||||
dispatchEvent(
|
dispatchEvent(e, data);
|
||||||
e,
|
|
||||||
createObject(data, {
|
|
||||||
nativeEvent: e
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user