mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
Merge branch 'master' into feat-event-action-stop
This commit is contained in:
miaoxinyu01
GitHub
commit
dc6325be3b
1
.github/workflows/gh-pages.yml
vendored
1
.github/workflows/gh-pages.yml
vendored
@ -48,7 +48,6 @@ jobs:
|
||||
npm run coverage
|
||||
- uses: codecov/codecov-action@v3
|
||||
with:
|
||||
token: ${{ secrets.CODECOV_TOKEN }}
|
||||
name: codecov-umbrella # optional
|
||||
fail_ci_if_error: false # optional (default = false)
|
||||
verbose: true # optional (default = false)
|
||||
|
||||
8
.gitignore
vendored
8
.gitignore
vendored
@ -5,6 +5,7 @@ test.sass
|
||||
npm-debug.log
|
||||
yarn.lock
|
||||
|
||||
|
||||
# Folders
|
||||
.idea/
|
||||
.sass-cache
|
||||
@ -16,7 +17,7 @@ node_modules
|
||||
/sdk
|
||||
/public
|
||||
/gh-pages
|
||||
/.vscode
|
||||
/.vscode/*
|
||||
/output
|
||||
/toolkit/amis-renderer
|
||||
/toolkit/output
|
||||
@ -33,4 +34,7 @@ lerna-debug.log
|
||||
package-lock.json
|
||||
revision.json
|
||||
**/revision.json
|
||||
~$*
|
||||
~$*
|
||||
|
||||
|
||||
!/.vscode/iconConfig.json
|
||||
|
||||
17
.vscode/iconConfig.json
vendored
Normal file
17
.vscode/iconConfig.json
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
[
|
||||
{
|
||||
"name": "packages/amis-ui",
|
||||
"iconPath": "packages/amis-ui/src/components/icons.tsx",
|
||||
"iconDir": "packages/amis-ui/src/icons"
|
||||
},
|
||||
{
|
||||
"name": "packages/amis-editor",
|
||||
"iconPath": "packages/amis-editor/src/icons/index.tsx",
|
||||
"iconDir": "packages/amis-editor/src/icons"
|
||||
},
|
||||
{
|
||||
"name": "packages/amis-editor-core",
|
||||
"iconPath": "packages/amis-editor-core/src/icons/index.tsx",
|
||||
"iconDir": "packages/amis-editor-core/src/icons"
|
||||
}
|
||||
]
|
||||
@ -1031,23 +1031,96 @@ action 还可以使用 `body` 来渲染其他组件，让那些不支持行为
|
||||
| confirmText | [模板](../../docs/concepts/template) | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |
|
||||
| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| disabledTip | `'string' \| 'TooltipObject'` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| disabledTip | `'string' \| 'TooltipObject'` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |
|
||||
| close | `boolean` or `string` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。当值为字符串，并且是祖先层弹框的名字的时候，会把祖先弹框关闭掉。 |
|
||||
| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |
|
||||
|
||||
### TooltipObject
|
||||
|
||||
`TooltipObject` 为 [tooltip-wrapper](./tooltip) 属性配置，但是不需要配置如下属性 `type`、`body`、`wrapperComponent`、`className`、`inline`。
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | -------------------------------------- | -------------- |
|
||||
| click | `nativeEvent: MouseEvent` 鼠标事件对象 | 点击时触发 |
|
||||
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
|
||||
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | -------- | -------------- |
|
||||
| click | - | 点击时触发 |
|
||||
| mouseenter | - | 鼠标移入时触发 |
|
||||
| mouseleave | - | 鼠标移出时触发 |
|
||||
|
||||
### click
|
||||
|
||||
鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Button",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseenter
|
||||
|
||||
鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Button",
|
||||
"onEvent": {
|
||||
"mouseenter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseleave
|
||||
|
||||
鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "Button",
|
||||
"onEvent": {
|
||||
"mouseleave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
|
||||
@ -73,7 +73,7 @@ order: 99
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | -------- | --------------------------------------------------- |
|
||||
|
||||
@ -134,41 +134,77 @@ itemSchema: {
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ---------------------------- | --------- | ---------------------- | ------------------------------------------------------- | --- |
|
||||
| type | `string` | `"carousel"` | 指定为 Carousel 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| options | `array` | `[]` | 轮播面板数据 |
|
||||
| options.image | `string` | | 图片链接 |
|
||||
| options.href | `string` | | 图片打开网址的链接 |
|
||||
| options.imageClassName | `string` | | 图片类名 |
|
||||
| options.title | `string` | | 图片标题 |
|
||||
| options.titleClassName | `string` | | 图片标题类名 |
|
||||
| options.description | `string` | | 图片描述 |
|
||||
| options.descriptionClassName | `string` | | 图片描述类名 |
|
||||
| options.html | `string` | | HTML 自定义，同[Tpl](./tpl)一致 |
|
||||
| itemSchema | `object` | | 自定义`schema`来展示数据 |
|
||||
| auto | `boolean` | `true` | 是否自动轮播 |
|
||||
| interval | `string` | `5s` | 切换动画间隔 |
|
||||
| duration | `number` | `500` | 切换动画时长（ms） |
|
||||
| width | `string` | `auto` | 宽度 |
|
||||
| height | `string` | `200px` | 高度 |
|
||||
| controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 |
|
||||
| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 |
|
||||
| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |
|
||||
| thumbMode | `string` | `"cover" \| "contain"` | 图片默认缩放模式 |
|
||||
| multiple | `object` | `{count: 1}` | 多图展示，count表示展示的数量 | `2.8.1` |
|
||||
| alwaysShowArrow | `boolean` | `false` | 是否一直显示箭头，为false时鼠标hover才会显示 | `2.8.1` |
|
||||
| icons | {prev: `SchemaCollection`; next: `SchemaCollection`;} | | 自定义箭头图标 | `2.8.1` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ---------------------------- | ----------------------------------------------------- | ---------------------- | ------------------------------------------------------- | ------- |
|
||||
| type | `string` | `"carousel"` | 指定为 Carousel 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| options | `array` | `[]` | 轮播面板数据 |
|
||||
| options.image | `string` | | 图片链接 |
|
||||
| options.href | `string` | | 图片打开网址的链接 |
|
||||
| options.imageClassName | `string` | | 图片类名 |
|
||||
| options.title | `string` | | 图片标题 |
|
||||
| options.titleClassName | `string` | | 图片标题类名 |
|
||||
| options.description | `string` | | 图片描述 |
|
||||
| options.descriptionClassName | `string` | | 图片描述类名 |
|
||||
| options.html | `string` | | HTML 自定义，同[Tpl](./tpl)一致 |
|
||||
| itemSchema | `object` | | 自定义`schema`来展示数据 |
|
||||
| auto | `boolean` | `true` | 是否自动轮播 |
|
||||
| interval | `string` | `5s` | 切换动画间隔 |
|
||||
| duration | `number` | `500` | 切换动画时长（ms） |
|
||||
| width | `string` | `auto` | 宽度 |
|
||||
| height | `string` | `200px` | 高度 |
|
||||
| controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 |
|
||||
| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 |
|
||||
| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |
|
||||
| thumbMode | `string` | `"cover" \| "contain"` | 图片默认缩放模式 |
|
||||
| multiple | `object` | `{count: 1}` | 多图展示，count 表示展示的数量 | `2.8.1` |
|
||||
| alwaysShowArrow | `boolean` | `false` | 是否一直显示箭头，为 false 时鼠标 hover 才会显示 | `2.8.1` |
|
||||
| icons | {prev: `SchemaCollection`; next: `SchemaCollection`;} | | 自定义箭头图标 | `2.8.1` |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | -------------------------------------------------------------------------------- | ---------------- |
|
||||
| change | `activeIndex: number` 激活图片的索引 <br /> `prevIndex: number` 上一张图片的索引 | 轮播图切换时触发 |
|
||||
|
||||
### change
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "carousel",
|
||||
"auto": false,
|
||||
"thumbMode": "cover",
|
||||
"animation": "slide",
|
||||
"height": 300,
|
||||
"options": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
},
|
||||
{
|
||||
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
},
|
||||
{
|
||||
"thumbMode": "contain",
|
||||
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
}
|
||||
],
|
||||
"onEvent": {
|
||||
"change": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "滚动至${activeIndex}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
@ -178,3 +214,132 @@ itemSchema: {
|
||||
| next | - | 下一张 |
|
||||
| prev | - | 上一张 |
|
||||
| goto-image | `activeIndex: number` 切换图片的索引 | 切换轮播图 |
|
||||
|
||||
### next
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "action",
|
||||
"label": "下一张",
|
||||
"className": "mr-3 mb-3",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "next",
|
||||
"componentId": "carousel_001"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "carousel",
|
||||
"id": "carousel_001",
|
||||
"auto": false,
|
||||
"thumbMode": "cover",
|
||||
"animation": "slide",
|
||||
"height": 300,
|
||||
"options": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
},
|
||||
{
|
||||
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
},
|
||||
{
|
||||
"thumbMode": "contain",
|
||||
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### prev
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "action",
|
||||
"label": "上一张",
|
||||
"className": "mr-3 mb-3",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "prev",
|
||||
"componentId": "carousel_002"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "carousel",
|
||||
"id": "carousel_002",
|
||||
"auto": false,
|
||||
"thumbMode": "cover",
|
||||
"animation": "slide",
|
||||
"height": 300,
|
||||
"options": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
},
|
||||
{
|
||||
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
},
|
||||
{
|
||||
"thumbMode": "contain",
|
||||
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### goto-image
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "action",
|
||||
"label": "滚动到第三张",
|
||||
"className": "mr-3 mb-3",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "goto-image",
|
||||
"componentId": "carousel_003",
|
||||
"args": {
|
||||
"activeIndex": "${index}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "carousel",
|
||||
"id": "carousel_003",
|
||||
"auto": false,
|
||||
"thumbMode": "cover",
|
||||
"animation": "slide",
|
||||
"height": 300,
|
||||
"options": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
|
||||
},
|
||||
{
|
||||
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
|
||||
},
|
||||
{
|
||||
"thumbMode": "contain",
|
||||
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
@ -697,7 +697,7 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
|
||||
|
||||
> 2.4.1 及以上版本
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------- |
|
||||
@ -706,6 +706,388 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
|
||||
| mouseover | 查看[ECharst 事件与行为文档](https://echarts.apache.org/handbook/zh/concepts/event/) | 鼠标悬浮时触发 |
|
||||
| legendselectchanged | 查看[ECharst 事件与行为文档](https://echarts.apache.org/handbook/zh/concepts/event/) | 切换图例选中状态时触发 |
|
||||
|
||||
### init
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"id": "chart01",
|
||||
"api": "/api/mock2/chart/chartData",
|
||||
"config": {
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"data": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat"
|
||||
]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"data": "${line || []}",
|
||||
"type": "line"
|
||||
}
|
||||
]
|
||||
},
|
||||
"onEvent": {
|
||||
"init": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "init"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### click
|
||||
|
||||
用户鼠标操作点击时触发，例如点击下图蓝色线条上的数据点，将弹出详情。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "详情",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "<span>当前选中值 ${value|json}<span>"
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"api": "/api/mock2/chart/chart1"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "极坐标双数值轴"
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"line"
|
||||
]
|
||||
},
|
||||
"polar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"54%"
|
||||
]
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross"
|
||||
}
|
||||
},
|
||||
"angleAxis": {
|
||||
"type": "value",
|
||||
"startAngle": 0
|
||||
},
|
||||
"radiusAxis": {
|
||||
"min": 0
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"coordinateSystem": "polar",
|
||||
"name": "line",
|
||||
"type": "line",
|
||||
"showSymbol": false,
|
||||
"data": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0.03487823687206265,
|
||||
1
|
||||
],
|
||||
[
|
||||
0.06958655048003272,
|
||||
2
|
||||
],
|
||||
[
|
||||
0.10395584540887964,
|
||||
3
|
||||
],
|
||||
[
|
||||
0.13781867790849958,
|
||||
4
|
||||
],
|
||||
[
|
||||
0.17101007166283433,
|
||||
5
|
||||
],
|
||||
[
|
||||
0.2033683215379001,
|
||||
6
|
||||
],
|
||||
[
|
||||
0.2347357813929454,
|
||||
7
|
||||
],
|
||||
[
|
||||
0.26495963211660245,
|
||||
8
|
||||
],
|
||||
[
|
||||
0.2938926261462365,
|
||||
9
|
||||
],
|
||||
[
|
||||
0.3213938048432697,
|
||||
10
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
"animationDuration": 2000
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseover
|
||||
|
||||
用户鼠标悬浮时触发，例如炫富到下图蓝色线条上的数据点，将弹出详情。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"onEvent": {
|
||||
"mouseover": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "详情",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "<span>当前选中值 ${value|json}<span>"
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"api": "/api/mock2/chart/chart1"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "极坐标双数值轴"
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"line"
|
||||
]
|
||||
},
|
||||
"polar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"54%"
|
||||
]
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross"
|
||||
}
|
||||
},
|
||||
"angleAxis": {
|
||||
"type": "value",
|
||||
"startAngle": 0
|
||||
},
|
||||
"radiusAxis": {
|
||||
"min": 0
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"coordinateSystem": "polar",
|
||||
"name": "line",
|
||||
"type": "line",
|
||||
"showSymbol": false,
|
||||
"data": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0.03487823687206265,
|
||||
1
|
||||
],
|
||||
[
|
||||
0.06958655048003272,
|
||||
2
|
||||
],
|
||||
[
|
||||
0.10395584540887964,
|
||||
3
|
||||
],
|
||||
[
|
||||
0.13781867790849958,
|
||||
4
|
||||
],
|
||||
[
|
||||
0.17101007166283433,
|
||||
5
|
||||
],
|
||||
[
|
||||
0.2033683215379001,
|
||||
6
|
||||
],
|
||||
[
|
||||
0.2347357813929454,
|
||||
7
|
||||
],
|
||||
[
|
||||
0.26495963211660245,
|
||||
8
|
||||
],
|
||||
[
|
||||
0.2938926261462365,
|
||||
9
|
||||
],
|
||||
[
|
||||
0.3213938048432697,
|
||||
10
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
"animationDuration": 2000
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### legendselectchanged
|
||||
|
||||
图例开关的行为会触发 legendselectchanged 事件。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "chart",
|
||||
"onEvent": {
|
||||
"legendselectchanged": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "${event.data|json}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "极坐标双数值轴"
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"line"
|
||||
]
|
||||
},
|
||||
"polar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"54%"
|
||||
]
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross"
|
||||
}
|
||||
},
|
||||
"angleAxis": {
|
||||
"type": "value",
|
||||
"startAngle": 0
|
||||
},
|
||||
"radiusAxis": {
|
||||
"min": 0
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"coordinateSystem": "polar",
|
||||
"name": "line",
|
||||
"type": "line",
|
||||
"showSymbol": false,
|
||||
"data": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0.03487823687206265,
|
||||
1
|
||||
],
|
||||
[
|
||||
0.06958655048003272,
|
||||
2
|
||||
],
|
||||
[
|
||||
0.10395584540887964,
|
||||
3
|
||||
],
|
||||
[
|
||||
0.13781867790849958,
|
||||
4
|
||||
],
|
||||
[
|
||||
0.17101007166283433,
|
||||
5
|
||||
],
|
||||
[
|
||||
0.2033683215379001,
|
||||
6
|
||||
],
|
||||
[
|
||||
0.2347357813929454,
|
||||
7
|
||||
],
|
||||
[
|
||||
0.26495963211660245,
|
||||
8
|
||||
],
|
||||
[
|
||||
0.2938926261462365,
|
||||
9
|
||||
],
|
||||
[
|
||||
0.3213938048432697,
|
||||
10
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
"animationDuration": 2000
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
@ -716,3 +1098,217 @@ echarts 的 config 一般是静态配置的，支持简单的数据映射。如
|
||||
| setValue | `value: object` 更新的数据 | 更新数据，等于更新图表所依赖数据域中的变量 |
|
||||
|
||||
2.4.1 及以上版本，除了以上动作，还支持直接触发[ECharts 组件行为](https://echarts.apache.org/handbook/zh/concepts/event/#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA)，即通过`actionType`指定行为名称，行为配置通过`args: {动作配置项名称: xxx}`来配置具体的参数。
|
||||
|
||||
### reload
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "刷新请求",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "chart01",
|
||||
"actionType": "reload"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"id": "chart01",
|
||||
"api": "/api/mock2/chart/chartData",
|
||||
"config": {
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"data": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat"
|
||||
]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"data": "${line || []}",
|
||||
"type": "line"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### setValue
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "更新数据",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "chart02",
|
||||
"actionType": "setValue",
|
||||
"args": {
|
||||
"value": {"line":[98,41,51,2,90,40]}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"id": "chart02",
|
||||
"api": "/api/mock2/chart/chartData",
|
||||
"config": {
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"data": [
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat"
|
||||
]
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value"
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"data": "${line || []}",
|
||||
"type": "line"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### 其他动作
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "显示提示框",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "chart03",
|
||||
"actionType": "showTip",
|
||||
"args": {
|
||||
"type": "showTip",
|
||||
"seriesIndex": 0,
|
||||
"name": "",
|
||||
"dataIndex": 8
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "chart",
|
||||
"id": "chart03",
|
||||
"config": {
|
||||
"title": {
|
||||
"text": "极坐标双数值轴"
|
||||
},
|
||||
"legend": {
|
||||
"data": [
|
||||
"line"
|
||||
]
|
||||
},
|
||||
"polar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"54%"
|
||||
]
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "cross"
|
||||
}
|
||||
},
|
||||
"angleAxis": {
|
||||
"type": "value",
|
||||
"startAngle": 0
|
||||
},
|
||||
"radiusAxis": {
|
||||
"min": 0
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"coordinateSystem": "polar",
|
||||
"name": "line",
|
||||
"type": "line",
|
||||
"showSymbol": false,
|
||||
"data": [
|
||||
[
|
||||
0,
|
||||
0
|
||||
],
|
||||
[
|
||||
0.03487823687206265,
|
||||
1
|
||||
],
|
||||
[
|
||||
0.06958655048003272,
|
||||
2
|
||||
],
|
||||
[
|
||||
0.10395584540887964,
|
||||
3
|
||||
],
|
||||
[
|
||||
0.13781867790849958,
|
||||
4
|
||||
],
|
||||
[
|
||||
0.17101007166283433,
|
||||
5
|
||||
],
|
||||
[
|
||||
0.2033683215379001,
|
||||
6
|
||||
],
|
||||
[
|
||||
0.2347357813929454,
|
||||
7
|
||||
],
|
||||
[
|
||||
0.26495963211660245,
|
||||
8
|
||||
],
|
||||
[
|
||||
0.2938926261462365,
|
||||
9
|
||||
],
|
||||
[
|
||||
0.3213938048432697,
|
||||
10
|
||||
]
|
||||
]
|
||||
}
|
||||
],
|
||||
"animationDuration": 2000
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
@ -102,6 +102,22 @@ language 支持从上下文获取数据
|
||||
}
|
||||
```
|
||||
|
||||
## 最大高度
|
||||
|
||||
通过配置 `maxHeight` 可以实现最大高度，超出滚动
|
||||
|
||||
```schema
|
||||
{
|
||||
"body": {
|
||||
"type": "code",
|
||||
"language": "javascript",
|
||||
"className": "b-a",
|
||||
"maxHeight": 200,
|
||||
"value": "(function () {\n let amis = amisRequire('amis/embed');\n let amisJSON = {\n type: 'page',\n title: '表单页面',\n body: {\n type: 'form',\n mode: 'horizontal',\n api: '/saveForm',\n body: [\n {\n label: 'Name',\n type: 'input-text',\n name: 'name'\n },\n {\n label: 'Email',\n type: 'input-email',\n name: 'email'\n }\n ]\n }\n };\n let amisScoped = amis.embed('#root', amisJSON);\n})();"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 自定义语言高亮
|
||||
|
||||
还可以通过 `customLang` 参数来自定义高亮，详情参考[示例](../../../examples/code)。
|
||||
@ -116,12 +132,13 @@ language 支持从上下文获取数据
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | -------- | ------ | ---------------------------------- |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| value | `string` | | 显示的颜色值 |
|
||||
| name | `string` | | 在其他组件中，时，用作变量映射 |
|
||||
| language | `string` | | 所使用的高亮语言，默认是 plaintext |
|
||||
| tabSize | `number` | 4 | 默认 tab 大小 |
|
||||
| editorTheme | `string` | 'vs' | 主题，还有 'vs-dark' |
|
||||
| wordWrap | `string` | `true` | 是否折行 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | ------------------ | ------ | ---------------------------------- |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| value | `string` | | 显示的颜色值 |
|
||||
| name | `string` | | 在其他组件中，时，用作变量映射 |
|
||||
| language | `string` | | 所使用的高亮语言，默认是 plaintext |
|
||||
| tabSize | `number` | 4 | 默认 tab 大小 |
|
||||
| editorTheme | `string` | 'vs' | 主题，还有 'vs-dark' |
|
||||
| wordWrap | `string` | `true` | 是否折行 |
|
||||
| maxHeight | `string`\|`number` | | 最大高度 |
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -905,7 +905,7 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
|
||||
|
||||
@ -914,6 +914,103 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
|
||||
| confirm | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |
|
||||
| cancel | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击取消时触发 |
|
||||
|
||||
### confirm
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"label": "弹个框",
|
||||
"type": "button",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "一个弹框",
|
||||
"body": [
|
||||
{
|
||||
"type": "alert",
|
||||
"body": "试试点击确认按钮",
|
||||
"level": "info",
|
||||
"className": "mb-1"
|
||||
},
|
||||
{
|
||||
"type": "form",
|
||||
"title": "表单",
|
||||
"debug": true,
|
||||
"body": [
|
||||
{
|
||||
"label": "你的名字",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"id": "u:00ef9e3fe9db",
|
||||
"editorState": "default",
|
||||
"mode": "horizontal",
|
||||
"size": "md",
|
||||
"value": "Amis"
|
||||
}
|
||||
],
|
||||
"id": "u:f4b2a90b685b"
|
||||
}
|
||||
],
|
||||
"onEvent": {
|
||||
"confirm": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "你的名字是${name}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### cancel
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"label": "弹个框",
|
||||
"type": "button",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "一个弹窗",
|
||||
"body": "试试点击取消按钮或者右上角的关闭",
|
||||
"onEvent": {
|
||||
"cancel": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "cancel"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
|
||||
@ -462,13 +462,85 @@ order: 43
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | ------------------------------------------------------------------------ | ------------------ |
|
||||
| confirm | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |
|
||||
| cancel | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击取消时触发 |
|
||||
|
||||
### confirm
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"label": "点击弹框",
|
||||
"type": "button",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "弹框标题",
|
||||
"body": "这是一个弹框",
|
||||
"onEvent": {
|
||||
"confirm": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "confirm"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### cancel
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"label": "点击弹框",
|
||||
"type": "button",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "弹框标题",
|
||||
"body": "这是一个弹框",
|
||||
"onEvent": {
|
||||
"cancel": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "cancel"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
|
||||
@ -279,13 +279,79 @@ order: 44
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | ---------------------------- | --------------------------------------- |
|
||||
| mouseenter | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移入时触发 |
|
||||
| mouseleave | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移出时触发 |
|
||||
|
||||
### mouseenter
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "dropdown-button",
|
||||
"label": "下拉按钮",
|
||||
"trigger": "hover",
|
||||
"onEvent": {
|
||||
"mouseenter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "mouseenter ${event.data.items.length}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮1"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮2"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### mouseleave
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "dropdown-button",
|
||||
"label": "下拉按钮",
|
||||
"trigger": "hover",
|
||||
"onEvent": {
|
||||
"mouseleave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "mouseleave ${event.data.items.length}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮1"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮2"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
暂无
|
||||
|
||||
@ -207,7 +207,7 @@ order: 6
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@ order: 7
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -102,7 +102,7 @@ order: 8
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -469,7 +469,7 @@ order: 9
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -946,7 +946,7 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
@ -967,9 +967,9 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层
|
||||
| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |
|
||||
| setValue | `value: object \| Array<object>` 更新的值<br/>`index?: number` 指定更新的数据索引， 1.10.1 及以上版本引入 | 更新数据，对象数组针对开启`multiple`模式, `multiple`模式下可以通过指定`index`来更新指定索引的数据 |
|
||||
|
||||
## 动作示例
|
||||
### setValue
|
||||
|
||||
### 复制数值
|
||||
#### 复制数值
|
||||
|
||||
> 1.10.1 及以上版本
|
||||
|
||||
@ -1058,3 +1058,325 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### 行记录内表单项联动
|
||||
|
||||
在 combo 中行记录内表单项联动需要指定`componentName`为需要联动的表单项名称，以下示例中，当选择指定行内第一个下拉框的值时，将对应的修改所在行内第二个下拉框的值。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"data": {
|
||||
"combo": [
|
||||
{
|
||||
"select_1": "A",
|
||||
"select_2": "c"
|
||||
},
|
||||
{
|
||||
"select_1": "A",
|
||||
"select_2": "d"
|
||||
}
|
||||
]
|
||||
},
|
||||
"mode": "horizontal",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"type": "combo",
|
||||
"label": "组合输入",
|
||||
"name": "combo",
|
||||
"multiple": true,
|
||||
"addable": true,
|
||||
"removable": true,
|
||||
"removableMode": "icon",
|
||||
"addBtn": {
|
||||
"label": "新增",
|
||||
"icon": "fa fa-plus",
|
||||
"level": "primary",
|
||||
"size": "sm",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"weight": 0,
|
||||
"actions": [
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"type": "select",
|
||||
"label": "选项${index}",
|
||||
"name": "select_1",
|
||||
"options": [
|
||||
{
|
||||
"label": "选项A",
|
||||
"value": "A"
|
||||
},
|
||||
{
|
||||
"label": "选项B",
|
||||
"value": "B"
|
||||
}
|
||||
],
|
||||
"multiple": false,
|
||||
"onEvent": {
|
||||
"change": {
|
||||
"actions": [
|
||||
{
|
||||
"componentName": "select_2",
|
||||
"args": {
|
||||
"value": "${IF(event.data.value==='A','c','d')}"
|
||||
},
|
||||
"actionType": "setValue"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"name": "select_2",
|
||||
"placeholder": "选项",
|
||||
"options": [
|
||||
{
|
||||
"label": "C",
|
||||
"value": "c"
|
||||
},
|
||||
{
|
||||
"label": "D",
|
||||
"value": "d"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
通过[状态控制动作](../../concepts/event-action#控制状态)来联动时比较特殊，需要配置动态的`componentId`或`componentName`，一般使用`index`索引来区分指定的表单项。例如下面的示例中，每行的第一个下拉框的选择来决定所在行记录中的第二个下拉框是否显示。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"data": {
|
||||
"combo": [
|
||||
{
|
||||
"select_1": "A",
|
||||
"select_2": "c"
|
||||
},
|
||||
{
|
||||
"select_1": "A",
|
||||
"select_2": "d"
|
||||
}
|
||||
]
|
||||
},
|
||||
"mode": "horizontal",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"type": "combo",
|
||||
"label": "组合输入",
|
||||
"name": "combo",
|
||||
"multiple": true,
|
||||
"addable": true,
|
||||
"removable": true,
|
||||
"removableMode": "icon",
|
||||
"addBtn": {
|
||||
"label": "新增",
|
||||
"icon": "fa fa-plus",
|
||||
"level": "primary",
|
||||
"size": "sm"
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"type": "select",
|
||||
"label": "选项${index}",
|
||||
"name": "select_1",
|
||||
"options": [
|
||||
{
|
||||
"label": "选项A",
|
||||
"value": "A"
|
||||
},
|
||||
{
|
||||
"label": "选项B",
|
||||
"value": "B"
|
||||
}
|
||||
],
|
||||
"multiple": false,
|
||||
"onEvent": {
|
||||
"change": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "select_2_${index}",
|
||||
"args": {
|
||||
"value": "${IF(event.data.value==='A',true,false)}"
|
||||
},
|
||||
"actionType": "visibility"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "select",
|
||||
"name": "select_2",
|
||||
"id": "select_2_${index}",
|
||||
"placeholder": "选项",
|
||||
"options": [
|
||||
{
|
||||
"label": "C",
|
||||
"value": "c"
|
||||
},
|
||||
{
|
||||
"label": "D",
|
||||
"value": "c"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### 嵌套结构中行记录内表单项联动
|
||||
|
||||
这里所说的是列表结构数据的嵌套。下面的示例中，combo 内包含一个表格编辑框，即 combo 数据是一个列表结构，它的记录中嵌套了另一个列表结构（input-table）。想要实现 input-table 内行记录【修改】操作只更新所在行记录中的表单项。通过`componentName`来指定所需更新的字段名，它将帮你定位到当前操作行。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"data": {
|
||||
"combo": [
|
||||
{
|
||||
"table": [{
|
||||
"name": "amis",
|
||||
"age": "18"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"table": [{
|
||||
"name": "boss",
|
||||
"age": "10"
|
||||
}]
|
||||
}
|
||||
]
|
||||
},
|
||||
"mode": "horizontal",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"type": "combo",
|
||||
"name": "combo",
|
||||
"id": "comboId",
|
||||
"label": false,
|
||||
"strictMode": false,
|
||||
"multiple": true,
|
||||
"addBtn": {
|
||||
"type": "button",
|
||||
"label": "增加",
|
||||
"level": "default",
|
||||
"block": true
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"type": "input-table",
|
||||
"name": "table",
|
||||
"strictMode": false,
|
||||
"label": false,
|
||||
"needConfirm": false,
|
||||
"addable": true,
|
||||
"removable": true,
|
||||
"columns": [
|
||||
{
|
||||
"label": "姓名",
|
||||
"name": "name",
|
||||
"quickEdit": false
|
||||
},
|
||||
{
|
||||
"label": "年龄",
|
||||
"name": "age"
|
||||
},
|
||||
{
|
||||
"type": "operation",
|
||||
"label": "操作",
|
||||
"quickEdit": false,
|
||||
"buttons": [
|
||||
{
|
||||
"type": "button",
|
||||
"level": "link",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"dialog": {
|
||||
"closeOnEsc": false,
|
||||
"body": [
|
||||
{
|
||||
"onEvent": {
|
||||
"validateSucc": {
|
||||
"weight": 0,
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "closeDialog"
|
||||
},
|
||||
{
|
||||
"args": {
|
||||
"index": "${index}",
|
||||
"value": {
|
||||
"name": "$name",
|
||||
"age": "$age"
|
||||
}
|
||||
},
|
||||
"actionType": "setValue",
|
||||
"componentName": "table"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
"label": "姓名",
|
||||
"name": "name",
|
||||
"type": "input-text",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"label": "年龄",
|
||||
"name": "age",
|
||||
"type": "input-text",
|
||||
"required": true
|
||||
}
|
||||
],
|
||||
"type": "form",
|
||||
"title": "表单"
|
||||
}
|
||||
],
|
||||
"type": "dialog",
|
||||
"title": "行记录",
|
||||
"showLoading": true,
|
||||
"withDefaultData": true,
|
||||
"dataMapSwitch": true,
|
||||
"size": "lg",
|
||||
"showErrorMsg": true,
|
||||
"showCloseButton": true,
|
||||
},
|
||||
"actionType": "dialog"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"label": "修改"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -490,7 +490,7 @@ type Value = ValueGroup;
|
||||
"label": "条件组件",
|
||||
"name": "conditions",
|
||||
"description": "适合让用户自己拼查询条件，然后后端根据数据生成 query where",
|
||||
"source": "/api/condition-fields?a=${a}&waitSeconds=2"
|
||||
"source": "/api/condition-fields/custom?a=${a}&waitSeconds=2"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -500,7 +500,7 @@ type Value = ValueGroup;
|
||||
|
||||
> 2.3.0 及以上版本
|
||||
|
||||
通过 selectMode 配置组合条件左侧选项类型，可配置项为`list`、`tree`，默认为`list`。两者数据格式相同，只是下拉框展示方式不同，当存在多层 children 嵌套时，建议使用`tree`。
|
||||
通过 selectMode 配置组合条件左侧选项类型，可配置项为`list`、`tree`、`chained`，默认为`list`。这三个数据格式基本类似，只是下拉框展示方式不同，`tree`是树形下拉，`chained`为多个级联的下拉。当存在多层 children 嵌套时，建议使用`tree`。
|
||||
|
||||
selectMode 为`list`时
|
||||
|
||||
@ -640,6 +640,84 @@ selectMode 为`tree`时
|
||||
}
|
||||
```
|
||||
|
||||
> 3.2.0 及以上版本
|
||||
|
||||
selectMode 为`chained`时，使用`fields`字段
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"body": [
|
||||
{
|
||||
"type": "condition-builder",
|
||||
"label": "条件组件",
|
||||
"name": "conditions",
|
||||
"selectMode": "chained",
|
||||
"description": "适合让用户自己拼查询条件，然后后端根据数据生成 query where",
|
||||
"fields": [
|
||||
{
|
||||
"label": "文本",
|
||||
"type": "text",
|
||||
"name": "text"
|
||||
},
|
||||
{
|
||||
"label": "数字",
|
||||
"type": "number",
|
||||
"name": "number"
|
||||
},
|
||||
{
|
||||
"label": "布尔",
|
||||
"type": "boolean",
|
||||
"name": "boolean"
|
||||
},
|
||||
{
|
||||
"label": "链式结构",
|
||||
"name": "chained",
|
||||
"children": [
|
||||
{
|
||||
"label": "Folder A",
|
||||
"name": "Folder_A",
|
||||
"children": [
|
||||
{
|
||||
"label": "file A",
|
||||
"name": "file_A",
|
||||
"type": "number"
|
||||
},
|
||||
{
|
||||
"label": "file B",
|
||||
"name": "file_B",
|
||||
"type": "text"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
selectMode 为`chained`时，使用`source`字段
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"body": [
|
||||
{
|
||||
"type": "condition-builder",
|
||||
"label": "条件组件",
|
||||
"name": "conditions",
|
||||
"selectMode": "chained",
|
||||
"description": "适合让用户自己拼查询条件，然后后端根据数据生成 query where",
|
||||
"source": "/api/condition-fields/chained"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 简易模式
|
||||
|
||||
通过 builderMode 配置为简易模式，在这个模式下将不开启树形分组功能，输出结果只有一层，方便后端实现简单的 SQL 生成。
|
||||
@ -836,6 +914,11 @@ selectMode 为`tree`时
|
||||
"builderMode": "simple",
|
||||
"name": "conditions",
|
||||
"description": "适合让用户自己拼查询条件，然后后端根据数据生成 query where",
|
||||
"pickerIcon": {
|
||||
"type": "icon",
|
||||
"icon": "edit",
|
||||
"className": "w-4 h-4"
|
||||
},
|
||||
"fields": [
|
||||
{
|
||||
"label": "文本",
|
||||
@ -913,7 +996,7 @@ selectMode 为`tree`时
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------- | ------------------ | -------- | ------------------------------ |
|
||||
| className | `string` | | 外层 dom 类名 |
|
||||
| fieldClassName | `string` | | 输入字段的类名 |
|
||||
@ -924,4 +1007,6 @@ selectMode 为`tree`时
|
||||
| showANDOR | `boolean` | | 用于 simple 模式下显示切换按钮 |
|
||||
| showNot | `boolean` | | 是否显示「非」按钮 |
|
||||
| searchable | `boolean` | | 字段是否可搜索 |
|
||||
| selectMode | `'list'`、`'tree'` | `'list'` | 组合条件左侧选项类型 |
|
||||
| selectMode | `'list'` \| `'tree'` \| `'chained'` | `'list'` | 组合条件左侧选项类型。`'chained'`模式需要`3.2.0及以上版本` |
|
||||
| addBtnVisibleOn | `string` | | 表达式：控制按钮“添加条件”的显示。参数为`depth`、`breadth`，分别代表深度、长度。表达式需要返回`boolean`类型`3.2.0及以上版本` |
|
||||
| addGroupBtnVisibleOn | `string` | | 表达式：控制按钮“添加条件组”的显示。参数为`depth`、`breadth`，分别代表深度、长度。表达式需要返回`boolean`类型`3.2.0及以上版本` |
|
||||
|
||||
78
docs/zh-CN/components/form/control.md
Normal file
78
docs/zh-CN/components/form/control.md
Normal file
@ -0,0 +1,78 @@
|
||||
---
|
||||
title: Control 表单项包裹
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Control
|
||||
icon:
|
||||
order: 24
|
||||
---
|
||||
|
||||
展示类的组件，如果直接放在表单项里面，不会有 `label` 和 `description` 之类的信息展示。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"body": [
|
||||
{
|
||||
"type": "input-text",
|
||||
"label": "文本输入"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "image",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "qr-code",
|
||||
"codeSize": 128,
|
||||
"backgroundColor": "#108cee",
|
||||
"foregroundColor": "#000",
|
||||
"value": "https://www.baidu.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
如果想像文本输入框一样，可以配置 `label` 和 `description`，则可以通过这个组件包裹一下。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"body": [
|
||||
{
|
||||
"type": "input-text",
|
||||
"label": "文本输入"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "control",
|
||||
"label": "图片",
|
||||
body: [
|
||||
{
|
||||
"type": "image",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "control",
|
||||
"label": "二维码",
|
||||
"description": "还可以来点描述",
|
||||
body: [
|
||||
{
|
||||
"type": "qr-code",
|
||||
"codeSize": 128,
|
||||
"backgroundColor": "#108cee",
|
||||
"foregroundColor": "#000",
|
||||
"value": "https://www.baidu.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
@ -86,7 +86,7 @@ order: 17
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -157,17 +157,17 @@ amis 的编辑器是基于 monaco 开发的，如果想进行深度定制，比
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| language | `string` | `javascript` | 编辑器高亮的语言，支持通过 `${xxx}` 变量获取 |
|
||||
| size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` |
|
||||
| allowFullscreen | `boolean` | `false` | 是否显示全屏模式开关 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| language | `string` | `javascript` | 编辑器高亮的语言，支持通过 `${xxx}` 变量获取 |
|
||||
| size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` |
|
||||
| allowFullscreen | `boolean` | `false` | 是否显示全屏模式开关 |
|
||||
| options | `object` | | monaco 编辑器的其它配置，比如是否显示行号等，请参考[这里](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IEditorOptions.html)，不过无法设置 readOnly，只读模式需要使用 `disabled: true` |
|
||||
| placeholder | `string` | | 占位描述，没有值的时候展示 |
|
||||
| placeholder | `string` | | 占位描述，没有值的时候展示 |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -989,7 +989,7 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"initApi": "/api/mock2/page/initData",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"asyncApi": "/api/mock2/page/initData",
|
||||
"title": "用户信息",
|
||||
"body": [
|
||||
@ -1449,10 +1449,11 @@ 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 接口请求完成时触发 |
|
||||
| change | `event.data: object` 当前表单数据 | 表单值变化时触发 |
|
||||
| formItemValidateSucc | `event.data: object` 当前表单数据 | 表单项校验成功时触发 |
|
||||
@ -1462,6 +1463,7 @@ Form 支持轮询初始化接口，步骤如下：
|
||||
| submit | `event.data: object` 当前表单数据 | 点击提交按钮或者触发表单提交动作的时候触发，配置了该事件后将不会触发表单提交时的校验、提交到 api 或者 target 等行为，所有行为需要自己配置 |
|
||||
| submitSucc | `event.data.result: object` api 远程请求成功后返回的结果数据 | 提交成功时触发 |
|
||||
| submitFail | `event.data.error: object` api 远程请求失败后返回的错误信息 | 提交失败时触发 |
|
||||
| asyncApiFinished | `[name]: any` 当前数据域中指定字段的值 | asyncApi 远程请求轮训结束 |
|
||||
|
||||
## 动作表
|
||||
|
||||
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -107,7 +107,7 @@ order: 15
|
||||
|
||||
## 快捷键
|
||||
|
||||
`ranges`属性支持自定义快捷选择日期范围快捷键
|
||||
`shortcuts`属性支持自定义快捷选择日期范围快捷键
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
@ -118,7 +118,7 @@ order: 15
|
||||
"type": "input-date-range",
|
||||
"name": "select",
|
||||
"label": "日期范围",
|
||||
"ranges": [
|
||||
"shortcuts": [
|
||||
"7daysago",
|
||||
"15dayslater",
|
||||
"2weeksago",
|
||||
@ -156,6 +156,42 @@ order: 15
|
||||
- `{n}yearsago`: 最近 n 年
|
||||
- `{n}yearslater`: n 年以内
|
||||
|
||||
快捷键也支持使用表达式的写法，可以使用这种方式自定义快捷键
|
||||
|
||||
> 3.1.0 及以上版本
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"type": "input-date-range",
|
||||
"name": "select",
|
||||
"label": "日期范围",
|
||||
"shortcuts": [
|
||||
{
|
||||
"label": "1天前",
|
||||
"startDate": "${DATEMODIFY(NOW(), -1, 'day')}",
|
||||
"endDate": "${NOW()}"
|
||||
},
|
||||
{
|
||||
"label": "1个月前",
|
||||
"startDate": "${DATEMODIFY(NOW(), -1, 'months')}",
|
||||
"endDate": "${NOW()}"
|
||||
},
|
||||
{
|
||||
"label": "本季度",
|
||||
"startDate": "${STARTOF(NOW(), 'quarter')}",
|
||||
"endDate": "${ENDOF(NOW(), 'quarter')}"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 内嵌模式
|
||||
|
||||
```schema: scope="body"
|
||||
@ -178,24 +214,24 @@ order: 15
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ----------- | ------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------- |
|
||||
| format | `string` | `X` | [日期选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) |
|
||||
| inputFormat | `string` | `YYYY-MM-DD` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) |
|
||||
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
|
||||
| ranges | `Array<string> 或 string` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键 |
|
||||
| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| minDuration | `string` | | 限制最小跨度，如： 2days |
|
||||
| maxDuration | `string` | | 限制最大跨度，如：1year |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ----------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----------------------- |
|
||||
| format | `string` | `X` | [日期选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) |
|
||||
| inputFormat | `string` | `YYYY-MM-DD` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) |
|
||||
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{label: string; startDate: string; endDate: string}>` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键 | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| minDuration | `string` | | 限制最小跨度，如： 2days |
|
||||
| maxDuration | `string` | | 限制最大跨度，如：1year |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./date#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`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`取值。
|
||||
|
||||
|
||||
@ -247,7 +247,8 @@ order: 13
|
||||
## 快捷键
|
||||
|
||||
你也可以配置`shortcuts`属性支持快捷选择日期
|
||||
注：移动端 picker 的形式不支持快捷键
|
||||
|
||||
> 注：移动端 picker 的形式不支持快捷键
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
@ -259,7 +260,7 @@ order: 13
|
||||
"type": "input-date",
|
||||
"name": "date",
|
||||
"label": "日期",
|
||||
"shortcuts": ["yesterday" ,"today", "tomorrow"]
|
||||
"shortcuts": ["yesterday", "today", "tomorrow"]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -289,6 +290,33 @@ order: 13
|
||||
- `{n}quartersago`: n 季度前
|
||||
- `{n}quarterslater`: n 季度后
|
||||
|
||||
快捷键也支持使用表达式的写法，可以使用这种方式自定义快捷键
|
||||
|
||||
> 3.1.0 及以上版本
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"type": "input-date",
|
||||
"name": "date",
|
||||
"label": "日期",
|
||||
"shortcuts": [
|
||||
{
|
||||
"label": "前天",
|
||||
"date": "${STARTOF(DATEMODIFY(NOW(), -2, 'day'))}"
|
||||
},
|
||||
"yesterday",
|
||||
"today"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## UTC
|
||||
|
||||
```schema: scope="body"
|
||||
@ -358,23 +386,23 @@ order: 13
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | --------- | -------------- | ----------------------------------------------------------------------------------------------------------- |
|
||||
| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| format | `string` | `X` | 日期选择器值格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| inputFormat | `string` | `YYYY-MM-DD` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 |
|
||||
| placeholder | `string` | `"请选择日期"` | 占位文本 |
|
||||
| shortcuts | `string` | | 日期快捷键 |
|
||||
| minDate | `string` | | 限制最小日期 |
|
||||
| maxDate | `string` | | 限制最大日期 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------- | -------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------- |
|
||||
| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| format | `string` | `X` | 日期选择器值格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| inputFormat | `string` | `YYYY-MM-DD` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 |
|
||||
| placeholder | `string` | `"请选择日期"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{"label": string; date: string}>` | | 日期快捷键，字符串格式为预设值，对象格式支持写表达式 | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期 |
|
||||
| maxDate | `string` | | 限制最大日期 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联模式 |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`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`取值。
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@ order: 16
|
||||
|
||||
## 快捷键
|
||||
|
||||
`ranges`属性支持自定义日期时间范围快捷键
|
||||
`shortcuts`属性支持自定义日期时间范围快捷键
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
@ -57,7 +57,46 @@ order: 16
|
||||
"type": "input-datetime-range",
|
||||
"name": "select",
|
||||
"label": "日期范围",
|
||||
"ranges": "today,yesterday,1dayago,7daysago"
|
||||
"shortcuts": "today,yesterday,1dayago,7daysago"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
快捷键也支持使用表达式的写法，可以使用这种方式自定义快捷键
|
||||
|
||||
> 3.1.0 及以上版本
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"type": "input-datetime-range",
|
||||
"name": "select",
|
||||
"label": "日期范围",
|
||||
"inputFormat": "YYYY-MM-DD HH:mm:ss",
|
||||
"timeFormat": "HH:mm:ss",
|
||||
"format": "x",
|
||||
"shortcuts": [
|
||||
{
|
||||
"label": "1天前",
|
||||
"startDate": "${DATEMODIFY(NOW(), -1, 'day')}",
|
||||
"endDate": "${NOW()}"
|
||||
},
|
||||
{
|
||||
"label": "1个月前",
|
||||
"startDate": "${DATEMODIFY(NOW(), -1, 'months')}",
|
||||
"endDate": "${NOW()}"
|
||||
},
|
||||
{
|
||||
"label": "本季度",
|
||||
"startDate": "${STARTOF(NOW(), 'quarter')}",
|
||||
"endDate": "${ENDOF(NOW(), 'quarter')}"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -67,21 +106,21 @@ order: 16
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ----------- | ------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------- |
|
||||
| format | `string` | `X` | [日期时间选择器值格式](./input-datetime#%E5%80%BC%E6%A0%BC%E5%BC%8F) |
|
||||
| inputFormat | `string` | `YYYY-MM-DD` | [日期时间选择器显示格式](./input-datetime#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) |
|
||||
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
|
||||
| ranges | `Array<string> 或 string` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键 |
|
||||
| minDate | `string` | | 限制最小日期时间，用法同 [限制范围](./input-datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期时间，用法同 [限制范围](./input-datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./input-datetime#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ----------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------- |
|
||||
| format | `string` | `X` | [日期时间选择器值格式](./input-datetime#%E5%80%BC%E6%A0%BC%E5%BC%8F) |
|
||||
| inputFormat | `string` | `YYYY-MM-DD` | [日期时间选择器显示格式](./input-datetime#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) |
|
||||
| placeholder | `string` | `"请选择日期范围"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{label: string; startDate: string; endDate: string}>` | `"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter"` | 日期范围快捷键，详情参考[快捷键](./input-date-range#快捷键) | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期时间，用法同 [限制范围](./input-datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| maxDate | `string` | | 限制最大日期时间，用法同 [限制范围](./input-datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) |
|
||||
| utc | `boolean` | `false` | [保存 UTC 值](./input-datetime#utc) |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`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`取值。
|
||||
|
||||
|
||||
@ -278,6 +278,33 @@ order: 14
|
||||
- `{n}hoursago` : n 小时前，例如：`2hoursago`，下面用法相同
|
||||
- `{n}hourslater` : n 小时后，例如：`2hourslater`，下面用法相同
|
||||
|
||||
快捷键也支持使用表达式的写法，可以使用这种方式自定义快捷键
|
||||
|
||||
> 3.1.0 及以上版本
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"type": "input-datetime",
|
||||
"name": "datetime",
|
||||
"label": "日期",
|
||||
"shortcuts": [
|
||||
{
|
||||
"label": "前天",
|
||||
"date": "${STARTOF(DATEMODIFY(NOW(), -2, 'day'))}"
|
||||
},
|
||||
"yesterday",
|
||||
"today"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## UTC
|
||||
|
||||
```schema: scope="body"
|
||||
@ -330,23 +357,23 @@ order: 14
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------------------------------- |
|
||||
| value | `string` | | [默认值](./datetime#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| format | `string` | `X` | 日期时间选择器值格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| inputFormat | `string` | `YYYY-MM-DD HH:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| placeholder | `string` | `"请选择日期以及时间"` | 占位文本 |
|
||||
| shortcuts | `string` | | 日期时间快捷键 |
|
||||
| minDate | `string` | | 限制最小日期时间 |
|
||||
| maxDate | `string` | | 限制最大日期时间 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联 |
|
||||
| timeConstraints | `object` | `true` | 请参考 [input-time](./input-time#控制输入范围) 里的说明 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| --------------- | -------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------- |
|
||||
| value | `string` | | [默认值](./datetime#%E9%BB%98%E8%AE%A4%E5%80%BC) |
|
||||
| format | `string` | `X` | 日期时间选择器值格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| inputFormat | `string` | `YYYY-MM-DD HH:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 [文档](https://momentjs.com/docs/#/displaying/format/) |
|
||||
| placeholder | `string` | `"请选择日期以及时间"` | 占位文本 |
|
||||
| shortcuts | `string \| string[] \| Array<{"label": string; date: string}>` | | 日期时间快捷键 | `3.1.0`版本后支持表达式 |
|
||||
| minDate | `string` | | 限制最小日期时间 |
|
||||
| maxDate | `string` | | 限制最大日期时间 |
|
||||
| utc | `boolean` | `false` | 保存 utc 值 |
|
||||
| clearable | `boolean` | `true` | 是否可清除 |
|
||||
| embed | `boolean` | `false` | 是否内联 |
|
||||
| timeConstraints | `object` | `true` | 请参考 [input-time](./input-time#控制输入范围) 里的说明 |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -254,7 +254,7 @@ order: 14
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -340,7 +340,7 @@ order: 21
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`file`取值。
|
||||
|
||||
|
||||
@ -95,7 +95,7 @@ app.listen(8080, function () {});
|
||||
|
||||
想要限制多个类型，则用逗号分隔，例如：`.jpg,.png`
|
||||
|
||||
## 限制文件大小
|
||||
## 限制文件宽度
|
||||
|
||||
配置 `limit`，更多属性请参考后面的属性说明。
|
||||
|
||||
@ -118,6 +118,27 @@ app.listen(8080, function () {});
|
||||
}
|
||||
```
|
||||
|
||||
## 限制文件大小
|
||||
|
||||
配置 `maxSize`，限制文件大小，单位为 `B`。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"type": "input-image",
|
||||
"name": "image",
|
||||
"label": "上传文件不能大于 1K",
|
||||
"accept": ".jpg",
|
||||
"maxSize": 1024,
|
||||
"receiver": "/api/upload/file"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 支持裁剪
|
||||
|
||||
```schema: scope="body"
|
||||
@ -420,38 +441,67 @@ app.listen(8080, function () {});
|
||||
}
|
||||
```
|
||||
|
||||
## 拖拽排序
|
||||
|
||||
可配置 `draggable` 为 `true` 启动拖拽排序。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"title": "表单",
|
||||
data: {
|
||||
image: [
|
||||
'http://www.sortablejs.com/assets/img/npm.png',
|
||||
'http://www.sortablejs.com/assets/img/bower.png',
|
||||
'http://www.sortablejs.com/assets/img/js.png'
|
||||
]
|
||||
},
|
||||
"body": [
|
||||
'Images: <br />${image|split|join:"<br />"}',
|
||||
{
|
||||
type: 'input-image',
|
||||
name: 'image',
|
||||
multiple: true,
|
||||
draggable: true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------ | ------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| receiver | [API](../../../docs/types/api) | | 上传文件接口 |
|
||||
| accept | `string` | `.jpeg,.jpg,.png,.gif` | 支持的图片类型格式，请配置此属性为图片后缀，例如`.jpg,.png` |
|
||||
| maxSize | `number` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`B` |
|
||||
| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 |
|
||||
| multiple | `boolean` | `false` | 是否多选。 |
|
||||
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
|
||||
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
|
||||
| delimiter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |
|
||||
| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |
|
||||
| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 |
|
||||
| crop | `boolean`或`{"aspectRatio":""}` | | 用来设置是否支持裁剪。 |
|
||||
| crop.aspectRatio | `number` | | 裁剪比例。浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。。 |
|
||||
| crop.rotatable | `boolean` | `false` | 裁剪时是否可旋转 |
|
||||
| crop.scalable | `boolean` | `false` | 裁剪时是否可缩放 |
|
||||
| crop.viewMode | `number` | `1` | 裁剪时的查看模式，0 是无限制 |
|
||||
| cropFormat | `string` | `image/png` | 裁剪文件格式 |
|
||||
| cropQuality | `number` | `1` | 裁剪文件格式的质量，用于 jpeg/webp，取值在 0 和 1 之间 |
|
||||
| limit | Limit | | 限制图片大小，超出不让上传。 |
|
||||
| frameImage | `string` | | 默认占位图地址 |
|
||||
| fixedSize | `boolean` | | 是否开启固定尺寸,若开启，需同时设置 fixedSizeClassName |
|
||||
| fixedSizeClassName | `string` | | 开启固定尺寸时，根据此值控制展示尺寸。例如`h-30`,即图片框高为 h-30,AMIS 将自动缩放比率设置默认图所占位置的宽度，最终上传图片根据此尺寸对应缩放。 |
|
||||
| initAutoFill | `boolean` | `false` | 表单反显时是否执行 autoFill |
|
||||
| uploadBtnText | `string` \| [SchemaNode](../../docs/types/schemanode) | | 上传按钮文案。支持tpl、schema形式配置。 |
|
||||
| dropCrop | `boolean` | `true` | 图片上传后是否进入裁剪模式 |
|
||||
| initCrop | `boolean` | `false` | 图片选择器初始化后是否立即进入裁剪模式 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------ | ----------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| receiver | [API](../../../docs/types/api) | | 上传文件接口 |
|
||||
| accept | `string` | `.jpeg,.jpg,.png,.gif` | 支持的图片类型格式，请配置此属性为图片后缀，例如`.jpg,.png` |
|
||||
| maxSize | `number` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`B` |
|
||||
| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 |
|
||||
| multiple | `boolean` | `false` | 是否多选。 |
|
||||
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
|
||||
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
|
||||
| delimiter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |
|
||||
| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |
|
||||
| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 |
|
||||
| crop | `boolean`或`{"aspectRatio":""}` | | 用来设置是否支持裁剪。 |
|
||||
| crop.aspectRatio | `number` | | 裁剪比例。浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。。 |
|
||||
| crop.rotatable | `boolean` | `false` | 裁剪时是否可旋转 |
|
||||
| crop.scalable | `boolean` | `false` | 裁剪时是否可缩放 |
|
||||
| crop.viewMode | `number` | `1` | 裁剪时的查看模式，0 是无限制 |
|
||||
| cropFormat | `string` | `image/png` | 裁剪文件格式 |
|
||||
| cropQuality | `number` | `1` | 裁剪文件格式的质量，用于 jpeg/webp，取值在 0 和 1 之间 |
|
||||
| limit | Limit | | 限制图片大小，超出不让上传。 |
|
||||
| frameImage | `string` | | 默认占位图地址 |
|
||||
| fixedSize | `boolean` | | 是否开启固定尺寸,若开启，需同时设置 fixedSizeClassName |
|
||||
| fixedSizeClassName | `string` | | 开启固定尺寸时，根据此值控制展示尺寸。例如`h-30`,即图片框高为 h-30,AMIS 将自动缩放比率设置默认图所占位置的宽度，最终上传图片根据此尺寸对应缩放。 |
|
||||
| initAutoFill | `boolean` | `false` | 表单反显时是否执行 autoFill |
|
||||
| uploadBtnText | `string` \| [SchemaNode](../../docs/types/schemanode) | | 上传按钮文案。支持 tpl、schema 形式配置。 |
|
||||
| dropCrop | `boolean` | `true` | 图片上传后是否进入裁剪模式 |
|
||||
| initCrop | `boolean` | `false` | 图片选择器初始化后是否立即进入裁剪模式 |
|
||||
| draggable | `boolean` | false | 开启后支持拖拽排序改变图片值顺序 |
|
||||
| draggableTip | `string` | '拖拽排序' | 拖拽提示文案 |
|
||||
|
||||
### Limit 属性表
|
||||
|
||||
@ -467,7 +517,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`取值。
|
||||
|
||||
|
||||
@ -198,17 +198,18 @@ key 只能是字符串，因此输入格式是 `input-text`，但 value 格式
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------- | -------------- | ------------------ |
|
||||
| valueType | `type` | `"input-text"` | 值类型 |
|
||||
| keyPlaceholder | `string` | | key 的提示信息的 |
|
||||
| valuePlaceholder | `string` | | value 的提示信息的 |
|
||||
| draggable | `boolean` | true | 是否可拖拽排序 |
|
||||
| defaultValue | | `''` | 默认值 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------- | -------------- | ---------------------------- |
|
||||
| valueType | `type` | `"input-text"` | 值类型 |
|
||||
| keyPlaceholder | `string` | | key 的提示信息的 |
|
||||
| valuePlaceholder | `string` | | value 的提示信息的 |
|
||||
| draggable | `boolean` | true | 是否可拖拽排序 |
|
||||
| defaultValue | | `''` | 默认值 |
|
||||
| autoParseJSON | `boolean` | `true` | 是否自动转换 json 对象字符串 |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -63,7 +63,7 @@ order: 15
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -156,7 +156,7 @@ order: 81
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -292,7 +292,7 @@ order: 32
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@ order: 15
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ order: 62
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -280,7 +280,7 @@ order: 38
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -162,7 +162,7 @@ order: 37
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -134,7 +134,7 @@ order: 55
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -423,7 +423,7 @@ order: 56
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -81,7 +81,7 @@ order: 15
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -255,7 +255,7 @@ order: 58
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -1100,7 +1100,7 @@ true false false [{label: 'A/B/C', value: 'a/b/c'},{label: 'A
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -63,7 +63,7 @@ order: 15
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ order: 61
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -93,7 +93,7 @@ ListSelect 一般用来实现选择，可以单选也可以多选，和 Radio/Ch
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -284,7 +284,7 @@ row 模式，每行只能单选某个单元格
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -678,7 +678,7 @@ order: 31
|
||||
}
|
||||
],
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
multiple: true,
|
||||
joinValues: true,
|
||||
clearable: true
|
||||
}
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -515,13 +515,14 @@ order: 35
|
||||
| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) |
|
||||
| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
| modalTitle | `string` | `"请选择"` | 设置模态框的标题 |
|
||||
| modalMode | `string` | `"dialog"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 |
|
||||
| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 [CRUD](../crud) |
|
||||
| embed | `boolean` | `false` | 是否使用内嵌模式 |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`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`取值。
|
||||
|
||||
|
||||
190
docs/zh-CN/components/form/radio.md
Normal file
190
docs/zh-CN/components/form/radio.md
Normal file
@ -0,0 +1,190 @@
|
||||
---
|
||||
title: Radio 单选框
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Radio
|
||||
icon:
|
||||
order: 8
|
||||
---
|
||||
|
||||
实现组合中的单选功能，此组件只有在 `combo` 和 `input-table` 中有意义。
|
||||
|
||||
## combo 中使用
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
data: {
|
||||
answers: [
|
||||
{
|
||||
isAnswer: false,
|
||||
answer: '选项 1'
|
||||
},
|
||||
{
|
||||
isAnswer: false,
|
||||
answer: '选项 2',
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
type: 'combo',
|
||||
label: '可选答案',
|
||||
name: 'answers',
|
||||
multiple: true,
|
||||
addable: true,
|
||||
strictMode: false,
|
||||
items: [
|
||||
{
|
||||
type: 'radio',
|
||||
name: 'isAnswer',
|
||||
columnClassName: 'no-grow'
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'answer',
|
||||
placeholder: '答案文案'
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## input-table 中使用
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
data: {
|
||||
answers: [
|
||||
{
|
||||
isAnswer: false,
|
||||
answer: '选项 1'
|
||||
},
|
||||
{
|
||||
isAnswer: false,
|
||||
answer: '选项 2',
|
||||
children: [
|
||||
{
|
||||
isAnswer: false,
|
||||
answer: '选项 1'
|
||||
},
|
||||
{
|
||||
isAnswer: false,
|
||||
answer: '选项 2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
type: 'input-table',
|
||||
label: '可选答案',
|
||||
name: 'answers',
|
||||
multiple: true,
|
||||
addable: true,
|
||||
strictMode: false,
|
||||
columns: [
|
||||
{
|
||||
label: '',
|
||||
type: 'radio',
|
||||
name: 'isAnswer',
|
||||
},
|
||||
{
|
||||
label: '答案文案',
|
||||
type: 'input-text',
|
||||
name: 'answer',
|
||||
placeholder: '答案文案'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 配置真假值
|
||||
|
||||
默认情况：
|
||||
|
||||
- 单选框勾选时，表单项值为：true
|
||||
- 单选框取消勾选时，表单项值为：false
|
||||
|
||||
如果你想调整这个值，可以配置`trueValue`和`falseValue`
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
data: {
|
||||
answers: [
|
||||
{
|
||||
isAnswer: false,
|
||||
answer: '选项 1'
|
||||
},
|
||||
{
|
||||
isAnswer: false,
|
||||
answer: '选项 2',
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
type: 'combo',
|
||||
label: '可选答案',
|
||||
name: 'answers',
|
||||
multiple: true,
|
||||
addable: true,
|
||||
strictMode: false,
|
||||
items: [
|
||||
{
|
||||
type: 'radio',
|
||||
name: 'isAnswer',
|
||||
columnClassName: 'no-grow',
|
||||
trueValue: 1,
|
||||
falseValue: 0
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'answer',
|
||||
placeholder: '答案文案'
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | ------------------------- | ------- | -------- |
|
||||
| option | `string` | | 选项说明 |
|
||||
| trueValue | `string｜number｜boolean` | `true` | 标识真值 |
|
||||
| falseValue | `string｜number｜boolean` | `false` | 标识假值 |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | -------------------------- | ------------------ |
|
||||
| change | `[name]: boolean` 组件的值 | 选中状态变化时触发 |
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
| -------- | ------------------------------------------- | ------------------------------------------------------ |
|
||||
| clear | - | 清空 |
|
||||
| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |
|
||||
| setValue | `value: string \|number \|boolean` 更新的值 | 更新数据 |
|
||||
@ -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`取值。
|
||||
|
||||
|
||||
@ -585,6 +585,64 @@ _多选_
|
||||
}
|
||||
```
|
||||
|
||||
### 自定义搜索函数
|
||||
|
||||
默认通过[match-sorter](https://github.com/kentcdodds/match-sorter)搜索过滤 value,label 中的值
|
||||
|
||||
可通过`filterOption`自定义搜索过滤函数
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"body": [
|
||||
{
|
||||
"label": "带搜索",
|
||||
"type": "select",
|
||||
"name": "a",
|
||||
"selectMode": "chained",
|
||||
"searchable": true,
|
||||
"filterOption": "return options.filter(({value, label, weapon}) => value?.includes(inputValue) || label?.includes(inputValue) || weapon?.includes(inputValue));",
|
||||
"sortable": true,
|
||||
"multiple": true,
|
||||
"options": [
|
||||
{
|
||||
"label": "诸葛亮",
|
||||
"value": "zhugeliang",
|
||||
"weapon": "翡翠仙扇"
|
||||
},
|
||||
{
|
||||
"label": "曹操",
|
||||
"value": "caocao",
|
||||
"weapon": "幻影双刃"
|
||||
},
|
||||
{
|
||||
"label": "钟无艳",
|
||||
"value": "zhongwuyan",
|
||||
"weapon": "破岳震天锤"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "李白",
|
||||
"value": "libai",
|
||||
"weapon": "青丝缠月剑"
|
||||
},
|
||||
{
|
||||
"label": "韩信",
|
||||
"value": "hanxin",
|
||||
"weapon": "龙吟穿云枪"
|
||||
},
|
||||
{
|
||||
"label": "云中君",
|
||||
"value": "yunzhongjun",
|
||||
"weapon": "飘渺云影剑"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 延时加载
|
||||
|
||||
选型设置 defer: true，结合配置组件层的 `deferApi` 来实现。
|
||||
@ -1140,6 +1198,7 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#多选-multiple) |
|
||||
| searchable | `boolean` | `false` | [检索](./options#检索-searchable) |
|
||||
| filterOption | `string` | `(options: Option[], inputValue: string, option: {keys: string[]}) => Option[]` | |
|
||||
| createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) |
|
||||
| addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) |
|
||||
| addApi | [API](../../docs/types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
@ -1169,7 +1228,7 @@ leftOptions 动态加载，默认 source 接口是返回 options 部分，而 le
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -148,7 +148,7 @@ IconSchema 配置
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -152,7 +152,7 @@ icon:
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -369,7 +369,7 @@ icon:
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -107,7 +107,7 @@ order: 57
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -122,7 +122,7 @@ icon:
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -852,7 +852,7 @@ icon:
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -405,7 +405,7 @@ order: 60
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
|
||||
@ -351,6 +351,7 @@ order: 54
|
||||
| type | `string` | `grid-nav` | |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| itemClassName | `string` | | 列表项 css 类名 |
|
||||
| contentClassName | `string` | | 列表项内容 css 类名 |
|
||||
| value | `Array<object>` | | 图片数组 |
|
||||
| source | `string` | | 数据源 |
|
||||
| square | `boolean` | | 是否将列表项固定为正方形 |
|
||||
@ -367,7 +368,3 @@ order: 54
|
||||
| options.link | `string` | | 内部页面路径或外部跳转 URL 地址，优先级高于 clickAction |
|
||||
| options.blank | `boolean` | | 是否新页面打开，link 为 url 时有效 |
|
||||
| options.clickAction | `ActionSchema` | | 列表项点击交互 详见 [Action](./action) |
|
||||
|
||||
```
|
||||
|
||||
```
|
||||
|
||||
@ -211,10 +211,82 @@ v6 用 fa-regular / fa-solid 等表示前缀，可参考官网[示例](https://f
|
||||
|
||||
> 2.6.1 及以上版本
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | -------------------------------------- | -------------- |
|
||||
| click | `nativeEvent: MouseEvent` 鼠标事件对象 | 点击时触发 |
|
||||
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
|
||||
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | -------- | -------------- |
|
||||
| click | - | 点击时触发 |
|
||||
| mouseenter | - | 鼠标移入时触发 |
|
||||
| mouseleave | - | 鼠标移出时触发 |
|
||||
|
||||
### click
|
||||
|
||||
鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "icon",
|
||||
"icon": "cloud",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.target.className}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseenter
|
||||
|
||||
鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "icon",
|
||||
"icon": "cloud",
|
||||
"onEvent": {
|
||||
"mouseenter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseleave
|
||||
|
||||
鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "icon",
|
||||
"icon": "cloud",
|
||||
"onEvent": {
|
||||
"mouseleave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -141,6 +141,97 @@ order: 52
|
||||
}
|
||||
```
|
||||
|
||||
在列表中，图片组件的放大模式下默认展示所有行的图片信息，设置`"enlargeWithGallary": true`效果相同。
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"imageList": [
|
||||
{
|
||||
"name": "amis",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "amis",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "tom",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "jack",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"source": "${imageList}",
|
||||
"syncLocation": false,
|
||||
"columns": [
|
||||
{
|
||||
"name": "name",
|
||||
"label": "名称"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"name": "image_url",
|
||||
"label": "图片",
|
||||
"enlargeAble": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
在列表中，图片组件配置`"enlargeWithGallary": false`可以关闭放大模式下图片集列表的展示。
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"imageList": [
|
||||
{
|
||||
"name": "amis",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "amis",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "tom",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
},
|
||||
{
|
||||
"name": "jack",
|
||||
"image_url": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"type": "crud",
|
||||
"source": "${imageList}",
|
||||
"syncLocation": false,
|
||||
"columns": [
|
||||
{
|
||||
"name": "name",
|
||||
"label": "名称"
|
||||
},
|
||||
{
|
||||
"type": "image",
|
||||
"name": "image_url",
|
||||
"label": "图片",
|
||||
"enlargeAble": true,
|
||||
"enlargeWithGallary": false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
可以配置`originalSrc`，来指定原图资源地址，作为放大预览的图片地址
|
||||
|
||||
```schema
|
||||
@ -342,30 +433,31 @@ List 的内容、Card 卡片的内容配置同上
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| -------------- | ------------------------------------ | --------- | -------------------------------------------------------------------------------------- | ------- |
|
||||
| type | `string` | | 如果在 Table、Card 和 List 中，为`"image"`；在 Form 中用作静态展示，为`"static-image"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| innerClassName | `string` | | 组件内层 CSS 类名 |
|
||||
| imageClassName | `string` | | 图片 CSS 类名 |
|
||||
| thumbClassName | `string` | | 图片缩率图 CSS 类名 |
|
||||
| height | `string` | | 图片缩率高度 |
|
||||
| width | `string` | | 图片缩率宽度 |
|
||||
| title | `string` | | 标题 |
|
||||
| imageCaption | `string` | | 描述 |
|
||||
| placeholder | `string` | | 占位文本 |
|
||||
| defaultImage | `string` | | 无数据时显示的图片 |
|
||||
| src | `string` | | 缩略图地址 |
|
||||
| href | [模板](../../docs/concepts/template) | | 外部链接地址 |
|
||||
| originalSrc | `string` | | 原图地址 |
|
||||
| enlargeAble | `boolean` | | 支持放大预览 |
|
||||
| enlargeTitle | `string` | | 放大预览的标题 |
|
||||
| enlargeCaption | `string` | | 放大预览的描述 |
|
||||
| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |
|
||||
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
|
||||
| imageMode | `string` | `thumb` | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式 |
|
||||
| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |
|
||||
| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------ | ------------------------------------ | --------- | --------------------------------------------------------------------------------------------- | ------- |
|
||||
| type | `string` | | 如果在 Table、Card 和 List 中，为`"image"`；在 Form 中用作静态展示，为`"static-image"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| innerClassName | `string` | | 组件内层 CSS 类名 |
|
||||
| imageClassName | `string` | | 图片 CSS 类名 |
|
||||
| thumbClassName | `string` | | 图片缩率图 CSS 类名 |
|
||||
| height | `string` | | 图片缩率高度 |
|
||||
| width | `string` | | 图片缩率宽度 |
|
||||
| title | `string` | | 标题 |
|
||||
| imageCaption | `string` | | 描述 |
|
||||
| placeholder | `string` | | 占位文本 |
|
||||
| defaultImage | `string` | | 无数据时显示的图片 |
|
||||
| src | `string` | | 缩略图地址 |
|
||||
| href | [模板](../../docs/concepts/template) | | 外部链接地址 |
|
||||
| originalSrc | `string` | | 原图地址 |
|
||||
| enlargeAble | `boolean` | | 支持放大预览 |
|
||||
| enlargeTitle | `string` | | 放大预览的标题 |
|
||||
| enlargeCaption | `string` | | 放大预览的描述 |
|
||||
| enlargeWithGallary | `string` | `true` | 在表格中，图片的放大功能会默认展示所有图片信息，设置为`false`将关闭放大模式下图片集列表的展示 |
|
||||
| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |
|
||||
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
|
||||
| imageMode | `string` | `thumb` | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式 |
|
||||
| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |
|
||||
| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |
|
||||
|
||||
#### ImageAction
|
||||
|
||||
|
||||
@ -370,6 +370,54 @@ Array<{
|
||||
}
|
||||
```
|
||||
|
||||
图片组件配置`"enlargeWithGallary": false`可以关闭放大模式下图片集列表的展示，表格中亦是如此。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"images": [
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"title": "图片1",
|
||||
"description": "图片1的描述"
|
||||
},
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"title": "图片2",
|
||||
"description": "图片2的描述"
|
||||
},
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"title": "图片3",
|
||||
"description": "图片3的描述"
|
||||
},
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"title": "图片4",
|
||||
"description": "图片4的描述"
|
||||
},
|
||||
{
|
||||
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
|
||||
"title": "图片5",
|
||||
"description": "图片5的描述"
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"type": "images",
|
||||
"source": "${images}",
|
||||
"enlargeAble": true,
|
||||
"enlargeWithGallary": false
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 用作 Field 时
|
||||
|
||||
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量
|
||||
@ -422,13 +470,126 @@ Array<{
|
||||
{
|
||||
"name": "images",
|
||||
"label": "颜色",
|
||||
"type": "images"
|
||||
"type": "images",
|
||||
"enlargeAble": true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
List 的内容、Card 卡片的内容配置同上
|
||||
Table 中图片组件配置`"enlargeWithGallary": true`可以在放大模式下预览列表中的所有图片集。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "table",
|
||||
"data": {
|
||||
"items": [
|
||||
{
|
||||
"id": "1",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "Id"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "images",
|
||||
"label": "颜色",
|
||||
"type": "images",
|
||||
"enlargeAble": true,
|
||||
"enlargeWithGallary": true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Table 中图片组件配置`"enlargeWithGallary": false`可以关闭放大模式下图片集列表的展示。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "table",
|
||||
"data": {
|
||||
"items": [
|
||||
{
|
||||
"id": "1",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"images": [
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"label": "Id"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "images",
|
||||
"label": "颜色",
|
||||
"type": "images",
|
||||
"enlargeAble": true,
|
||||
"enlargeWithGallary": false
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
List 的内容、Card 卡片的内容配置同上。
|
||||
|
||||
### Form 中关联数据静态展示
|
||||
|
||||
@ -503,18 +664,19 @@ List 的内容、Card 卡片的内容配置同上
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| -------------- | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------- | ------- |
|
||||
| type | `string` | `images` | 如果在 Table、Card 和 List 中，为`"images"`；在 Form 中用作静态展示，为`"static-images"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| defaultImage | `string` | | 默认展示图片 |
|
||||
| value | `string`或`Array<string>`或`Array<object>` | | 图片数组 |
|
||||
| source | `string` | | 数据源 |
|
||||
| delimiter | `string` | `,` | 分隔符，当 value 为字符串时，用该值进行分隔拆分 |
|
||||
| src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 |
|
||||
| originalSrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 |
|
||||
| enlargeAble | `boolean` | | 支持放大预览 |
|
||||
| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |
|
||||
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
|
||||
| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |
|
||||
| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 | 版本 |
|
||||
| ------------------ | ------------------------------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------- |
|
||||
| type | `string` | `images` | 如果在 Table、Card 和 List 中，为`"images"`；在 Form 中用作静态展示，为`"static-images"` |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| defaultImage | `string` | | 默认展示图片 |
|
||||
| value | `string`或`Array<string>`或`Array<object>` | | 图片数组 |
|
||||
| source | `string` | | 数据源 |
|
||||
| delimiter | `string` | `,` | 分隔符，当 value 为字符串时，用该值进行分隔拆分 |
|
||||
| src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 |
|
||||
| originalSrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 |
|
||||
| enlargeAble | `boolean` | | 支持放大预览 |
|
||||
| enlargeWithGallary | `string` | | 默认在放大功能展示图片集的所有图片信息；表格中使用时，设置为`true`将展示所有行的图片信息；设置为`false`将关闭放大模式下图片集列表的展示 |
|
||||
| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |
|
||||
| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |
|
||||
| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |
|
||||
| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |
|
||||
|
||||
@ -292,17 +292,62 @@ interface ListBodyField {
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 | 版本 |
|
||||
| --------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
|
||||
| itemClick | `item: IItem` | 单行被点击时触发，[`IItem`](./list#iitem)为点击行的信息。注意`itemAction`和`onEvent`是互斥的，List 组件中的`onEvent`会覆盖`itemAction`的行为 | `2.4.0` |
|
||||
| 事件名称 | 事件参数 | 说明 | 版本 |
|
||||
| --------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------- |
|
||||
| itemClick | `item: IItem` | 单行被点击时触发，`IItem`为点击行的信息。注意`itemAction`和`onEvent`是互斥的，List 组件中的`onEvent`会覆盖`itemAction`的行为 | `2.4.0` |
|
||||
|
||||
### IItem
|
||||
**IItem**
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------ | --------------------- | ------ | ------------------- |
|
||||
| data | `Record<string, any>` | | 当前行所在数据域 |
|
||||
| index | `number` | | 行索引值，从 0 开始 |
|
||||
|
||||
### itemClick
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/sample?perPage=5",
|
||||
"body": [
|
||||
{
|
||||
"type": "list",
|
||||
"source": "$rows",
|
||||
"listItem": {
|
||||
"body": [
|
||||
{
|
||||
"type": "hbox",
|
||||
"columns": [
|
||||
{
|
||||
"label": "Engine",
|
||||
"name": "engine"
|
||||
},
|
||||
{
|
||||
"name": "version",
|
||||
"label": "Version"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"onEvent": {
|
||||
"itemClick": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.data.item.index} ${event.data.item.data.engine}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -93,7 +93,6 @@ public class StreamingResponseBodyController {
|
||||
2. 设置 `maxLength`，限制最大显示行数
|
||||
- 优点：某一行日志很长的时候会自动折行
|
||||
- 缺点：无法查看之前的日志
|
||||
3. 试试通过 `"disableColor": false` 关闭 ANSI 颜色
|
||||
|
||||
## 自动滚动到底部
|
||||
|
||||
@ -160,14 +159,16 @@ public class StreamingResponseBodyController {
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | --------- | ------ | -------------------------------------------------------- |
|
||||
| height | `number` | 500 | 展示区域高度 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| autoScroll | `boolean` | true | 是否自动滚动 |
|
||||
| placeholder | `string` | | 加载中的文字 |
|
||||
| encoding | `string` | utf-8 | 返回内容的字符编码 |
|
||||
| source | `string` | | 接口 |
|
||||
| rowHeight | `number` | | 设置每行高度，将会开启虚拟渲染 |
|
||||
| maxLength | `number` | | 最大显示行数 |
|
||||
| operation | `Array` | | 可选日志操作：['stop','restart',clear','showLineNumber','filter'] |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | --------- | --------- | ----------------------------------------------------------------- |
|
||||
| height | `number` | 500 | 展示区域高度 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| autoScroll | `boolean` | true | 是否自动滚动 |
|
||||
| disableColor | `boolean` | false | 是否禁用 ansi 颜色支持 |
|
||||
| placeholder | `string` | | 加载中的文字 |
|
||||
| encoding | `string` | utf-8 | 返回内容的字符编码 |
|
||||
| source | `string` | | 接口 |
|
||||
| credentials | `string` | 'include' | fetch 的 credentials 设置 |
|
||||
| rowHeight | `number` | | 设置每行高度，将会开启虚拟渲染 |
|
||||
| maxLength | `number` | | 最大显示行数 |
|
||||
| operation | `Array` | | 可选日志操作：['stop','restart',clear','showLineNumber','filter'] |
|
||||
|
||||
@ -47,7 +47,8 @@ order: 57
|
||||
|
||||
## 渲染其它组件
|
||||
|
||||
映射的值也可以是 amis schema，渲染其它组件
|
||||
映射的值也可以是 amis schema，渲染其它组件
|
||||
|
||||
> 配置了`itemSchema`后，映射值不会再作为`schema`渲染
|
||||
|
||||
```schema
|
||||
@ -81,6 +82,7 @@ order: 57
|
||||
当映射值是`非object`时，可使用`${item}`获取映射值；
|
||||
|
||||
### html 或字符串模板
|
||||
|
||||
使用`${item}` 获取映射值
|
||||
|
||||
```schema
|
||||
@ -100,7 +102,8 @@ order: 57
|
||||
}
|
||||
```
|
||||
|
||||
### SchemaNode模板
|
||||
### SchemaNode 模板
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
@ -189,14 +192,14 @@ order: 57
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "mapping",
|
||||
"value": "1",
|
||||
"map": {
|
||||
"1": "第一",
|
||||
"2": "第二",
|
||||
"3": "第三",
|
||||
"*": "其他"
|
||||
}
|
||||
"type": "mapping",
|
||||
"value": "1",
|
||||
"map": {
|
||||
"1": "第一",
|
||||
"2": "第二",
|
||||
"3": "第三",
|
||||
"*": "其他"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -208,45 +211,37 @@ order: 57
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "mapping",
|
||||
"value": "1",
|
||||
"map": [
|
||||
{"1": "第一"},
|
||||
{"2": "第二"},
|
||||
{"3": "第三"},
|
||||
{"*": "其他"}
|
||||
]
|
||||
"type": "mapping",
|
||||
"value": "1",
|
||||
"map": [{"1": "第一"}, {"2": "第二"}, {"3": "第三"}, {"*": "其他"}]
|
||||
}
|
||||
```
|
||||
|
||||
#### 多key对象数组
|
||||
#### 多 key 对象数组
|
||||
|
||||
当映射值有多个key时，需要使用`valueField`指定字段作为`mapping`的`key`, 也就是用来匹配`value`的值
|
||||
当映射值有多个 key 时，需要使用`valueField`指定字段作为`mapping`的`key`, 也就是用来匹配`value`的值
|
||||
可使用`labelField`指定展示字段，不配置时，默认为`label`
|
||||
**注意：**配置`labelField`后，映射值无法再作为`schema`渲染
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "mapping",
|
||||
"value": "happy",
|
||||
"valueField": "name",
|
||||
"map": [
|
||||
{
|
||||
"name": "happy",
|
||||
"label": "开心",
|
||||
"color": "red"
|
||||
},
|
||||
{
|
||||
"name": "sad",
|
||||
"label": "悲伤",
|
||||
"color": "blue"
|
||||
},
|
||||
{
|
||||
"name": "*",
|
||||
"label": "其他",
|
||||
"color": "gray"
|
||||
}
|
||||
]
|
||||
"type": "mapping",
|
||||
"value": "happy",
|
||||
"valueField": "name",
|
||||
"map": [
|
||||
{
|
||||
"name": "happy",
|
||||
"label": "开心"
|
||||
},
|
||||
{
|
||||
"name": "sad",
|
||||
"label": "悲伤"
|
||||
},
|
||||
{
|
||||
"name": "*",
|
||||
"label": "其他"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -473,12 +468,12 @@ List 的内容、Card 卡片的内容配置同上
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | ----------------- | ------ | --------------------------------------------------------------------------------- |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| placeholder | `string` | | 占位文本 |
|
||||
| map | `object`或`Array<object>` | | 映射配置 |
|
||||
| source | `string` or `API` | | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) |
|
||||
| valueField | `string` | value | `2.5.2` map或source为`Array<object>`时，用来匹配映射的字段名 |
|
||||
| labelField | `string` | label | `2.5.2` map或source为`Array<object>`时，用来展示的字段名<br />注：配置后映射值无法作为`schema`组件渲染 |
|
||||
| itemSchema | `string`或[SchemaNode](../../docs/types/schemanode) | | `2.5.2` 自定义渲染模板，支持`html`或`schemaNode`；<br /> 当映射值是`非object`时，可使用`${item}`获取映射值；<br />当映射值是`object`时，可使用映射语法: `${xxx}`获取`object`的值；<br /> 也可使用数据映射语法：`${xxx}`获取数据域中变量值。|
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | --------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| placeholder | `string` | | 占位文本 |
|
||||
| map | `object`或`Array<object>` | | 映射配置 |
|
||||
| source | `string` or `API` | | [API](../../../docs/types/api) 或 [数据映射](../../../docs/concepts/data-mapping) |
|
||||
| valueField | `string` | value | `2.5.2` map 或 source 为`Array<object>`时，用来匹配映射的字段名 |
|
||||
| labelField | `string` | label | `2.5.2` map 或 source 为`Array<object>`时，用来展示的字段名<br />注：配置后映射值无法作为`schema`组件渲染 |
|
||||
| itemSchema | `string`或[SchemaNode](../../docs/types/schemanode) | | `2.5.2` 自定义渲染模板，支持`html`或`schemaNode`；<br /> 当映射值是`非object`时，可使用`${item}`获取映射值；<br />当映射值是`object`时，可使用映射语法: `${xxx}`获取`object`的值；<br /> 也可使用数据映射语法：`${xxx}`获取数据域中变量值。 |
|
||||
|
||||
@ -282,7 +282,7 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
|
||||
|
||||
@ -292,6 +292,45 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
|
||||
| inited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 |
|
||||
| pullRefresh | - | 开启下拉刷新后，下拉释放后触发（仅用于移动端） |
|
||||
|
||||
### init 和 inited
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/mock2/page/initData",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "当前时间是：${date}"
|
||||
}
|
||||
],
|
||||
"onEvent": {
|
||||
"init": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "init"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"inited": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.data.responseData|json}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
@ -300,3 +339,66 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
|
||||
| -------- | -------------------------- | ---------------------------------------- |
|
||||
| reload | - | 重新加载，调用 `intiApi`，刷新数据域数据 |
|
||||
| setValue | `value: object` 更新的数据 | 更新数据 |
|
||||
|
||||
### reload
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"id": "page01",
|
||||
"initApi": "/api/mock2/page/initData",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "当前时间是：${date}"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "刷新请求",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "page01",
|
||||
"actionType": "reload"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### setValue
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"id": "page02",
|
||||
"initApi": "/api/mock2/page/initData",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "当前时间是：${date}"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "更新数据",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "page02",
|
||||
"actionType": "setValue",
|
||||
"args": {
|
||||
"value": {"date": "2023-05-01"}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -33,7 +33,9 @@ order: 73
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 简易模式
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
@ -48,20 +50,20 @@ order: 73
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | ----------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"pagination"` | 指定为 Pagination渲染器 |
|
||||
| mode | `normal \| simple` | `normal` | 迷你版本/简易版本 只显示左右箭头，配合hasNext使用 |
|
||||
| layout | `string \| string[]` | `["pager"]` | 通过控制layout属性的顺序，调整分页结构布局 |
|
||||
| maxButtons | `number` | `5` | 最多显示多少个分页按钮，最小为5 |
|
||||
| lastPage | `number` | | 总页数 （设置总条数total的时候，lastPage会重新计算） |
|
||||
| total | `number` | | 总条数 |
|
||||
| activePage | `number` | `1` | 当前页数 |
|
||||
| perPage | `number` | `10` | 每页显示多条数据 |
|
||||
| showPerPage | `boolean` | false | 是否展示perPage切换器 layout和showPerPage都可以控制 |
|
||||
| perPageAvailable | `number[]` | `[10, 20, 50, 100]` | 指定每页可以显示多少条 |
|
||||
| showPageInput | `boolean` | false | 是否显示快速跳转输入框 layout和showPageInput都可以控制|
|
||||
| disabled | `boolean` | false | 是否禁用 |
|
||||
| onPageChange | page、perPage改变时会触发 | (page: number, perPage: number) => void; | 分页改变触发 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | -------------------------- | ---------------------------------------- | --------------------------------------------------------- |
|
||||
| type | `string` | `"pagination"` | 指定为 Pagination 渲染器 |
|
||||
| mode | `normal` \| `simple` | `normal` | 迷你版本/简易版本 只显示左右箭头，配合 hasNext 使用 |
|
||||
| layout | `string` \| `string[]` | `["pager"]` | 通过控制 layout 属性的顺序，调整分页结构布局 |
|
||||
| maxButtons | `number` \| `string` | `5` | 最多显示多少个分页按钮，最小为 5 |
|
||||
| total | `number` \| `string` | | 总条数 |
|
||||
| activePage | `number` \| `string` | `1` | 当前页数 |
|
||||
| perPage | `number` \| `string` | `10` | 每页显示多条数据 |
|
||||
| showPerPage | `boolean` | false | 是否展示 perPage 切换器 layout 和 showPerPage 都可以控制 |
|
||||
| perPageAvailable | `number[]` | `[10, 20, 50, 100]` | 指定每页可以显示多少条 |
|
||||
| showPageInput | `boolean` | false | 是否显示快速跳转输入框 layout 和 showPageInput 都可以控制 |
|
||||
| disabled | `boolean` | false | 是否禁用 |
|
||||
| onPageChange | page、perPage 改变时会触发 | (page: number, perPage: number) => void; | 分页改变触发 |
|
||||
|
||||
@ -202,7 +202,7 @@ icon:
|
||||
|
||||
> 2.4.1 及以上版本
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
@ -213,6 +213,114 @@ icon:
|
||||
| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |
|
||||
| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |
|
||||
|
||||
### search
|
||||
|
||||
```schema
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
|
||||
"body": [
|
||||
{
|
||||
"type": "search-box",
|
||||
"name": "keywords",
|
||||
"onEvent": {
|
||||
"search": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "${keywords}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### change
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
|
||||
"body": [
|
||||
{
|
||||
"type": "search-box",
|
||||
"name": "keywords",
|
||||
"onEvent": {
|
||||
"change": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "${keywords}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### focus
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
|
||||
"body": [
|
||||
{
|
||||
"type": "search-box",
|
||||
"name": "keywords",
|
||||
"onEvent": {
|
||||
"focus": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "${keywords}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### blur
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
|
||||
"body": [
|
||||
{
|
||||
"type": "search-box",
|
||||
"name": "keywords",
|
||||
"onEvent": {
|
||||
"blur": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "${keywords}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
> 2.4.1 及以上版本
|
||||
@ -223,3 +331,66 @@ icon:
|
||||
| -------- | ------------------------ | -------- |
|
||||
| clear | - | 清空 |
|
||||
| setValue | `value: string` 更新的值 | 更新数据 |
|
||||
|
||||
### clear
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
|
||||
"body": [
|
||||
{
|
||||
"type": "search-box",
|
||||
"name": "keywords",
|
||||
"id": "s01"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "清除",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "clear",
|
||||
"componentId": "s01"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### setValue
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"initApi": "/api/mock2/page/initData?keywords=${keywords}",
|
||||
"body": [
|
||||
{
|
||||
"type": "search-box",
|
||||
"name": "keywords",
|
||||
"id": "s02"
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "设置关键字",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "setValue",
|
||||
"componentId": "s02",
|
||||
"args": {
|
||||
"value": "amis"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
@ -739,7 +739,7 @@ ws.on('connection', function connection(ws) {
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
|
||||
|
||||
@ -749,6 +749,89 @@ ws.on('connection', function connection(ws) {
|
||||
| fetchInited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | api 接口请求完成时触发 |
|
||||
| fetchSchemaInited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | schemaApi 接口请求完成时触发 |
|
||||
|
||||
### init
|
||||
|
||||
开始初始化。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/page/initData",
|
||||
"body": {
|
||||
"type": "panel",
|
||||
"title": "$title",
|
||||
"body": "现在是：${date}"
|
||||
},
|
||||
"onEvent": {
|
||||
"init": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "init"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### fetchInited
|
||||
|
||||
api 接口请求完成。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "/api/mock2/page/initData",
|
||||
"body": [
|
||||
{
|
||||
"type": "panel",
|
||||
"title": "$title",
|
||||
"body": "现在是：${date}"
|
||||
}
|
||||
],
|
||||
"onEvent": {
|
||||
"fetchInited": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "title:${event.data.responseData.title}，date:${date}，status:${event.data.responseStatus}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### fetchSchemaInited
|
||||
|
||||
schemaApi 接口请求完成。
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "service",
|
||||
"schemaApi": "/api/mock2/service/schema?type=tabs",
|
||||
"onEvent": {
|
||||
"fetchSchemaInited": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msg": "type:${event.data.responseData.type}，status:${event.data.responseStatus}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，详细请查看[事件动作](../../docs/concepts/event-action#触发其他组件的动作)。
|
||||
@ -758,3 +841,169 @@ ws.on('connection', function connection(ws) {
|
||||
| reload | - | 重新加载，调用 `api`，刷新数据域数据 |
|
||||
| rebuild | - | 重新构建，调用 `schemaApi`，重新构建容器内 Schema |
|
||||
| setValue | - | 更新数据域数据 |
|
||||
|
||||
### reload
|
||||
|
||||
重新请求 api 接口，并刷新。
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "刷新请求",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"componentId": "service-reload",
|
||||
"actionType": "reload"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"id": "service-reload",
|
||||
"name": "service-reload",
|
||||
"api": "/api/mock2/number/random",
|
||||
"body": "现在是：${random}"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### rebuild
|
||||
|
||||
重新构建，基于 args 传参和 schemaApi 绑定变量，让 service 获取不同的 schema。
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "alert",
|
||||
"body": "请选择一种构建方式生成组件",
|
||||
"level": "info",
|
||||
"showIcon": true,
|
||||
"className": "mb-3",
|
||||
"visibleOn": "this.schemaType == null"
|
||||
},
|
||||
{
|
||||
"type": "button-group",
|
||||
"tiled": true,
|
||||
"className": "mb-3",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "action",
|
||||
"label": "构建form",
|
||||
"icon": "fa fa-hammer",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "rebuild",
|
||||
"componentId": "service-rebuild",
|
||||
"args": {
|
||||
"schemaType": "form"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "构建tabs",
|
||||
"icon": "fa fa-hammer",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "rebuild",
|
||||
"componentId": "service-rebuild",
|
||||
"args": {
|
||||
"schemaType": "tabs"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "构建crud",
|
||||
"icon": "fa fa-hammer",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "rebuild",
|
||||
"componentId": "service-rebuild",
|
||||
"args": {
|
||||
"schemaType": "crud"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"id": "service-rebuild",
|
||||
"name": "service-rebuild",
|
||||
"schemaApi": {
|
||||
"url": "/api/mock2/service/schema?type=${schemaType}",
|
||||
"method": "post",
|
||||
"sendOn": "this.schemaType != null"
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
### setValue
|
||||
|
||||
更新数据域。
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "更新数据",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "setValue",
|
||||
"componentId": "service-setvalue",
|
||||
"args": {
|
||||
"value": {
|
||||
"language": [
|
||||
"🇨🇳 中国"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"id": "service-setvalue",
|
||||
"name": "service-setvalue",
|
||||
"data": {
|
||||
"language": [
|
||||
"🇺🇸 美国"
|
||||
]
|
||||
},
|
||||
"body": {
|
||||
"type": "each",
|
||||
"name": "language",
|
||||
"items": {
|
||||
"type": "tpl",
|
||||
"tpl": "<span class='label label-default m-l-sm'><%= data.item %></span> "
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -15,6 +15,7 @@ order: 68
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "tabs",
|
||||
"swipeable": true,
|
||||
"tabs": [
|
||||
{
|
||||
"title": "Tab 1",
|
||||
@ -529,6 +530,46 @@ order: 68
|
||||
}
|
||||
```
|
||||
|
||||
内容来源于 source
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"arr": [
|
||||
{
|
||||
"a": "收入",
|
||||
"b": 199,
|
||||
"key": "a"
|
||||
},
|
||||
|
||||
{
|
||||
"a": "支出",
|
||||
"b": 299,
|
||||
"key": "b"
|
||||
}
|
||||
]
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
"type": "tabs",
|
||||
"activeKey": "b",
|
||||
"source": "${arr}",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "${a}",
|
||||
"hash": "${key}",
|
||||
"body": {
|
||||
"type": "tpl",
|
||||
"tpl": "金额：${b|number}元"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
#### 配置索引值
|
||||
|
||||
单个`tab`上不要配置`hash`属性，配置需要展示的`tab`索引值，`0`代表第一个。支持变量，如`"${id}"`
|
||||
@ -681,6 +722,46 @@ order: 68
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## title自定义
|
||||
|
||||
> 3.2.0 及以上版本
|
||||
|
||||
通过配置 tabs 数组中 title 为 schema，就能自定义 title 的显示。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "tabs",
|
||||
"addBtnText": "新增Tab",
|
||||
"showTip": true,
|
||||
"tabs": [
|
||||
{
|
||||
"title": {
|
||||
"type": "container",
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "这里是容器内容区"
|
||||
},
|
||||
{
|
||||
"type": "icon",
|
||||
"icon": "cloud"
|
||||
}
|
||||
]
|
||||
},
|
||||
"closable": true,
|
||||
"tab": "Content 1",
|
||||
"tip": "容器内容区提示"
|
||||
},
|
||||
{
|
||||
"title": "Tab 2",
|
||||
"tab": "Content 2"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 配置超出折叠
|
||||
|
||||
通过配置 `collapseOnExceed` 可以用来实现超出折叠，额外还能通过 `collapseBtnLabel` 配置折叠按钮的文字
|
||||
@ -766,7 +847,7 @@ order: 68
|
||||
| source | `string` | | tabs 关联数据，关联后可以重复生成选项卡 |
|
||||
| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 |
|
||||
| toolbarClassName | `string` | | tabs 中工具栏的类名 |
|
||||
| tabs[x].title | `string` | | Tab 标题 |
|
||||
| tabs[x].title | `string` \| [SchemaNode](../types/schemanode) | | Tab 标题，当是 [SchemaNode](../types/schemanode) 时，该 title 不支持 editable 为 true 的双击编辑 |
|
||||
| tabs[x].icon | `icon` | | Tab 的图标 |
|
||||
| tabs[x].iconPosition | `left` / `right` | `left` | Tab 的图标位置 |
|
||||
| tabs[x].tab | [SchemaNode](../types/schemanode) | | 内容区 |
|
||||
@ -774,6 +855,7 @@ order: 68
|
||||
| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |
|
||||
| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 |
|
||||
| tabs[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式 |
|
||||
| tabs[x].tip | `string` | | `3.2.0及以上版本支持` Tab 提示，当开启 `showTip` 时生效，作为 Tab 在 hover 时的提示显示，可不配置，如不设置，`tabs[x].title` 作为提示显示 |
|
||||
| tabs[x].closable | `boolean` | false | 是否支持删除，优先级高于组件的 `closable` |
|
||||
| tabs[x].disabled | `boolean` | false | 是否禁用 |
|
||||
| mountOnEnter | `boolean` | false | 只有在点中 tab 的时候才渲染 |
|
||||
@ -784,21 +866,58 @@ order: 68
|
||||
| draggable | `boolean` | false | 是否支持拖拽 |
|
||||
| showTip | `boolean` | false | 是否支持提示 |
|
||||
| showTipClassName | `string` | `'' ` | 提示的类 |
|
||||
| editable | `boolean` | false | 收否可编辑标签名 |
|
||||
| editable | `boolean` | false | 是否可编辑标签名。当 `tabs[x].title` 为 [SchemaNode](../types/schemanode) 时，双击编辑 Tab 的 title 显示空的内容 |
|
||||
| scrollable | `boolean` | true | 是否导航支持内容溢出滚动。（属性废弃） |
|
||||
| sidePosition | `left` / `right` | `left` | `sidebar` 模式下，标签栏位置 |
|
||||
| collapseOnExceed | `number` | | 当 tabs 超出多少个时开始折叠 |
|
||||
| collapseBtnLabel | `string` | `more` | 用来设置折叠按钮的文字 |
|
||||
| swipeable | `boolean` | false | 是否开启手势滑动切换（移动端生效） |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.[事件参数名]}`），详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | ------------------------------------- | ---------------- |
|
||||
| change | `[name]: number \| string` 选项卡索引 | 切换选项卡时触发 |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| -------- | ------------------------------------ | ---------------- |
|
||||
| change | `value: number \| string` 选项卡索引 | 切换选项卡时触发 |
|
||||
|
||||
### change
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "tabs",
|
||||
"mode": "line",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "选项卡1",
|
||||
"body": "选项卡内容1"
|
||||
},
|
||||
{
|
||||
"title": "选项卡2",
|
||||
"body": "选项卡内容2"
|
||||
},
|
||||
{
|
||||
"title": "选项卡3",
|
||||
"body": "选项卡内容3"
|
||||
}
|
||||
],
|
||||
"onEvent": {
|
||||
"change": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "切换至选项卡${event.data.value}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 动作表
|
||||
|
||||
@ -807,3 +926,85 @@ order: 68
|
||||
| 动作名称 | 动作配置 | 说明 |
|
||||
| --------------- | ---------------------------------------- | ---------------- |
|
||||
| changeActiveKey | `activeKey: number \| string` 选项卡索引 | 激活指定的选项卡 |
|
||||
|
||||
### changeActiveKey
|
||||
|
||||
可以尝试点击下方按钮，实现选项卡激活。
|
||||
|
||||
```schema: scope="body"
|
||||
[
|
||||
{
|
||||
"type": "action",
|
||||
"label": "激活选项卡1",
|
||||
"className": "mr-3 mb-3",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "changeActiveKey",
|
||||
"componentId": "tabs-change-receiver",
|
||||
"args": {
|
||||
"activeKey": 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "激活选项卡2",
|
||||
"className": "mr-3 mb-3",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "changeActiveKey",
|
||||
"componentId": "tabs-change-receiver",
|
||||
"args": {
|
||||
"activeKey": 2
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "激活选项卡3",
|
||||
"className": "mr-3 mb-3",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "changeActiveKey",
|
||||
"componentId": "tabs-change-receiver",
|
||||
"args": {
|
||||
"activeKey": 3
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "tabs-change-receiver",
|
||||
"type": "tabs",
|
||||
"mode": "line",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "选项卡1",
|
||||
"body": "选项卡内容1"
|
||||
},
|
||||
{
|
||||
"title": "选项卡2",
|
||||
"body": "选项卡内容2"
|
||||
},
|
||||
{
|
||||
"title": "选项卡3",
|
||||
"body": "选项卡内容3"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
@ -206,11 +206,116 @@ icon:
|
||||
|
||||
> 2.6.1 及以上版本
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | ------------------------------------------------------- | ---------------- |
|
||||
| click | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `点击`时触发 |
|
||||
| mouseenter | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `鼠标移入`时触发 |
|
||||
| mouseleave | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `鼠标移出`时触发 |
|
||||
| close | `{nativeEvent: MouseEvent, label: string}` 鼠标事件对象 | `关闭`时触发 |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | ---------------------------- | ---------------- |
|
||||
| click | `label: string` 鼠标事件对象 | `点击`时触发 |
|
||||
| mouseenter | `label: string` 鼠标事件对象 | `鼠标移入`时触发 |
|
||||
| mouseleave | `label: string` 鼠标事件对象 | `鼠标移出`时触发 |
|
||||
| close | `label: string` 鼠标事件对象 | `关闭`时触发 |
|
||||
|
||||
### click
|
||||
|
||||
鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "tag",
|
||||
"label": "success",
|
||||
"displayMode": "normal",
|
||||
"color": "success",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type} ${event.data.label}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseenter
|
||||
|
||||
鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "tag",
|
||||
"label": "success",
|
||||
"displayMode": "normal",
|
||||
"color": "success",
|
||||
"onEvent": {
|
||||
"mouseenter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type} ${event.data.label}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseleave
|
||||
|
||||
鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "tag",
|
||||
"label": "success",
|
||||
"displayMode": "normal",
|
||||
"color": "success",
|
||||
"onEvent": {
|
||||
"mouseleave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type} ${event.data.label}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### close
|
||||
|
||||
鼠标点击关闭标签。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "tag",
|
||||
"label": "success",
|
||||
"displayMode": "normal",
|
||||
"color": "success",
|
||||
"closable": true,
|
||||
"onEvent": {
|
||||
"close": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "close ${event.context.nativeEvent.label}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -63,10 +63,82 @@ order: 70
|
||||
|
||||
> 2.5.3 及以上版本
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | -------------------------------------- | -------------- |
|
||||
| click | `nativeEvent: MouseEvent` 鼠标事件对象 | 点击时触发 |
|
||||
| mouseenter | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移入时触发 |
|
||||
| mouseleave | `nativeEvent: MouseEvent` 鼠标事件对象 | 鼠标移出时触发 |
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | -------- | -------------- |
|
||||
| click | - | 点击时触发 |
|
||||
| mouseenter | - | 鼠标移入时触发 |
|
||||
| mouseleave | - | 鼠标移出时触发 |
|
||||
|
||||
### click
|
||||
|
||||
鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "Hello",
|
||||
"onEvent": {
|
||||
"click": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseenter
|
||||
|
||||
鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "Hello",
|
||||
"onEvent": {
|
||||
"mouseenter": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### mouseleave
|
||||
|
||||
鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "Hello",
|
||||
"onEvent": {
|
||||
"mouseleave": {
|
||||
"actions": [
|
||||
{
|
||||
"actionType": "toast",
|
||||
"args": {
|
||||
"msgType": "info",
|
||||
"msg": "${event.context.nativeEvent.type}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -55,6 +55,167 @@ order: 73
|
||||
}
|
||||
```
|
||||
|
||||
## 自定义按钮
|
||||
|
||||
可以在每个 `step` 中配置 `actions` 来自定义按钮。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "wizard",
|
||||
"steps": [
|
||||
{
|
||||
"title": "第一步",
|
||||
"body": [
|
||||
{
|
||||
"name": "website",
|
||||
"label": "网址",
|
||||
"type": "input-url"
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"label": "邮箱",
|
||||
"type": "input-email"
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
label: "Next",
|
||||
type: 'button',
|
||||
actionType: 'next'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 2",
|
||||
"body": [
|
||||
{
|
||||
"name": "email2",
|
||||
"label": "邮箱",
|
||||
"type": "input-email"
|
||||
}
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
label: "Prev",
|
||||
type: 'button',
|
||||
actionType: 'prev'
|
||||
},
|
||||
|
||||
{
|
||||
label: "Submit",
|
||||
type: 'button',
|
||||
actionType: 'next'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 3",
|
||||
"body": [
|
||||
"这是最后一步了, 没有按钮"
|
||||
],
|
||||
actions: []
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 初始化到某一步
|
||||
|
||||
`initApi` 接口返回 `step` 字段即可，注意得是数字类型。`1` 表示第一步，`2` 表示第二步，以此类推
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "wizard",
|
||||
"initApi": "/api/mock2/initWizard",
|
||||
"steps": [
|
||||
{
|
||||
"title": "第一步",
|
||||
"body": [
|
||||
{
|
||||
"name": "website",
|
||||
"label": "网址",
|
||||
"type": "input-url",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"label": "邮箱",
|
||||
"type": "input-email",
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 2",
|
||||
"body": [
|
||||
{
|
||||
"name": "email2",
|
||||
"label": "邮箱",
|
||||
"type": "input-email",
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 3",
|
||||
"body": [
|
||||
"这是最后一步了"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 限制跳转
|
||||
|
||||
可以通过在 step 上配置 `jumpableOn` 来限制跳转，可以基于整体 wizard 数据，或者基于 `currentStep` 来判断。
|
||||
|
||||
比如：`"jumpableOn": "${!website}",` 当设置完成了 website 后不可以回去跳转
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "wizard",
|
||||
"initApi": "/api/mock2/initWizard",
|
||||
"steps": [
|
||||
{
|
||||
"title": "第一步",
|
||||
"jumpableOn": "${!website}",
|
||||
"body": [
|
||||
{
|
||||
"name": "website",
|
||||
"label": "网址",
|
||||
"type": "input-url",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"label": "邮箱",
|
||||
"type": "input-email",
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 2",
|
||||
"body": [
|
||||
{
|
||||
"name": "email2",
|
||||
"label": "邮箱",
|
||||
"type": "input-email",
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 3",
|
||||
"body": [
|
||||
"这是最后一步了"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
@ -93,10 +254,12 @@ order: 73
|
||||
| initFetchOn | [表达式](../../docs/concepts/expression) | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 |
|
||||
| body | Array<[FormItem](./form/formItem)> | | 当前步骤的表单项集合，请参考 [FormItem](./form/formItem)。 |
|
||||
| closeDialogOnSubmit | `boolean` | | 提交的时候是否关闭弹窗。当 widzard 里面有且只有一个弹窗的时候，本身提交会触发弹窗关闭，此属性可以关闭此行为 |
|
||||
| jumpableOn | `string` | | 配置是否可跳转的表达式 |
|
||||
| actions | `Array<Schema>` | | 自定义每一步的操作按钮 |
|
||||
|
||||
## 事件表
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.[事件参数名]}`来获取事件产生的数据，详细请查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。
|
||||
|
||||
|
||||
@ -1833,6 +1833,8 @@ ${xxx|filter1|filter2|...}
|
||||
|
||||
amis npm 包里面暴露了 `registerFilter` 方法，通过它可以添加自己的过滤器逻辑。
|
||||
|
||||
> 注意方法名不要出现 - 号，比如 a-b，要改成 a_b
|
||||
|
||||
如：
|
||||
|
||||
```ts
|
||||
@ -1850,12 +1852,12 @@ registerFilter('count', (input: string) =>
|
||||
```ts
|
||||
import {registerFilter} from 'amis';
|
||||
|
||||
registerFilter('my-replace', (input: string, search: string, repalceWith) =>
|
||||
registerFilter('my_replace', (input: string, search: string, repalceWith) =>
|
||||
typeof input === 'string' ? input.replace(search, repalceWith) : input
|
||||
);
|
||||
```
|
||||
|
||||
用法为 `${xxxx|my-replace:aaaa:bbbb}`
|
||||
用法为 `${xxxx|my_replace:aaaa:bbbb}`
|
||||
|
||||
### 在 JS SDK 中自定义过滤器
|
||||
|
||||
|
||||
@ -192,9 +192,31 @@ page
|
||||
|
||||
> **注意：** 当前例子中，对数据域中数据的获取使用的是 **\${xxx}** 模板语法，但是在不同的组件配置项中，获取数据的语法会有差异，我们会在后续的[模板](./template)和[表达式章节](./expression)中一一介绍。
|
||||
|
||||
### 具备数据域的组件
|
||||
|
||||
- App
|
||||
- Page
|
||||
- Cards
|
||||
- Chart
|
||||
- CRUD
|
||||
- CRUD2
|
||||
- Dialog
|
||||
- Drawer
|
||||
- List
|
||||
- Page
|
||||
- PaginationWrapper
|
||||
- Service
|
||||
- Wizard
|
||||
- Combo
|
||||
- InputArray
|
||||
- Table
|
||||
- Table2
|
||||
|
||||
有个特殊情况是 CRUD 中 filter，实际上是个 form，所以 CRUD 中有两层数据域，第一层是 CRUD 本身，同时查询条件表单中也有一层数据域。
|
||||
|
||||
### 常见误解
|
||||
|
||||
需要注意，只有少数几个容器组件会创建新的数据域，除了最顶层的 Page，还有 CRUD、Dialog、IFrame、Form、Service 等。
|
||||
需要注意，只有少数几个容器组件会创建新的数据域，具体查看[具备数据域的组件](#具备数据域的组件)列表。
|
||||
|
||||
常见的错误写法是给容器组件加 data 属性，比如：
|
||||
|
||||
@ -377,6 +399,53 @@ page
|
||||
|
||||
> 具有类似特征的组件还有`Formula`等
|
||||
|
||||
## 更新数据链
|
||||
|
||||
通常顶层数据域数据更新，孩子中具备数据域的组件都会更新，如果不更新会拿不到最新的值。从功能来看这个更新代价其实是很大的，有性能损耗，比如如果我在顶层更新了个变量 `name`，所有的孩子都会重新刷新一遍。
|
||||
目前 amis 中，具备数据域的组件，默认会检测两层节点的数据是否发生变化（上层数据域和上上层数据域），来决定当前层的数据要不要更新。存在两个问题：
|
||||
|
||||
1. 当前组件也许并不关心上层数据是否变化，没必要进行这些刷新操作
|
||||
2. 当前组件关系上上层的数据变化，但是在此拿不到最新的。（比如：放在 service 中的 crud，crud 中 filter 用了 service 的接口返回数据，但是拿不到最新的）
|
||||
|
||||
amis 从 3.2.0 版本开始针对[具备数据域的组件](#具备数据域的组件)新增了 `trackExpression` 属性，用来主动配置当前组件需要关心的上层数据。
|
||||
|
||||
针对以上问题，则可以通过这样配置来解决
|
||||
|
||||
1. `trackExpression` 配置成 `"none"` 也就是说不追踪任何数据。
|
||||
2. `trackExpression` 配置成 `"${xxxVariable}"` 这样 xxxVariable 变化了更新当前组件的数据链。
|
||||
|
||||
关于 `trackExpression` 的语法，请查看表达式篇章，可以监听多个变量比如: `"${xxx1},${xxx2}"`，还可以写表单时如 `"${ xxx ? xxx : yyy}"`。
|
||||
|
||||
amis 内部是通过运算这个表达式的结果来判断。所以表达式中千万不要用随机函数，或者用当前时间等，否则每次都会更新数据链。另外如果变量是数组，或者对象，会转成统一的字符串 `[object Array]` 或者 `[object Object]` 这个其实会影响检测的，所以建议转成 json 字符串如。 `${xxxObject | json}`。还有就是既然是监控上层数据，表达式中不要写当前层数据变量，是取不到的。
|
||||
|
||||
```schema
|
||||
{
|
||||
"data": {
|
||||
"name": "amis"
|
||||
},
|
||||
"type": "page",
|
||||
"body": [
|
||||
{ "label": "请修改输入框", "type": "input-text", "name": "name"},
|
||||
{
|
||||
"type": "switch",
|
||||
"label": "同步更新",
|
||||
"name": "syncSwitch"
|
||||
},
|
||||
{
|
||||
"type": "crud",
|
||||
"filter": {
|
||||
"trackExpression": "${syncSwitch ? name : ''}",
|
||||
"body": [
|
||||
|
||||
|
||||
"my name is ${name}"
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## URL 参数
|
||||
|
||||
url 中的参数会进入顶层数据域，比如下面的例子，可以点击[这里](./datascope-and-datachain?word=myquery#url-参数)看效果。
|
||||
|
||||
@ -1378,11 +1378,11 @@ run action ajax
|
||||
| ----------- | -------- | ------ | --------------------- |
|
||||
| componentId | `string` | - | 指定刷新的目标组件 id |
|
||||
|
||||
### 显示与隐藏
|
||||
### 控制状态
|
||||
|
||||
> 1.8.0 及以上版本
|
||||
|
||||
通过配置`actionType: 'show'`或`'hidden'`实现对指定组件的显示和隐藏，且显隐动作的控制高于组件显隐属性的设置。
|
||||
通过配置`actionType: 'show'`或`'hidden'`或`'enabled'`或`'disabled'`或`'static'`或`'nostatic'`实现对指定组件的显示、隐藏、启用、禁用，仅支持实现了对应状态控制功能的数据`输入类`组件。
|
||||
|
||||
```schema
|
||||
{
|
||||
@ -1390,15 +1390,15 @@ run action ajax
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '显示',
|
||||
label: '显示表单',
|
||||
level: 'primary',
|
||||
className: 'mr-2',
|
||||
className: 'mr-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'show',
|
||||
componentId: 'input-text_001'
|
||||
componentId: 'form_disable'
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1406,51 +1406,24 @@ run action ajax
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '隐藏',
|
||||
label: '隐藏表单',
|
||||
level: 'primary',
|
||||
className: 'mr-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'hidden',
|
||||
componentId: 'input-text_001'
|
||||
componentId: 'form_disable'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
label: '愿望',
|
||||
className: 'mt-2',
|
||||
id: 'input-text_001',
|
||||
mode: 'horizontal',
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**其他属性**
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | -------- | ------ | --------------------------- |
|
||||
| componentId | `string` | - | 指定显示或隐藏的目标组件 id |
|
||||
|
||||
### 控制状态
|
||||
|
||||
> 1.8.0 及以上版本
|
||||
|
||||
通过配置`actionType: 'enabled'`或`actionType: 'disabled'`实现对指定组件的启用和禁用，仅支持实现了状态控制功能的数据`输入类`组件。
|
||||
|
||||
```schema
|
||||
{
|
||||
type: 'page',
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
id: 'b_dis',
|
||||
label: '禁用',
|
||||
label: '禁用表单',
|
||||
level: 'primary',
|
||||
className: 'mr-2 mb-2',
|
||||
disabled: true,
|
||||
@ -1467,9 +1440,9 @@ run action ajax
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '启用',
|
||||
label: '启用表单',
|
||||
level: 'primary',
|
||||
className: 'mb-2',
|
||||
className: 'mr-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
@ -1481,23 +1454,57 @@ run action ajax
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '静态展示表单',
|
||||
level: 'primary',
|
||||
className: 'mr-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'static',
|
||||
componentId: 'form_disable'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
label: '非静态展示表单',
|
||||
level: 'primary',
|
||||
className: 'mr-2 mb-2',
|
||||
onEvent: {
|
||||
click: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'nonstatic',
|
||||
componentId: 'form_disable'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'form',
|
||||
id: 'form_disable',
|
||||
title: '表单',
|
||||
body: [
|
||||
{
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"label": "输入框",
|
||||
"mode": "horizontal",
|
||||
"value": "text"
|
||||
},
|
||||
{
|
||||
type: 'group',
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ml-2',
|
||||
label: '我的状态变了'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ml-2',
|
||||
label: '禁用上面的按钮',
|
||||
label: '禁用【禁用】',
|
||||
level: 'primary',
|
||||
onEvent: {
|
||||
click: {
|
||||
@ -1513,7 +1520,7 @@ run action ajax
|
||||
{
|
||||
type: 'button',
|
||||
className: 'ml-2',
|
||||
label: '启用用上面的按钮',
|
||||
label: '启用【禁用】',
|
||||
level: 'primary',
|
||||
onEvent: {
|
||||
click: {
|
||||
@ -1536,9 +1543,9 @@ run action ajax
|
||||
|
||||
**其他属性**
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | -------- | ------ | --------------------------- |
|
||||
| componentId | `string` | - | 指定启用或禁用的目标组件 id |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | -------- | ------ | ------------------------------------ |
|
||||
| componentId | `string` | - | 指定启用/禁用/显示/隐藏的目标组件 id |
|
||||
|
||||
### 更新数据
|
||||
|
||||
@ -1625,9 +1632,11 @@ run action ajax
|
||||
|
||||
**其他属性**
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | -------- | ------ | --------------------- |
|
||||
| componentId | `string` | - | 指定赋值的目标组件 id |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------------------- | -------- | ------ | ----------------------------- |
|
||||
| componentId 或 componentName | `string` | - | 指定赋值的目标组件 id 或 name |
|
||||
|
||||
> 备注：componentId 是全局定位指定的组件，而 componentName 是就近按照层级向上查找。
|
||||
|
||||
### 自定义 JS
|
||||
|
||||
@ -1637,6 +1646,8 @@ run action ajax
|
||||
- doAction() 动作执行方法，用于调用任何 actionType 指定的动作
|
||||
- event，事件对象，可以调用 setData()、stopPropagation()、preventDefault()分别实现事件上下文设置、动作干预、事件干预，可以通过 event.data 获取事件上下文
|
||||
|
||||
自定义函数签名： `script:(context,doAction,event)=>{}`
|
||||
|
||||
```schema
|
||||
{
|
||||
type: 'page',
|
||||
|
||||
@ -111,6 +111,8 @@ amis.embed(
|
||||
|
||||
可以通过 props 里的 data 属性来赋予 amis 顶层数据域的值，类似下面的例子。
|
||||
|
||||
> 3.1.0 开始可以传入 context 数据，无论哪层都可以使用到这个里面的数据。适合用来传递一些平台数据。
|
||||
|
||||
```js
|
||||
let amis = amisRequire('amis/embed');
|
||||
let amisJSON = {
|
||||
@ -123,6 +125,12 @@ let amisJSON = {
|
||||
let amisScoped = amis.embed('#root', amisJSON, {
|
||||
data: {
|
||||
myData: 'amis'
|
||||
},
|
||||
context: {
|
||||
amisUser: {
|
||||
id: 1,
|
||||
name: 'test user'
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
@ -228,6 +236,34 @@ amisScoped.updateProps(
|
||||
);
|
||||
```
|
||||
|
||||
### 更新配置
|
||||
|
||||
可以通过 amisScoped 对象的 udpateSchema 方法来更新更新内容配置。
|
||||
|
||||
```js
|
||||
let amisJSON = {
|
||||
type: 'page',
|
||||
body: [
|
||||
'inital string',
|
||||
|
||||
{
|
||||
type: 'button',
|
||||
label: 'Change',
|
||||
onClick: handleChange
|
||||
}
|
||||
]
|
||||
};
|
||||
let amisScoped = amis.embed('#root', amisJSON);
|
||||
|
||||
function handleChange() {
|
||||
const schema = {
|
||||
...amisJSON,
|
||||
body: ['changed']
|
||||
};
|
||||
amisScoped.updateSchema(schema);
|
||||
}
|
||||
```
|
||||
|
||||
### 多页模式
|
||||
|
||||
默认 amis 渲染是单页模式，如果想实现多页应用，请使用 [app 渲染器](../../components/app)。
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
import APPSchema from './app';
|
||||
import {createHashHistory} from 'history';
|
||||
import {embed} from '../embed';
|
||||
import {match} from 'path-to-regexp';
|
||||
|
||||
const history = createHashHistory({});
|
||||
|
||||
@ -127,7 +128,13 @@ export function bootstrap(mountTo) {
|
||||
mountTo,
|
||||
APPSchema,
|
||||
{
|
||||
location: history.location
|
||||
location: history.location,
|
||||
context: {
|
||||
amisUser: {
|
||||
id: 1,
|
||||
name: 'AMIS User'
|
||||
}
|
||||
}
|
||||
},
|
||||
APPENV
|
||||
);
|
||||
|
||||
@ -4,6 +4,9 @@ export default {
|
||||
type: 'crud',
|
||||
headerToolbar: ['export-excel', 'export-csv'],
|
||||
data: {
|
||||
mapping_type: {
|
||||
'*': '其他'
|
||||
},
|
||||
items: [
|
||||
{
|
||||
link: 'https://www.microsoft.com/',
|
||||
@ -188,6 +191,12 @@ export default {
|
||||
D: '极差'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'grade',
|
||||
label: 'CSS grade',
|
||||
type: 'mapping',
|
||||
source: '${mapping_type}'
|
||||
},
|
||||
{
|
||||
name: 'date',
|
||||
label: 'Date',
|
||||
|
||||
@ -229,6 +229,13 @@ export const components = [
|
||||
import('../../docs/zh-CN/components/form/formitem.md').then(wrapDoc)
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Control 表单项包裹',
|
||||
path: '/zh-CN/components/form/control',
|
||||
component: React.lazy(() =>
|
||||
import('../../docs/zh-CN/components/form/control.md').then(wrapDoc)
|
||||
)
|
||||
},
|
||||
{
|
||||
label: 'Options 选择器表单项',
|
||||
path: '/zh-CN/components/form/options',
|
||||
@ -557,6 +564,15 @@ export const components = [
|
||||
).then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
{
|
||||
label: 'Radio 单选框',
|
||||
path: '/zh-CN/components/form/radio',
|
||||
component: React.lazy(() =>
|
||||
import('../../docs/zh-CN/components/form/radio.md').then(wrapDoc)
|
||||
)
|
||||
},
|
||||
|
||||
{
|
||||
label: 'Radios 单选框',
|
||||
path: '/zh-CN/components/form/radios',
|
||||
|
||||
@ -255,6 +255,13 @@ export default function (schema, schemaProps, showCode, envOverrides) {
|
||||
schema,
|
||||
{
|
||||
...(isPlainObject(schemaProps) ? schemaProps : {}),
|
||||
context: {
|
||||
// 上下文信息，无论那层可以获取到这个
|
||||
amisUser: {
|
||||
id: 1,
|
||||
name: 'AMIS User'
|
||||
}
|
||||
},
|
||||
location,
|
||||
theme,
|
||||
locale
|
||||
|
||||
@ -251,6 +251,7 @@ export function embed(
|
||||
},
|
||||
richTextToken: '',
|
||||
affixOffsetBottom: 0,
|
||||
customStyleClassPrefix: '.amis-scope',
|
||||
...env
|
||||
};
|
||||
|
||||
@ -294,6 +295,10 @@ export function embed(
|
||||
updateProps: (props: any, callback?: () => void) => {
|
||||
root.render(createElements(props));
|
||||
},
|
||||
updateSchema: (newSchema: any, props = {}) => {
|
||||
schema = newSchema;
|
||||
root.render(createElements(props));
|
||||
},
|
||||
unmount: () => {
|
||||
root.unmount();
|
||||
}
|
||||
|
||||
@ -18,10 +18,3 @@ import 'core-js/es/symbol';
|
||||
import './cloest';
|
||||
// @ts-ignore
|
||||
import './classList';
|
||||
|
||||
// ios 没有这个会报错
|
||||
if (!('DragEvent' in window)) {
|
||||
Object.defineProperty(window, 'DragEvent', {
|
||||
value: class DragEvent {}
|
||||
});
|
||||
}
|
||||
|
||||
10
fis-conf.js
10
fis-conf.js
@ -227,7 +227,7 @@ fis.match('*.html:jsx', {
|
||||
|
||||
// 这些用了 esm
|
||||
fis.match(
|
||||
'{echarts/extension/**.js,zrender/**.js,markdown-it-html5-media/**.js,react-hook-form/**.js,qrcode.react/**.js,axios/**.js}',
|
||||
'{echarts/**.js,zrender/**.js,echarts-wordcloud/**.js,markdown-it-html5-media/**.js,react-hook-form/**.js,qrcode.react/**.js,axios/**.js}',
|
||||
{
|
||||
parser: fis.plugin('typescript', {
|
||||
sourceMap: false,
|
||||
@ -464,6 +464,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
|
||||
'!zrender/**',
|
||||
'!echarts/**',
|
||||
'!echarts-stat/**',
|
||||
'!echarts-wordcloud/**',
|
||||
'!papaparse/**',
|
||||
'!exceljs/**',
|
||||
'!xlsx/**',
|
||||
@ -533,7 +534,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
|
||||
|
||||
'barcode.js': ['src/components/BarCode.tsx', 'jsbarcode/**'],
|
||||
|
||||
'charts.js': ['zrender/**', 'echarts/**', 'echarts-stat/**'],
|
||||
'charts.js': ['zrender/**', 'echarts/**', 'echarts-stat/**', 'echarts-wordcloud/**'],
|
||||
|
||||
'ooxml-viewer.js': ['ooxml-viewer/**', 'fflate/**'],
|
||||
|
||||
@ -548,6 +549,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
|
||||
'!amis-ui/lib/components/RichText.js',
|
||||
'!zrender/**',
|
||||
'!echarts/**',
|
||||
'!echarts-wordcloud/**',
|
||||
'!papaparse/**',
|
||||
'!exceljs/**',
|
||||
'!xlsx/**',
|
||||
@ -760,6 +762,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
|
||||
'!zrender/**',
|
||||
'!echarts/**',
|
||||
'!echarts-stat/**',
|
||||
'!echarts-wordcloud/**',
|
||||
'!papaparse/**',
|
||||
'!exceljs/**',
|
||||
'!xlsx/**',
|
||||
@ -835,7 +838,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
|
||||
|
||||
'pkg/cropperjs.js': ['cropperjs/**', 'react-cropper/**'],
|
||||
|
||||
'pkg/charts.js': ['zrender/**', 'echarts/**', 'echarts-stat/**'],
|
||||
'pkg/charts.js': ['zrender/**', 'echarts/**', 'echarts-stat/**', 'echarts-wordcloud/**'],
|
||||
|
||||
'pkg/api-mock.js': ['mock/*.ts'],
|
||||
|
||||
@ -862,6 +865,7 @@ if (fis.project.currentMedia() === 'publish-sdk') {
|
||||
'!amis-ui/lib/components/RichText.tsx',
|
||||
'!zrender/**',
|
||||
'!echarts/**',
|
||||
'!echarts-wordcloud/**',
|
||||
'!papaparse/**',
|
||||
'!exceljs/**',
|
||||
'!xlsx/**',
|
||||
|
||||
27
index.html
27
index.html
@ -7,27 +7,27 @@
|
||||
<link
|
||||
type="image/x-icon"
|
||||
rel="shortcut icon"
|
||||
href="./examples/static/favicon.png"
|
||||
href="/examples/static/favicon.png"
|
||||
/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
|
||||
<link rel="stylesheet" href="./examples/static/iconfont.css" />
|
||||
<link rel="stylesheet" href="./examples/static/officefont.css" />
|
||||
<link rel="stylesheet" href="/examples/static/iconfont.css" />
|
||||
<link rel="stylesheet" href="/examples/static/officefont.css" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="./node_modules/@fortawesome/fontawesome-free/css/all.css"
|
||||
href="/node_modules/@fortawesome/fontawesome-free/css/all.css"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="./node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
|
||||
href="/node_modules/@fortawesome/fontawesome-free/css/v4-shims.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="./node_modules/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="./examples/doc.css" />
|
||||
<link rel="stylesheet" href="/node_modules/prismjs/themes/prism.css" />
|
||||
<link rel="stylesheet" href="/examples/doc.css" />
|
||||
|
||||
<link rel="stylesheet" href="./examples/style.scss" />
|
||||
<link rel="stylesheet" href="/examples/style.scss" />
|
||||
<style>
|
||||
.app-wrapper,
|
||||
.schema-wrapper {
|
||||
@ -56,8 +56,17 @@
|
||||
);
|
||||
document.head.appendChild(link);
|
||||
});
|
||||
|
||||
// helper 放在末尾提高优先级
|
||||
const helper = document.createElement('link');
|
||||
helper.setAttribute('rel', 'stylesheet');
|
||||
helper.setAttribute(
|
||||
'href',
|
||||
new URL(`./packages/amis-ui/scss/helper.scss`, import.meta.url).href
|
||||
);
|
||||
document.head.appendChild(helper);
|
||||
</script>
|
||||
<link rel="stylesheet" href="./packages/amis-ui/scss/helper.scss" />
|
||||
<!-- <link rel="stylesheet" href="./packages/amis-ui/scss/helper.scss" /> -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -5,5 +5,5 @@
|
||||
"packages/amis-ui",
|
||||
"packages/amis"
|
||||
],
|
||||
"version": "3.0.0"
|
||||
"version": "3.1.1"
|
||||
}
|
||||
|
||||
44
mock/cfc/mock/condition-fields/chained.json
Normal file
44
mock/cfc/mock/condition-fields/chained.json
Normal file
@ -0,0 +1,44 @@
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"fields": [
|
||||
{
|
||||
"label": "文本",
|
||||
"type": "text",
|
||||
"name": "text"
|
||||
},
|
||||
{
|
||||
"label": "数字",
|
||||
"type": "number",
|
||||
"name": "number"
|
||||
},
|
||||
{
|
||||
"label": "布尔",
|
||||
"type": "boolean",
|
||||
"name": "boolean"
|
||||
},
|
||||
{
|
||||
"label": "日期",
|
||||
"name": "date",
|
||||
"children": [
|
||||
{
|
||||
"label": "日期1",
|
||||
"type": "date",
|
||||
"name": "date1"
|
||||
},
|
||||
{
|
||||
"label": "时间2",
|
||||
"type": "time",
|
||||
"name": "time2"
|
||||
},
|
||||
{
|
||||
"label": "日期时间3",
|
||||
"type": "datetime",
|
||||
"name": "datetime"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
9
mock/cfc/mock/initWizard.json
Normal file
9
mock/cfc/mock/initWizard.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"status": 0,
|
||||
"data": {
|
||||
"email": "xxxx@baidu.com",
|
||||
"website": "http://www.baidu.com",
|
||||
"email2": "yyyy@baidu.com",
|
||||
"step": 2
|
||||
}
|
||||
}
|
||||
8
mock/cfc/mock/table/addFail.json
Normal file
8
mock/cfc/mock/table/addFail.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"status": 422,
|
||||
"msg": "",
|
||||
"errors": {
|
||||
"test2": "服务器端说，新增错误。"
|
||||
},
|
||||
"data": null
|
||||
}
|
||||
4
mock/cfc/mock/table/addSuccess.json
Normal file
4
mock/cfc/mock/table/addSuccess.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "新增成功"
|
||||
}
|
||||
8
mock/cfc/mock/table/deleteFail.json
Normal file
8
mock/cfc/mock/table/deleteFail.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"status": 422,
|
||||
"msg": "",
|
||||
"errors": {
|
||||
"test2": "服务器端说，删除错误。"
|
||||
},
|
||||
"data": null
|
||||
}
|
||||
4
mock/cfc/mock/table/deleteSuccess.json
Normal file
4
mock/cfc/mock/table/deleteSuccess.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "删除成功"
|
||||
}
|
||||
8
mock/cfc/mock/table/editFail.json
Normal file
8
mock/cfc/mock/table/editFail.json
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"status": 422,
|
||||
"msg": "",
|
||||
"errors": {
|
||||
"test2": "服务器端说，编辑有错误。"
|
||||
},
|
||||
"data": null
|
||||
}
|
||||
4
mock/cfc/mock/table/editSuccess.json
Normal file
4
mock/cfc/mock/table/editSuccess.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "编辑成功"
|
||||
}
|
||||
@ -73,7 +73,7 @@
|
||||
"jest": "^29.0.3",
|
||||
"jest-environment-jsdom": "^29.0.3",
|
||||
"js-yaml": "^4.1.0",
|
||||
"lerna": "^5.5.2",
|
||||
"lerna": "^6.6.2",
|
||||
"magic-string": "^0.26.7",
|
||||
"marked": "^4.2.1",
|
||||
"monaco-editor": "0.30.1",
|
||||
@ -86,7 +86,7 @@
|
||||
"rollup-pluginutils": "^2.8.2",
|
||||
"setprototypeof": "^1.2.0",
|
||||
"ts-jest": "^29.0.2",
|
||||
"vite": "^4.3.1",
|
||||
"vite": "^4.3.9",
|
||||
"vite-plugin-monaco-editor": "^1.1.0",
|
||||
"vite-plugin-svgr": "^2.2.2",
|
||||
"zrender": "^5.3.2"
|
||||
@ -94,6 +94,11 @@
|
||||
"jest": {
|
||||
"verbose": true,
|
||||
"testEnvironment": "jsdom",
|
||||
"collectCoverage": true,
|
||||
"coverageReporters": [
|
||||
"text",
|
||||
"cobertura"
|
||||
],
|
||||
"collectCoverageFrom": [
|
||||
"packages/*/src/**/*"
|
||||
],
|
||||
|
||||
403
packages/amis-core/__tests__/async-filter.test.ts
Normal file
403
packages/amis-core/__tests__/async-filter.test.ts
Normal file
@ -0,0 +1,403 @@
|
||||
import {resolveVariableAndFilterForAsync} from '../src/utils/tpl-builtin';
|
||||
import {evaluateForAsync} from 'amis-formula';
|
||||
|
||||
test(`filter:map`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a | map: toInt}', {
|
||||
a: ['123', '3434']
|
||||
})
|
||||
).toMatchObject([123, 3434]);
|
||||
});
|
||||
test(`filter:html`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a}', {
|
||||
a: '<html>'
|
||||
})
|
||||
).toEqual('<html>');
|
||||
});
|
||||
|
||||
test(`filter:complex`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${`${a}`}', {
|
||||
a: '<html>'
|
||||
})
|
||||
).toEqual('<html>');
|
||||
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a ? a : a}', {
|
||||
a: '<html>'
|
||||
})
|
||||
).toEqual('<html>');
|
||||
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${b.a}', {
|
||||
a: '<html>',
|
||||
b: {
|
||||
a: '<br />'
|
||||
}
|
||||
})
|
||||
).toEqual('<br />');
|
||||
});
|
||||
|
||||
test(`filter:json`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a | json : 0}', {
|
||||
a: {a: 1}
|
||||
})
|
||||
).toEqual('{"a":1}');
|
||||
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a | json : 2}', {
|
||||
a: {a: 1}
|
||||
})
|
||||
).toEqual('{\n "a": 1\n}');
|
||||
});
|
||||
|
||||
test(`filter:toJson`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|toJson}', {
|
||||
a: '{"a":1}'
|
||||
})
|
||||
).toMatchObject({a: 1});
|
||||
});
|
||||
|
||||
test(`filter:toInt`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|toInt}', {
|
||||
a: '233'
|
||||
})
|
||||
).toBe(233);
|
||||
});
|
||||
|
||||
test(`filter:toFloat`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|toFloat}', {
|
||||
a: '233.233'
|
||||
})
|
||||
).toBe(233.233);
|
||||
});
|
||||
|
||||
test(`filter:toDate`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|toDate:x|date: YYYY-MM-DD}', {
|
||||
a: 1638028267226
|
||||
})
|
||||
).toBe('2021-11-27');
|
||||
});
|
||||
|
||||
test(`filter:fromNow`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|toDate:x|fromNow}', {
|
||||
a: Date.now() - 2 * 60 * 1000
|
||||
})
|
||||
).toBe('2 minutes ago');
|
||||
});
|
||||
|
||||
test(`filter:dateModify`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync(
|
||||
'${a|toDate:x|dateModify:subtract:2:m|fromNow}',
|
||||
{
|
||||
a: Date.now()
|
||||
}
|
||||
)
|
||||
).toBe('2 minutes ago');
|
||||
});
|
||||
|
||||
test(`filter:number`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|number}', {
|
||||
a: 1234
|
||||
})
|
||||
).toBe('1,234');
|
||||
});
|
||||
|
||||
test(`filter:trim`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|trim}', {
|
||||
a: ' ab '
|
||||
})
|
||||
).toBe('ab');
|
||||
});
|
||||
|
||||
test(`filter:duration`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|duration}', {
|
||||
a: 234343
|
||||
})
|
||||
).toBe('2天17时5分43秒');
|
||||
});
|
||||
|
||||
test(`filter:bytes`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|bytes}', {
|
||||
a: 234343
|
||||
})
|
||||
).toBe('234 KB');
|
||||
});
|
||||
|
||||
test(`filter:bytes:step`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|bytes:1024}', {
|
||||
a: 234343
|
||||
})
|
||||
).toBe('229 KB');
|
||||
});
|
||||
|
||||
test(`filter:round`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|round}', {
|
||||
a: 23.234
|
||||
})
|
||||
).toBe('23.23');
|
||||
});
|
||||
|
||||
test(`filter:truncate`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|truncate:5}', {
|
||||
a: 'abcdefghijklmnopqrst'
|
||||
})
|
||||
).toBe('abcde...');
|
||||
});
|
||||
|
||||
test(`filter:url_encode`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|url_encode}', {
|
||||
a: '='
|
||||
})
|
||||
).toBe('%3D');
|
||||
});
|
||||
|
||||
describe('filter:url_decode', () => {
|
||||
test(`filter:url_decode:normal`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|url_decode}', {
|
||||
a: '%3D'
|
||||
})
|
||||
).toBe('=');
|
||||
});
|
||||
|
||||
test(`filter:url_decode:error`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|url_decode}', {
|
||||
a: '%'
|
||||
})
|
||||
).toBe(undefined);
|
||||
});
|
||||
});
|
||||
|
||||
test(`filter:default`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|default:-}', {
|
||||
a: ''
|
||||
})
|
||||
).toBe('-');
|
||||
});
|
||||
|
||||
test(`filter:join`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|join:-}', {
|
||||
a: [1, 2, 3]
|
||||
})
|
||||
).toBe('1-2-3');
|
||||
});
|
||||
|
||||
test(`filter:split`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|split:-}', {
|
||||
a: '1-2-3'
|
||||
})
|
||||
).toMatchObject(['1', '2', '3']);
|
||||
});
|
||||
|
||||
test(`filter:sortBy`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|sortBy:&|join}', {
|
||||
a: ['b', 'c', 'a']
|
||||
})
|
||||
).toBe('a,b,c');
|
||||
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|sortBy:&:numerical|join}', {
|
||||
a: ['023', '20', '44']
|
||||
})
|
||||
).toBe('20,023,44');
|
||||
});
|
||||
|
||||
test(`filter:objectToArray`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|objectToArray}', {
|
||||
a: {
|
||||
a: 1,
|
||||
b: 2,
|
||||
done: 'Done'
|
||||
}
|
||||
})
|
||||
).toMatchObject([
|
||||
{
|
||||
value: 'a',
|
||||
label: 1
|
||||
},
|
||||
{
|
||||
value: 'b',
|
||||
label: 2
|
||||
},
|
||||
{
|
||||
value: 'done',
|
||||
label: 'Done'
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
test(`filter:substring`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|substring:0:2}', {
|
||||
a: 'abcdefg'
|
||||
})
|
||||
).toBe('ab');
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a|substring:1:3}', {
|
||||
a: 'abcdefg'
|
||||
})
|
||||
).toBe('bc');
|
||||
});
|
||||
|
||||
test(`filter:variableInVariable`, async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${a}', {
|
||||
a: 'abc$0defg'
|
||||
})
|
||||
).toBe('abc$0defg');
|
||||
});
|
||||
|
||||
test('filter:isMatch', async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync(
|
||||
'${status | isMatch:2:1|isMatch:5:1:4}',
|
||||
{
|
||||
status: 2
|
||||
}
|
||||
)
|
||||
).toBe(1);
|
||||
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync(
|
||||
'${status | isMatch:2:1|isMatch:5:1:4}',
|
||||
{
|
||||
status: 1
|
||||
}
|
||||
)
|
||||
).toBe(4);
|
||||
});
|
||||
|
||||
test('filter:filter:isMatch', async () => {
|
||||
expect(
|
||||
await resolveVariableAndFilterForAsync('${items|filter:text:match:"ab"}', {
|
||||
items: [
|
||||
{
|
||||
text: 'abc'
|
||||
},
|
||||
{
|
||||
text: 'bcd'
|
||||
},
|
||||
{
|
||||
text: 'cde'
|
||||
}
|
||||
]
|
||||
})
|
||||
).toMatchObject([
|
||||
{
|
||||
text: 'abc'
|
||||
}
|
||||
]);
|
||||
});
|
||||
|
||||
test('evalute:conditional', async () => {
|
||||
expect(
|
||||
await evaluateForAsync(
|
||||
'${a | isTrue: true : false}',
|
||||
{
|
||||
a: 4
|
||||
},
|
||||
{
|
||||
defaultFilter: 'raw'
|
||||
}
|
||||
)
|
||||
).toBe(true);
|
||||
|
||||
expect(
|
||||
await evaluateForAsync(
|
||||
'${a | isTrue: b : false}',
|
||||
{
|
||||
a: 4,
|
||||
b: 5
|
||||
},
|
||||
{
|
||||
defaultFilter: 'raw'
|
||||
}
|
||||
)
|
||||
).toBe(5);
|
||||
|
||||
expect(
|
||||
await evaluateForAsync(
|
||||
'${a | isTrue: b : false}',
|
||||
{
|
||||
a: null,
|
||||
b: 5
|
||||
},
|
||||
{
|
||||
defaultFilter: 'raw'
|
||||
}
|
||||
)
|
||||
).toBe(false);
|
||||
|
||||
expect(
|
||||
await evaluateForAsync(
|
||||
'${a | isTrue : trueValue : falseValue}',
|
||||
{
|
||||
a: true,
|
||||
trueValue: 5,
|
||||
falseValue: 10
|
||||
},
|
||||
{
|
||||
defaultFilter: 'raw'
|
||||
}
|
||||
)
|
||||
).toBe(5);
|
||||
|
||||
expect(
|
||||
await evaluateForAsync(
|
||||
'${a | isEquals: 1 : "1" |isEquals: 2 : "2" | isEquals: 3 : "3" }',
|
||||
{
|
||||
a: 3
|
||||
},
|
||||
{
|
||||
defaultFilter: 'raw'
|
||||
}
|
||||
)
|
||||
).toBe('3');
|
||||
|
||||
expect(
|
||||
await evaluateForAsync(
|
||||
'${a | isEquals: 1 : "1" |isEquals: 1 : "2" | isEquals: 1 : "3" }',
|
||||
{
|
||||
a: 1
|
||||
},
|
||||
{
|
||||
defaultFilter: 'raw'
|
||||
}
|
||||
)
|
||||
).toBe('1');
|
||||
|
||||
expect(
|
||||
await evaluateForAsync(
|
||||
'${a | isEquals: 1 : "1" : "12" |isEquals: 2 : "2" | isEquals: 3 : "3" }',
|
||||
{
|
||||
a: 2
|
||||
},
|
||||
{
|
||||
defaultFilter: 'raw'
|
||||
}
|
||||
)
|
||||
).toBe('12');
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user