mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
修复路径
This commit is contained in:
rickcole
parent
3ef1681252
commit
ceee677c65
@ -1,470 +0,0 @@
|
||||
---
|
||||
title: Action 行为按钮
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Action 行为按钮
|
||||
icon:
|
||||
order: 26
|
||||
---
|
||||
Action 行为按钮，是触发页面行为的主要方法之一
|
||||
|
||||
## 基本用法
|
||||
|
||||
我们这里简单实现一个点击按钮弹框的交互。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "弹框",
|
||||
"type": "action",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "这是个简单的弹框。"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 样式
|
||||
|
||||
### 尺寸
|
||||
|
||||
配置`size`，显示不同尺寸
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "action",
|
||||
"label": "默认尺寸"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "极小",
|
||||
"size": "xs"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "小",
|
||||
"size": "sm"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "中等",
|
||||
"size": "md"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "大",
|
||||
"size": "lg"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 主题
|
||||
|
||||
可以配置`level`或者`primary`，显示不同样式。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "action",
|
||||
"label": "默认"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "主要",
|
||||
"level": "primary"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "次要",
|
||||
"level": "secondary"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "成功",
|
||||
"level": "success"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "警告",
|
||||
"level": "warning"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "危险",
|
||||
"level": "danger"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "浅色",
|
||||
"level": "light"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "深色",
|
||||
"level": "dark"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "链接",
|
||||
"level": "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 图标
|
||||
|
||||
可以配置`icon`配置项，实现按钮显示图标
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "弹框",
|
||||
"type": "action",
|
||||
"actionType": "dialog",
|
||||
"icon": "fa fa-plus",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "这是个简单的弹框。"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果`label`配置为空字符串，可以只显示`icon`
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "",
|
||||
"type": "action",
|
||||
"actionType": "dialog",
|
||||
"icon": "fa fa-plus",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "这是个简单的弹框。"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 操作前确认
|
||||
|
||||
可以通过配置`confirmText`，实现在任意操作前，弹出提示框确认是否进行该操作。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "ajax请求",
|
||||
"type": "button",
|
||||
"actionType": "ajax",
|
||||
"confirmText": "确认要发出这个请求？",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm"
|
||||
}
|
||||
```
|
||||
|
||||
## ajax 请求
|
||||
|
||||
通过配置`"actionType":"ajax"`和`api`，可以实现 ajax 请求。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "ajax请求",
|
||||
"type": "button",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm"
|
||||
}
|
||||
```
|
||||
|
||||
### 请求成功后，跳转至某个页面
|
||||
|
||||
##### 配置相对路径，实现单页跳转
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "ajax请求",
|
||||
"type": "button",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"redirect": "./getting-started"
|
||||
}
|
||||
```
|
||||
|
||||
##### 配置完整路径，直接跳转指定路径
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "ajax请求",
|
||||
"type": "button",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"redirect": "https://www.baidu.com/"
|
||||
}
|
||||
```
|
||||
|
||||
### 请求成功后，显示反馈弹框
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "ajax 反馈弹框",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"feedback": {
|
||||
"title": "操作成功",
|
||||
"body": "xxx 已操作成功"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
更多内容查看[Dialog文档](./dialog#feedback-%E5%8F%8D%E9%A6%88%E5%BC%B9%E6%A1%86)
|
||||
|
||||
### 自定义 toast 文字
|
||||
|
||||
可以通过配置`messages`，自定义接口返回`toast`信息
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "ajax 请求",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"messages": {
|
||||
"success": "成功了！欧耶",
|
||||
"failed": "失败了呢。。"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------- | ---------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| api | [Api](./types-api) | - | 请求地址，参考 [api](./Types.md#api) 格式说明。 |
|
||||
| redirect | [模板字符串](./template#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2) | - | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。 |
|
||||
| feedback | `DialogObject` | - | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考[Dialog](./Dialog.md) |
|
||||
| messages | `object` | - | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。 |
|
||||
|
||||
## 跳转链接
|
||||
|
||||
### 单页跳转
|
||||
|
||||
```schema:height="100"
|
||||
{
|
||||
"body": {
|
||||
"label": "进入简介页面",
|
||||
"type": "button",
|
||||
"level": "info",
|
||||
"actionType": "link",
|
||||
"link": "/docs/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `link` | 单页跳转 |
|
||||
| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值。 |
|
||||
|
||||
|
||||
### 直接跳转
|
||||
|
||||
```schema:height="100"
|
||||
{
|
||||
"body": {
|
||||
"label": "打开 Baidu",
|
||||
"type": "button",
|
||||
"level": "success",
|
||||
"actionType": "url",
|
||||
"url": "raw:http://www.baidu.com"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | --------- | ------- | ------------------------------------------------ |
|
||||
| actionType | `string` | `url` | 页面跳转 |
|
||||
| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值。 |
|
||||
| blank | `boolean` | `false` | 如果为 `true` 将在新tab页面打开。 |
|
||||
|
||||
|
||||
`注意：由于 amis 平台内 http 地址会被替换成 proxy 地址，所以在 amis 平台内使用请加上 raw: 作为前缀。 比如：raw:http://www.baidu.com`
|
||||
|
||||
## 弹框
|
||||
|
||||
```schema:height="100"
|
||||
{
|
||||
"body": {
|
||||
"label": "Dialog Form",
|
||||
"type": "button",
|
||||
"level": "primary",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "表单设置",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | -------------------------- | -------- | --------------------------------------------- |
|
||||
| actionType | `string` | `dialog` | 点击后显示一个弹出框 |
|
||||
| dialog | `string` 或 `DialogObject` | - | 指定弹框内容，格式可参考[Dialog](./dialog) |
|
||||
| nextCondition | `boolean` | - | 可以用来设置下一条数据的条件，默认为 `true`。 |
|
||||
|
||||
|
||||
## 抽屉
|
||||
|
||||
```schema:height="100"
|
||||
{
|
||||
"body": {
|
||||
"label": "Drawer Form",
|
||||
"type": "button",
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "表单设置",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------------------------- | -------- | ------------------------------------------ |
|
||||
| actionType | `string` | `drawer` | 点击后显示一个侧边栏 |
|
||||
| drawer | `string` 或 `DrawerObject` | - | 指定弹框内容，格式可参考[Drawer](./drawer) |
|
||||
|
||||
## 复制文本
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "复制一段文本",
|
||||
"type": "button",
|
||||
"actionType": "copy",
|
||||
"content": "raw:http://www.baidu.com"
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | ------------------ | ------ | ------------------------------------ |
|
||||
| actionType | `string` | `copy` | 复制一段内容到粘贴板 |
|
||||
| content | [模板](./template) | - | 指定复制的内容。可用 `${xxx}` 取值。 |
|
||||
|
||||
## 刷新其他组件
|
||||
|
||||
### 基本使用
|
||||
|
||||
xxx
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | -------- | --------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `reload` | 刷新目标组件 |
|
||||
| target | `string` | - | 需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
|
||||
## 组件特有的行为类型
|
||||
|
||||
### 表单中表格添加一行
|
||||
|
||||
该actionType为[FormItem-Table](./formitem/table)专用行为
|
||||
|
||||
### 重置表单
|
||||
|
||||
在form中，配置`"type": "reset"`的按钮，可以实现重置表单数据的功能
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "username",
|
||||
"placeholder": "请输入用户名",
|
||||
"label": "用户名"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"name": "password",
|
||||
"label": "密码",
|
||||
"placeholder": "请输入密码"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"name": "rememberMe",
|
||||
"option": "记住登录"
|
||||
}
|
||||
],
|
||||
"actions": [
|
||||
{
|
||||
"type": "reset",
|
||||
"label": "重置"
|
||||
},
|
||||
{
|
||||
"type": "submit",
|
||||
"label": "提交",
|
||||
"level": "primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 通用属性表
|
||||
|
||||
所有`actionType`都支持的通用配置项
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `action` | 指定为 Page 渲染器。 |
|
||||
| actionType | `string` | - | 【必填】这是action最核心的配置，来指定该action的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 |
|
||||
| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 |
|
||||
| level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 |
|
||||
| size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 |
|
||||
| icon | `string` | - | 设置图标，例如`fa fa-plus`。 |
|
||||
| iconClassName | `string` | - | 给图标上添加类名。 |
|
||||
| active | `boolean` | - | 按钮是否高亮。 |
|
||||
| activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 |
|
||||
| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 |
|
||||
| block | `boolean` | - | 用`display:"block"`来显示按钮。 |
|
||||
| confirmText | [模板](./template) | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |
|
||||
| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |
|
||||
| close | `boolean` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。 |
|
||||
| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |
|
||||
|
||||
@ -1,64 +1,467 @@
|
||||
---
|
||||
title: 行为
|
||||
description:
|
||||
title: Action 行为按钮
|
||||
description:
|
||||
type: 0
|
||||
group: 💡 概念
|
||||
menuName: 行为
|
||||
icon:
|
||||
order: 17
|
||||
group: ⚙ 组件
|
||||
menuName: Action 行为按钮
|
||||
icon:
|
||||
order: 26
|
||||
---
|
||||
页面的交互操作，例如：**提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板**等等操作，都可以视作页面的一种**行为**。
|
||||
|
||||
在 amis 中，大部分 **行为** 是跟 **行为按钮组件** 进行绑定的，也就是说，当你想要配置一个行为，大部分情况下你应该遵循下面的步骤：
|
||||
Action 行为按钮，是触发页面行为的主要方法之一
|
||||
|
||||
1. 添加一个 **行为按钮组件**；
|
||||
2. 配置当前 **行为类型（actionType）**；
|
||||
3. 根据当前行为类型，配置你想要的 **属性**。
|
||||
## 基本用法
|
||||
|
||||
## 如何配置行为？
|
||||
|
||||
### 通过行为按钮
|
||||
我们这里简单实现一个点击按钮弹框的交互。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "action",
|
||||
"label": "发出一个请求",
|
||||
"label": "弹框",
|
||||
"type": "action",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "这是个简单的弹框。"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 样式
|
||||
|
||||
### 尺寸
|
||||
|
||||
配置`size`，显示不同尺寸
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "action",
|
||||
"label": "默认尺寸"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "极小",
|
||||
"size": "xs"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "小",
|
||||
"size": "sm"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "中等",
|
||||
"size": "md"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "大",
|
||||
"size": "lg"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 主题
|
||||
|
||||
可以配置`level`或者`primary`，显示不同样式。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "button-toolbar",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "action",
|
||||
"label": "默认"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "主要",
|
||||
"level": "primary"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "次要",
|
||||
"level": "secondary"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "成功",
|
||||
"level": "success"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "警告",
|
||||
"level": "warning"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "危险",
|
||||
"level": "danger"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "浅色",
|
||||
"level": "light"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "深色",
|
||||
"level": "dark"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"label": "链接",
|
||||
"level": "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 图标
|
||||
|
||||
可以配置`icon`配置项，实现按钮显示图标
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "弹框",
|
||||
"type": "action",
|
||||
"actionType": "dialog",
|
||||
"icon": "fa fa-plus",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "这是个简单的弹框。"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
如果`label`配置为空字符串，可以只显示`icon`
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "",
|
||||
"type": "action",
|
||||
"actionType": "dialog",
|
||||
"icon": "fa fa-plus",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "这是个简单的弹框。"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 操作前确认
|
||||
|
||||
可以通过配置`confirmText`，实现在任意操作前，弹出提示框确认是否进行该操作。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "ajax请求",
|
||||
"type": "button",
|
||||
"actionType": "ajax",
|
||||
"confirmText": "确认要发出这个请求？",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm"
|
||||
}
|
||||
```
|
||||
|
||||
## ajax 请求
|
||||
|
||||
通过配置`"actionType":"ajax"`和`api`，可以实现 ajax 请求。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "ajax请求",
|
||||
"type": "button",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm"
|
||||
}
|
||||
```
|
||||
|
||||
1. 在`page`内容区中，添加一个`action`行为按钮组件
|
||||
2. 配置当前行为类型是ajax（即发送一个ajax请求)
|
||||
3. 配置请求api，值为 API类型
|
||||
### 请求成功后，跳转至某个页面
|
||||
|
||||
现在点击该按钮，你会发现浏览器发出了这个`ajax`请求。
|
||||
|
||||
很简单是吧？我们再来一个例子：
|
||||
##### 配置相对路径，实现单页跳转
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "action",
|
||||
"label": "弹个框",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "Hello World!"
|
||||
"label": "ajax请求",
|
||||
"type": "button",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"redirect": "./getting-started"
|
||||
}
|
||||
```
|
||||
|
||||
##### 配置完整路径，直接跳转指定路径
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "ajax请求",
|
||||
"type": "button",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"redirect": "https://www.baidu.com/"
|
||||
}
|
||||
```
|
||||
|
||||
### 请求成功后，显示反馈弹框
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "ajax 反馈弹框",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"feedback": {
|
||||
"title": "操作成功",
|
||||
"body": "xxx 已操作成功"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这次我们配置`actionType`为`dialog`，意味着点击该按钮会弹出一个模态框，并配置`dialog`内容，来显示字符串`Hello World!`
|
||||
更多内容查看[Dialog 文档](./dialog#feedback-%E5%8F%8D%E9%A6%88%E5%BC%B9%E6%A1%86)
|
||||
|
||||
> `dialog`是容器，也就意味着可以在`body`属性中配置其他组件
|
||||
### 自定义 toast 文字
|
||||
|
||||
完整的行为列表可以查看 [action](./action-button)组件
|
||||
可以通过配置`messages`，自定义接口返回`toast`信息
|
||||
|
||||
### 组件所支持的行为
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"type": "button",
|
||||
"label": "ajax 请求",
|
||||
"actionType": "ajax",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"messages": {
|
||||
"success": "成功了！欧耶",
|
||||
"failed": "失败了呢。。"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
一些特殊组件，例如 Chart组件 中的图表点击行为，可以直接配置`clickAction`，来配置行为对象。
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------- | -------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| api | [Api](../types/api) | - | 请求地址，参考 [api](../types/api) 格式说明。 |
|
||||
| redirect | [模板字符串](../concepts/template#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2) | - | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。 |
|
||||
| feedback | `DialogObject` | - | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考[Dialog](./Dialog.md) |
|
||||
| messages | `object` | - | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。 |
|
||||
|
||||
## 跳转链接
|
||||
|
||||
### 单页跳转
|
||||
|
||||
```schema:height="100"
|
||||
{
|
||||
"body": {
|
||||
"label": "进入简介页面",
|
||||
"type": "button",
|
||||
"level": "info",
|
||||
"actionType": "link",
|
||||
"link": "/docs/index"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `link` | 单页跳转 |
|
||||
| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值。 |
|
||||
|
||||
### 直接跳转
|
||||
|
||||
```schema:height="100"
|
||||
{
|
||||
"body": {
|
||||
"label": "打开 Baidu",
|
||||
"type": "button",
|
||||
"level": "success",
|
||||
"actionType": "url",
|
||||
"url": "raw:http://www.baidu.com"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | --------- | ------- | ------------------------------------------------ |
|
||||
| actionType | `string` | `url` | 页面跳转 |
|
||||
| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值。 |
|
||||
| blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开。 |
|
||||
|
||||
`注意：由于 amis 平台内 http 地址会被替换成 proxy 地址，所以在 amis 平台内使用请加上 raw: 作为前缀。 比如：raw:http://www.baidu.com`
|
||||
|
||||
## 弹框
|
||||
|
||||
```schema:height="100"
|
||||
{
|
||||
"body": {
|
||||
"label": "Dialog Form",
|
||||
"type": "button",
|
||||
"level": "primary",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "表单设置",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | -------------------------- | -------- | --------------------------------------------- |
|
||||
| actionType | `string` | `dialog` | 点击后显示一个弹出框 |
|
||||
| dialog | `string` 或 `DialogObject` | - | 指定弹框内容，格式可参考[Dialog](./dialog) |
|
||||
| nextCondition | `boolean` | - | 可以用来设置下一条数据的条件，默认为 `true`。 |
|
||||
|
||||
## 抽屉
|
||||
|
||||
```schema:height="100"
|
||||
{
|
||||
"body": {
|
||||
"label": "Drawer Form",
|
||||
"type": "button",
|
||||
"actionType": "drawer",
|
||||
"drawer": {
|
||||
"title": "表单设置",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------------------------- | -------- | ------------------------------------------ |
|
||||
| actionType | `string` | `drawer` | 点击后显示一个侧边栏 |
|
||||
| drawer | `string` 或 `DrawerObject` | - | 指定弹框内容，格式可参考[Drawer](./drawer) |
|
||||
|
||||
## 复制文本
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
"label": "复制一段文本",
|
||||
"type": "button",
|
||||
"actionType": "copy",
|
||||
"content": "raw:http://www.baidu.com"
|
||||
}
|
||||
```
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | ---------------------------- | ------ | ------------------------------------ |
|
||||
| actionType | `string` | `copy` | 复制一段内容到粘贴板 |
|
||||
| content | [模板](../concepts/template) | - | 指定复制的内容。可用 `${xxx}` 取值。 |
|
||||
|
||||
## 刷新其他组件
|
||||
|
||||
### 基本使用
|
||||
|
||||
xxx
|
||||
|
||||
##### 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------- | -------- | -------- | --------------------------------------------------------------------------- |
|
||||
| actionType | `string` | `reload` | 刷新目标组件 |
|
||||
| target | `string` | - | 需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
|
||||
## 组件特有的行为类型
|
||||
|
||||
### 表单中表格添加一行
|
||||
|
||||
该 actionType 为[FormItem-Table](./form/table)专用行为
|
||||
|
||||
### 重置表单
|
||||
|
||||
在 form 中，配置`"type": "reset"`的按钮，可以实现重置表单数据的功能
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://houtai.baidu.com/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "username",
|
||||
"placeholder": "请输入用户名",
|
||||
"label": "用户名"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"name": "password",
|
||||
"label": "密码",
|
||||
"placeholder": "请输入密码"
|
||||
},
|
||||
{
|
||||
"type": "checkbox",
|
||||
"name": "rememberMe",
|
||||
"option": "记住登录"
|
||||
}
|
||||
],
|
||||
"actions": [
|
||||
{
|
||||
"type": "reset",
|
||||
"label": "重置"
|
||||
},
|
||||
{
|
||||
"type": "submit",
|
||||
"label": "提交",
|
||||
"level": "primary"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 通用属性表
|
||||
|
||||
所有`actionType`都支持的通用配置项
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ---------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `action` | 指定为 Page 渲染器。 |
|
||||
| actionType | `string` | - | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 |
|
||||
| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 |
|
||||
| level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 |
|
||||
| size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 |
|
||||
| icon | `string` | - | 设置图标，例如`fa fa-plus`。 |
|
||||
| iconClassName | `string` | - | 给图标上添加类名。 |
|
||||
| active | `boolean` | - | 按钮是否高亮。 |
|
||||
| activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 |
|
||||
| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 |
|
||||
| block | `boolean` | - | 用`display:"block"`来显示按钮。 |
|
||||
| confirmText | [模板](../concepts/template) | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |
|
||||
| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |
|
||||
| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |
|
||||
| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |
|
||||
| close | `boolean` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。 |
|
||||
| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Alert 提示
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Alert 提示
|
||||
icon:
|
||||
icon:
|
||||
order: 27
|
||||
---
|
||||
|
||||
用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。
|
||||
|
||||
## 基本使用
|
||||
@ -58,16 +59,10 @@ order: 27
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | ------------------------------------ | --------- | -------------------------------------------------------- |
|
||||
| type | `string` | `"alert"` | 指定为 alert 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` |
|
||||
| body | [SchemaNode](/docs/types-schemanode) | | 显示内容 |
|
||||
| showCloseButton | `boolean` | false | 是否显示关闭按钮 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------------------------------- | --------- | -------------------------------------------------------- |
|
||||
| type | `string` | `"alert"` | 指定为 alert 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` |
|
||||
| body | [SchemaNode](../types/schemanode) | | 显示内容 |
|
||||
| showCloseButton | `boolean` | false | 是否显示关闭按钮 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: ButtonGroup 按钮组
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: ButtonGroup
|
||||
icon:
|
||||
icon:
|
||||
order: 30
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="200" scope="body"
|
||||
@ -67,18 +68,11 @@ order: 30
|
||||
]
|
||||
```
|
||||
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | -------------------------------- | ---------------- | -------------------------- |
|
||||
| type | `string` | `"button-group"` | 指定为 button-group 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| buttons | Array<[Action](./action-button)> | | 行为按钮组 |
|
||||
| vertical | `string` | | 是否使用垂直模式 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | ------------------------- | ---------------- | -------------------------- |
|
||||
| type | `string` | `"button-group"` | 指定为 button-group 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| buttons | Array<[Action](./action)> | | 行为按钮组 |
|
||||
| vertical | `string` | | 是否使用垂直模式 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Card 卡片
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Card 卡片
|
||||
icon:
|
||||
icon:
|
||||
order: 31
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="250" scope="body"
|
||||
@ -45,25 +46,19 @@ order: 31
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------------- | -------------------------------- | ----------------------------------- | ------------------------------------------ |
|
||||
| type | `string` | `"card"` | 指定为 Card 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| header | `Object` | | Card 头部内容设置 |
|
||||
| header.className | `string` | | 头部类名 |
|
||||
| header.title | [模板](./template) | | 标题 |
|
||||
| header.subTitle | [模板](./template) | | 副标题 |
|
||||
| header.desc | [模板](./template) | | 描述 |
|
||||
| header.avatar | [模板](./template) | | 图片 |
|
||||
| header.avatarText | [模板](./template) | | 如果不配置图片，则会在图片处显示该文本 |
|
||||
| header.highlight | `boolean` | | 是否显示激活样式 |
|
||||
| header.avatarClassName | `string` | `"pull-left thumb avatar b-3x m-r"` | 图片类名 |
|
||||
| body | `Array` 或者 [Field](./Field.md) | | 内容容器，主要用来放置 [Field](./Field.md) |
|
||||
| bodyClassName | `string` | `"padder m-t-sm m-b-sm"` | 内容区域类名 |
|
||||
| actions | Array<[Action](./action-button)> | | 配置按钮集合 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------------- | ---------------------------- | ----------------------------------- | -------------------------------------- |
|
||||
| type | `string` | `"card"` | 指定为 Card 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| header | `Object` | | Card 头部内容设置 |
|
||||
| header.className | `string` | | 头部类名 |
|
||||
| header.title | [模板](../concepts/template) | | 标题 |
|
||||
| header.subTitle | [模板](../concepts/template) | | 副标题 |
|
||||
| header.desc | [模板](../concepts/template) | | 描述 |
|
||||
| header.avatar | [模板](../concepts/template) | | 图片 |
|
||||
| header.avatarText | [模板](../concepts/template) | | 如果不配置图片，则会在图片处显示该文本 |
|
||||
| header.highlight | `boolean` | | 是否显示激活样式 |
|
||||
| header.avatarClassName | `string` | `"pull-left thumb avatar b-3x m-r"` | 图片类名 |
|
||||
| body | `Array` | | 内容容器，主要用来放置非表单项组件 |
|
||||
| bodyClassName | `string` | `"padder m-t-sm m-b-sm"` | 内容区域类名 |
|
||||
| actions | Array<[Action](./action)> | | 配置按钮集合 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Cards 卡片组
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Cards 卡片组
|
||||
icon:
|
||||
icon:
|
||||
order: 32
|
||||
---
|
||||
|
||||
卡片展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。
|
||||
|
||||
## 基本用法
|
||||
@ -110,24 +111,18 @@ order: 32
|
||||
}
|
||||
```
|
||||
|
||||
或者你也可以使用CRUD的 [card模式](./crud#cards-%E5%8D%A1%E7%89%87%E6%A8%A1%E5%BC%8F)
|
||||
或者你也可以使用 CRUD 的 [card 模式](./crud#cards-%E5%8D%A1%E7%89%87%E6%A8%A1%E5%BC%8F)
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | -------------------------- | ------------------- | ------------------------------ |
|
||||
| type | `string` | | `"cards"` 指定为卡片组。 |
|
||||
| title | [模板](./template) | | 标题 |
|
||||
| source | [数据映射](./data-mapping) | `${items}` | 数据源, 获取当前数据域中的变量 |
|
||||
| placeholder | [模板](./template) | ‘暂无数据’ | 当没数据的时候的文字提示 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| headerClassName | `string` | `amis-grid-header` | 顶部外层 CSS 类名 |
|
||||
| footerClassName | `string` | `amis-grid-footer` | 底部外层 CSS 类名 |
|
||||
| itemClassName | `string` | `col-sm-4 col-md-3` | 卡片 CSS 类名 |
|
||||
| card | [Card](./card) | | 配置卡片信息 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | ------------------------------------ | ------------------- | ------------------------------ |
|
||||
| type | `string` | | `"cards"` 指定为卡片组。 |
|
||||
| title | [模板](../concepts/template) | | 标题 |
|
||||
| source | [数据映射](../concepts/data-mapping) | `${items}` | 数据源, 获取当前数据域中的变量 |
|
||||
| placeholder | [模板](../concepts/template) | ‘暂无数据’ | 当没数据的时候的文字提示 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| headerClassName | `string` | `amis-grid-header` | 顶部外层 CSS 类名 |
|
||||
| footerClassName | `string` | `amis-grid-footer` | 底部外层 CSS 类名 |
|
||||
| itemClassName | `string` | `col-sm-4 col-md-3` | 卡片 CSS 类名 |
|
||||
| card | [Card](./card) | | 配置卡片信息 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Carousel 轮播图
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Carousel 幻灯片
|
||||
icon:
|
||||
icon:
|
||||
order: 33
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="350" scope="body"
|
||||
@ -39,7 +40,7 @@ order: 33
|
||||
| options.titleClassName | `string` | | 图片标题类名 |
|
||||
| options.description | `string` | | 图片描述 |
|
||||
| options.descriptionClassName | `string` | | 图片描述类名 |
|
||||
| options.html | `string` | | HTML 自定义，同[Tpl](./Tpl.md)一致 |
|
||||
| options.html | `string` | | HTML 自定义，同[Tpl](./tpl)一致 |
|
||||
| itemSchema | `object` | | 自定义`schema`来展示数据 |
|
||||
| auto | `boolean` | `true` | 是否自动轮播 |
|
||||
| interval | `string` | `5s` | 切换动画间隔 |
|
||||
@ -50,8 +51,6 @@ order: 33
|
||||
| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 |
|
||||
| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |
|
||||
|
||||
|
||||
|
||||
- `type` 请设置成 `carousel`
|
||||
- `className` 外层 Dom 的类名
|
||||
- `options` 轮播面板数据，默认`[]`，支持以下模式
|
||||
@ -72,11 +71,3 @@ order: 33
|
||||
- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`
|
||||
- `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式
|
||||
- `animation` 切换动画效果，默认`fade`，另有`slide`模式
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Chart 图表
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Chart 图标
|
||||
icon:
|
||||
icon:
|
||||
order: 34
|
||||
---
|
||||
图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，[echarts配置文档](http://echarts.baidu.com/option.html#title)
|
||||
|
||||
图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，[echarts 配置文档](http://echarts.baidu.com/option.html#title)
|
||||
|
||||
## 基本用法
|
||||
|
||||
@ -131,7 +132,7 @@ order: 34
|
||||
|
||||
## 配置图表点击行为
|
||||
|
||||
可以通过配置`"clickAction": {}`，来指定图表节点的点击行为，支持amis的[行为](./action)。
|
||||
可以通过配置`"clickAction": {}`，来指定图表节点的点击行为，支持 amis 的[行为](./action)。
|
||||
|
||||
> 点击下面坐标中的节点查看效果！
|
||||
|
||||
@ -318,22 +319,16 @@ order: 34
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------ | -------------------------------- | --------- | ------------------------------------------------------------------ |
|
||||
| type | `string` | `"chart"` | 指定为 chart 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| body | [SchemaNode](./types-schemanode) | | 内容容器 |
|
||||
| api | [api](./types-api) | | 配置项接口地址 |
|
||||
| initFetch | `boolean` | | 组件初始化时，是否请求接口 |
|
||||
| interval | `number` | | 刷新时间(最低 3000) |
|
||||
| config | `object | string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 |
|
||||
| style | `object` | | 设置根元素的 style |
|
||||
| width | `string` | | 设置根元素的宽度 |
|
||||
| height | `string` | | 设置根元素的高度 |
|
||||
| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------ | --------------------------------- | --------- | ------------------------------------------------------------------ |
|
||||
| type | `string` | `"chart"` | 指定为 chart 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| body | [SchemaNode](../types/schemanode) | | 内容容器 |
|
||||
| api | [api](../types/api) | | 配置项接口地址 |
|
||||
| initFetch | `boolean` | | 组件初始化时，是否请求接口 |
|
||||
| interval | `number` | | 刷新时间(最低 3000) |
|
||||
| config | `object | string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 |
|
||||
| style | `object` | | 设置根元素的 style |
|
||||
| width | `string` | | 设置根元素的宽度 |
|
||||
| height | `string` | | 设置根元素的高度 |
|
||||
| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Collapse 折叠器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Collapse 折叠器
|
||||
icon:
|
||||
icon:
|
||||
order: 36
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="350" scope="body"
|
||||
@ -19,18 +20,12 @@ order: 36
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | -------------------------------- | -------------------------------------- | ---------------------- |
|
||||
| type | `string` | `"collapse"` | 指定为 Collapse 渲染器 |
|
||||
| title | [SchemaNode](./types-schemanode) | | 标题 |
|
||||
| body | [SchemaNode](./types-schemanode) | | 内容 |
|
||||
| className | `string` | `bg-white wrapper` | CSS 类名 |
|
||||
| headingClassName | `string` | `font-thin b-b b-light text-lg p-b-xs` | 标题 CSS 类名 |
|
||||
| bodyClassName | `string` | | 内容 CSS 类名。 |
|
||||
| collapsed | `boolean` | `false` | 默认是否要收起。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------------------------------- | -------------------------------------- | ---------------------- |
|
||||
| type | `string` | `"collapse"` | 指定为 Collapse 渲染器 |
|
||||
| title | [SchemaNode](../types/schemanode) | | 标题 |
|
||||
| body | [SchemaNode](../types/schemanode) | | 内容 |
|
||||
| className | `string` | `bg-white wrapper` | CSS 类名 |
|
||||
| headingClassName | `string` | `font-thin b-b b-light text-lg p-b-xs` | 标题 CSS 类名 |
|
||||
| bodyClassName | `string` | | 内容 CSS 类名。 |
|
||||
| collapsed | `boolean` | `false` | 默认是否要收起。 |
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Container 容器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Container 容器
|
||||
icon:
|
||||
icon:
|
||||
order: 38
|
||||
---
|
||||
Container 是一种容器组件，它可以渲染其他amis组件
|
||||
|
||||
Container 是一种容器组件，它可以渲染其他 amis 组件
|
||||
|
||||
## 基本用法
|
||||
|
||||
@ -20,14 +21,9 @@ Container 是一种容器组件，它可以渲染其他amis组件
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | -------------------------------- | --------- | ------------------- |
|
||||
| type | `string` | `"alert"` | 指定为 alert 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| bodyClassName | `string` | | 容器内容区的类名 |
|
||||
| body | [SchemaNode](./types-schemanode) | | 容器内容 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | --------------------------------- | --------- | ------------------- |
|
||||
| type | `string` | `"alert"` | 指定为 alert 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| bodyClassName | `string` | | 容器内容区的类名 |
|
||||
| body | [SchemaNode](../types/schemanode) | | 容器内容 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: CRUD 增删改查
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: CRUD 增删改查
|
||||
icon:
|
||||
icon:
|
||||
order: 25
|
||||
---
|
||||
|
||||
CRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。
|
||||
|
||||
## 基本用法
|
||||
@ -57,10 +58,11 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
|
||||
"msg": "",
|
||||
"data": {
|
||||
"items": [
|
||||
{ // 每一行的数据
|
||||
"id": 1,
|
||||
"xxx": "xxxx"
|
||||
}
|
||||
{
|
||||
// 每一行的数据
|
||||
"id": 1,
|
||||
"xxx": "xxxx"
|
||||
}
|
||||
],
|
||||
|
||||
"total": 200 // 注意！！！这里不是当前请求返回的 items 的长度，而是数据库中一共有多少条数据，用于生成分页组件
|
||||
@ -77,10 +79,11 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
|
||||
"msg": "",
|
||||
"data": {
|
||||
"items": [
|
||||
{ // 每个成员的数据。
|
||||
"id": 1,
|
||||
"xxx": "xxxx"
|
||||
}
|
||||
{
|
||||
// 每个成员的数据。
|
||||
"id": 1,
|
||||
"xxx": "xxxx"
|
||||
}
|
||||
],
|
||||
|
||||
"hasNext": true // 是否有下一页。
|
||||
@ -92,7 +95,7 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
|
||||
|
||||
## 展示模式
|
||||
|
||||
CRUD 支持下面3种展示模式，默认为 Table表格模式。
|
||||
CRUD 支持下面 3 种展示模式，默认为 Table 表格模式。
|
||||
|
||||
### Table 表格模式
|
||||
|
||||
@ -286,7 +289,7 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
|
||||
|
||||
大部分表格展示有对数据进行检索的需求，CRUD 自身支持通过配置`filter`，实现查询条件过滤表单
|
||||
|
||||
`filter` 配置实际上同 [Form](./form) 组件，因此支持绝大部分`form`的功能。
|
||||
`filter` 配置实际上同 [Form](./form/index) 组件，因此支持绝大部分`form`的功能。
|
||||
|
||||
```schema:height="800" scope="body"
|
||||
{
|
||||
@ -331,7 +334,7 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
|
||||
}
|
||||
```
|
||||
|
||||
**请注意**：在默认没有自定义配置api数据映射时，提交查询条件表单，会自动将表单中的表单项值，发送给`crud`所配置的接口，然后通过后端接口，实现对数据的过滤操作，前端默认是不会进行任何的数据过滤操作
|
||||
**请注意**：在默认没有自定义配置 api 数据映射时，提交查询条件表单，会自动将表单中的表单项值，发送给`crud`所配置的接口，然后通过后端接口，实现对数据的过滤操作，前端默认是不会进行任何的数据过滤操作
|
||||
|
||||
如果想前端实现过滤功能，请看[前端一次性加载](#前端一次性加载)部分。
|
||||
|
||||
@ -377,7 +380,7 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
|
||||
|
||||
## 列配置
|
||||
|
||||
除了支持 [Table中的列配置](./table#%E5%88%97%E9%85%8D%E7%BD%AE) 以外，crud 还支持下面这些配置，帮助更好的操作数据
|
||||
除了支持 [Table 中的列配置](./table#%E5%88%97%E9%85%8D%E7%BD%AE) 以外，crud 还支持下面这些配置，帮助更好的操作数据
|
||||
|
||||
### 排序检索
|
||||
|
||||
@ -405,12 +408,12 @@ amis 只负责生成排序组件，并将排序参数传递给接口，而不会
|
||||
|
||||
```json
|
||||
{
|
||||
"orderBy": "engine", // 这里为所配置列的 name
|
||||
"orderDir": "asc" // asc 为升序，desc 为降序
|
||||
"orderBy": "engine", // 这里为所配置列的 name
|
||||
"orderDir": "asc" // asc 为升序，desc 为降序
|
||||
}
|
||||
```
|
||||
|
||||
你可以通过[数据映射](./data-mapping)，在`api`中获取这些参数。
|
||||
你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。
|
||||
|
||||
### 快速搜索
|
||||
|
||||
@ -438,11 +441,11 @@ amis 只负责生成搜索组件，并将搜索参数传递给接口，而不会
|
||||
|
||||
```json
|
||||
{
|
||||
"engine": "xxx", // 这里的key是列的 name，value是输入的关键字
|
||||
"engine": "xxx" // 这里的key是列的 name，value是输入的关键字
|
||||
}
|
||||
```
|
||||
|
||||
你可以通过[数据映射](./data-mapping)，在`api`中获取这些参数。
|
||||
你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。
|
||||
|
||||
### 快速过滤
|
||||
|
||||
@ -478,11 +481,11 @@ amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，
|
||||
|
||||
```json
|
||||
{
|
||||
"grade": "xxx", // 这里的key是列的 name，value是选中项的value值
|
||||
"grade": "xxx" // 这里的key是列的 name，value是选中项的value值
|
||||
}
|
||||
```
|
||||
|
||||
你可以通过[数据映射](./data-mapping)，在`api`中获取这些参数。
|
||||
你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。
|
||||
|
||||
### 快速编辑
|
||||
|
||||
@ -610,7 +613,7 @@ amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，
|
||||
}
|
||||
```
|
||||
|
||||
你也可以在`saveImmediately`中配置api，实现即时保存
|
||||
你也可以在`saveImmediately`中配置 api，实现即时保存
|
||||
|
||||
```schema:height="750" scope="body"
|
||||
{
|
||||
@ -644,10 +647,9 @@ amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 顶部和底部工具栏
|
||||
|
||||
crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在表格顶部和底部渲染组件，
|
||||
crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在表格顶部和底部渲染组件，
|
||||
|
||||
```schema:height="600" scope="body"
|
||||
{
|
||||
@ -704,21 +706,21 @@ crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
|
||||
上例中我们在顶部渲染了一段模板，通过`${count}`取到数据域中，CRUD 返回的`count`变量值；然后我们在底部渲染了一个按钮。
|
||||
|
||||
从上面一些例子中你可能已经发现，当我们不配置该属性时，crud默认会在顶部和底部渲染一些组件，实际上，`headerToolbar`和`footerToolbar`默认会有下面这些配置：
|
||||
从上面一些例子中你可能已经发现，当我们不配置该属性时，crud 默认会在顶部和底部渲染一些组件，实际上，`headerToolbar`和`footerToolbar`默认会有下面这些配置：
|
||||
|
||||
```json
|
||||
{
|
||||
"headerToolbar": ["bulkActions", "pagination"],
|
||||
"footerToolbar": ["statistics", "pagination"]
|
||||
"headerToolbar": ["bulkActions", "pagination"],
|
||||
"footerToolbar": ["statistics", "pagination"]
|
||||
}
|
||||
```
|
||||
|
||||
- 在顶部工具栏中：渲染批量操作按钮（如果在crud中，配置了bulkActions的话）和 分页组件
|
||||
- 在顶部工具栏中：渲染批量操作按钮（如果在 crud 中，配置了 bulkActions 的话）和 分页组件
|
||||
- 在底部工具栏中：渲染数据统计组件 和 分页组件
|
||||
|
||||
> 如果你不希望在顶部或者底部渲染默认组件，你可以设置`headerToolbar`和`footerToolbar`为空数组`[]`
|
||||
|
||||
除了可以配置[SchemaNode类型](./types-schemanode)以外，`headerToolbar`和`footerToolbar`还支持一些针对列表场景而内置的一些常用组件，下面分别介绍：
|
||||
除了可以配置[SchemaNode 类型](../types/schemanode)以外，`headerToolbar`和`footerToolbar`还支持一些针对列表场景而内置的一些常用组件，下面分别介绍：
|
||||
|
||||
### 分页
|
||||
|
||||
@ -761,30 +763,33 @@ crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
`crud`默认不会处理数据分页，只是会把分页参数传给后端，由后端实现分页，并返回需要展示的数据 和 总数据数`total`变量：
|
||||
|
||||
默认传给后端的分页参数格式为：
|
||||
|
||||
```json
|
||||
{
|
||||
"page": 1,
|
||||
"perPage": 10
|
||||
"page": 1,
|
||||
"perPage": 10
|
||||
}
|
||||
```
|
||||
|
||||
你可以通过配置`pageField`和`perPageField`来修改传给后端的分页数据格式，如：
|
||||
|
||||
```json
|
||||
{
|
||||
"pageField": "pageNo",
|
||||
"perPageField": "pageSize"
|
||||
"pageField": "pageNo",
|
||||
"perPageField": "pageSize"
|
||||
}
|
||||
```
|
||||
|
||||
这样传给后端的参数格式将为：
|
||||
|
||||
```json
|
||||
{
|
||||
"pageNo": 1,
|
||||
"pageSize": 10
|
||||
"pageNo": 1,
|
||||
"pageSize": 10
|
||||
}
|
||||
```
|
||||
|
||||
你可以通过[数据映射](./data-mapping)，在`api`中获取这些参数。
|
||||
你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。
|
||||
|
||||
```json
|
||||
{
|
||||
@ -792,7 +797,7 @@ crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
"api": {
|
||||
"method": "get",
|
||||
"url": "xxxxxx",
|
||||
"data": {
|
||||
"data": {
|
||||
"pageNo": "${page}",
|
||||
"pageSize": "${perPage}",
|
||||
... // 一些其他参数
|
||||
@ -830,6 +835,7 @@ crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
##### 2. 不知道数据总数
|
||||
|
||||
如果后端无法知道数据总数，那么可以返回`hasNext`字段，来标识是否有下一页。
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
@ -850,10 +856,9 @@ crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
|
||||
这样 amis 会在配置分页组件的地方，渲染出一个简单的页面跳转控件。
|
||||
|
||||
|
||||
### 批量操作
|
||||
|
||||
在`headerToolbar`或者`footerToolbar`数组中添加`bulkActions`字符串，并且在crud上配置`bulkActions`行为按钮数组，可以实现选中表格项并批量操作的功能。
|
||||
在`headerToolbar`或者`footerToolbar`数组中添加`bulkActions`字符串，并且在 crud 上配置`bulkActions`行为按钮数组，可以实现选中表格项并批量操作的功能。
|
||||
|
||||
```schema:height="600" scope="body"
|
||||
{
|
||||
@ -923,13 +928,13 @@ crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
|
||||
批量操作会默认将下面数据添加到数据域中以供按钮行为使用
|
||||
|
||||
* `items` `Array<object>` 选中的行数据。
|
||||
* `rows` items 的别名，推荐用 items。
|
||||
* `unselectedItems` `Array<object>` 没选中的行数据也可获取。
|
||||
* `ids` `Array<number|string>` 前提是行数据中有 id 字段，或者有指定的 `primaryField` 字段。
|
||||
* `第一行所有行数据` 还有第一行的所有行数据也会包含进去。
|
||||
- `items` `Array<object>` 选中的行数据。
|
||||
- `rows` items 的别名，推荐用 items。
|
||||
- `unselectedItems` `Array<object>` 没选中的行数据也可获取。
|
||||
- `ids` `Array<number|string>` 前提是行数据中有 id 字段，或者有指定的 `primaryField` 字段。
|
||||
- `第一行所有行数据` 还有第一行的所有行数据也会包含进去。
|
||||
|
||||
你可以通过[数据映射](./data-mapping)，在`api`中获取这些参数。
|
||||
你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。
|
||||
|
||||
### 数据统计
|
||||
|
||||
@ -1009,7 +1014,7 @@ crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
|
||||
### 显隐显示查询条件表单
|
||||
|
||||
在`headerToolbar`或者`footerToolbar`数组中添加`filter-toggler`字符串，并且在crud中配置`"filterTogglable": true`后，可以渲染一个可以切换显示查询表单的功能按钮
|
||||
在`headerToolbar`或者`footerToolbar`数组中添加`filter-toggler`字符串，并且在 crud 中配置`"filterTogglable": true`后，可以渲染一个可以切换显示查询表单的功能按钮
|
||||
|
||||
```schema:height="800" scope="body"
|
||||
{
|
||||
@ -1058,7 +1063,6 @@ crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 拖拽排序
|
||||
|
||||
通过配置`"draggable": true`和保存排序接口`saveOrderApi`，可以实现拖拽排序功能，
|
||||
@ -1101,33 +1105,33 @@ crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
|
||||
发送方式默认为`POST`，会包含以下信息。
|
||||
|
||||
* `ids` 字符串如： `2,3,1,4,5,6` 用 id 来记录新的顺序。 前提是你的列表接口返回了 id 字段。另外如果你的 primaryField 不是 `id`，则需要配置如： `primaryField: "order_id"`。注意：无论你配置成什么 primayField，这个字段名始终是 ids。
|
||||
* `rows` `Array<Item>` 数组格式，新的顺序，数组里面包含所有原始信息。
|
||||
* `insertAfter` 或者 `insertBefore` 这是 amis 生成的 diff 信息，对象格式，key 为目标成员的 primaryField 值，即 id，value 为数组，数组中存放成员 primaryField 值。如：
|
||||
- `ids` 字符串如： `2,3,1,4,5,6` 用 id 来记录新的顺序。 前提是你的列表接口返回了 id 字段。另外如果你的 primaryField 不是 `id`，则需要配置如： `primaryField: "order_id"`。注意：无论你配置成什么 primayField，这个字段名始终是 ids。
|
||||
- `rows` `Array<Item>` 数组格式，新的顺序，数组里面包含所有原始信息。
|
||||
- `insertAfter` 或者 `insertBefore` 这是 amis 生成的 diff 信息，对象格式，key 为目标成员的 primaryField 值，即 id，value 为数组，数组中存放成员 primaryField 值。如：
|
||||
|
||||
```json
|
||||
{
|
||||
"insertAfter": {
|
||||
"2": ["1", "3"],
|
||||
"6": ["4", "5"]
|
||||
}
|
||||
```json
|
||||
{
|
||||
"insertAfter": {
|
||||
"2": ["1", "3"],
|
||||
"6": ["4", "5"]
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
表示：成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。
|
||||
表示：成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。
|
||||
|
||||
你可以通过[数据映射](./data-mapping)，在`api`中获取这些参数。
|
||||
你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。
|
||||
|
||||
如下:
|
||||
|
||||
```json
|
||||
{
|
||||
"saveOrderApi": {
|
||||
"url": "/api/xxxx",
|
||||
"data": {
|
||||
"ids": "${ids}"
|
||||
}
|
||||
"saveOrderApi": {
|
||||
"url": "/api/xxxx",
|
||||
"data": {
|
||||
"ids": "${ids}"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -1139,23 +1143,23 @@ crud组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
|
||||
CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去，如果你的按钮行为是弹出时，还会包含一下信息：
|
||||
|
||||
* `hasNext` `boolean` 当按钮行为是弹框时，还会携带这个数据可以用来判断当前页中是否有下一条数据。
|
||||
* `hasPrev` `boolean` 当按钮行为是弹框时，还会携带这个数据可以判断用来当前页中是否有上一条数据。
|
||||
* `index` `number` 当按钮行为是弹框时，还会携带这个数据可以用来获取当前行数据在这一页中的位置。
|
||||
* `prevIndex` `number`
|
||||
* `nextIndex` `number`
|
||||
- `hasNext` `boolean` 当按钮行为是弹框时，还会携带这个数据可以用来判断当前页中是否有下一条数据。
|
||||
- `hasPrev` `boolean` 当按钮行为是弹框时，还会携带这个数据可以判断用来当前页中是否有上一条数据。
|
||||
- `index` `number` 当按钮行为是弹框时，还会携带这个数据可以用来获取当前行数据在这一页中的位置。
|
||||
- `prevIndex` `number`
|
||||
- `nextIndex` `number`
|
||||
|
||||
你可以通过[数据映射](./data-mapping)，在`api`中获取这些参数。
|
||||
你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。
|
||||
|
||||
如果你的按钮类型是 ajax，你也可以限定只发送部分数据比如。
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "button",
|
||||
"label": "删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/xxxx/$id",
|
||||
"confirmText": "确定要删除？"
|
||||
"type": "button",
|
||||
"label": "删除",
|
||||
"actionType": "ajax",
|
||||
"api": "delete:/api/xxxx/$id",
|
||||
"confirmText": "确定要删除？"
|
||||
}
|
||||
```
|
||||
|
||||
@ -1163,26 +1167,26 @@ CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一
|
||||
|
||||
```json
|
||||
{
|
||||
"type": "button",
|
||||
"label": "删除",
|
||||
"actionType": "ajax",
|
||||
"api": {
|
||||
"method": "post",
|
||||
"url": "/api/xxxx/$id",
|
||||
"data": {
|
||||
"&": "$$",
|
||||
"op": "delete"
|
||||
}
|
||||
},
|
||||
"confirmText": "确定要删除？"
|
||||
"type": "button",
|
||||
"label": "删除",
|
||||
"actionType": "ajax",
|
||||
"api": {
|
||||
"method": "post",
|
||||
"url": "/api/xxxx/$id",
|
||||
"data": {
|
||||
"&": "$$",
|
||||
"op": "delete"
|
||||
}
|
||||
},
|
||||
"confirmText": "确定要删除？"
|
||||
}
|
||||
```
|
||||
|
||||
## 过滤条件参数同步地址栏
|
||||
|
||||
默认CRUD会将过滤条件参数同步至浏览器地址栏中，
|
||||
默认 CRUD 会将过滤条件参数同步至浏览器地址栏中，
|
||||
|
||||
不过，如果你了解 [数据链](./data-scope-and-chain#%E6%95%B0%E6%8D%AE%E9%93%BE) 的话，在开启同步地址栏时，地址栏中的参数数据会合并到顶层的数据链中，可能会造成一些预期中的问题，例如：会自动给某些同名的表单项设置默认值等。可以手动设置`syncLocation: false`来关闭此特性
|
||||
不过，如果你了解 [数据链](../concepts/datascope-and-datachain#%E6%95%B0%E6%8D%AE%E9%93%BE) 的话，在开启同步地址栏时，地址栏中的参数数据会合并到顶层的数据链中，可能会造成一些预期中的问题，例如：会自动给某些同名的表单项设置默认值等。可以手动设置`syncLocation: false`来关闭此特性
|
||||
|
||||
## 前端一次性加载
|
||||
|
||||
@ -1223,7 +1227,7 @@ CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一
|
||||
}
|
||||
```
|
||||
|
||||
配置一次性加载后，基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索，需要用到[数据映射](./data-mapping)功能：
|
||||
配置一次性加载后，基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索，需要用到[数据映射](../concepts/data-mapping)功能：
|
||||
|
||||
```schema:height="600" scope="body"
|
||||
{
|
||||
@ -1281,24 +1285,24 @@ CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一
|
||||
| mode | `string` | `"table"` | `"table" 、 "cards" 或者 "list"` |
|
||||
| title | `string` | `""` | 可设置成空，当设置成空时，没有标题栏 |
|
||||
| className | `string` | | 表格外层 Dom 的类名 |
|
||||
| api | [API](./types-api) | | CRUD 用来获取列表数据的 api。 |
|
||||
| api | [API](../types/api) | | CRUD 用来获取列表数据的 api。 |
|
||||
| loadDataOnce | `boolean` | | 是否一次性加载所有数据（前端分页） |
|
||||
| loadDataOnceFetchOnFilter | `boolean` | `true` | 在开启loadDataOnce时，filter时是否去重新请求api |
|
||||
| loadDataOnceFetchOnFilter | `boolean` | `true` | 在开启 loadDataOnce 时，filter 时是否去重新请求 api |
|
||||
| source | `string` | | 数据映射接口返回某字段的值，不设置会默认把接口返回的`items`或者`rows`填充进`mode`区域 |
|
||||
| filter | [Form](./form) | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 |
|
||||
| filter | [Form](./form/index) | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 |
|
||||
| filterTogglable | `boolean` | `false` | 是否可显隐过滤器 |
|
||||
| filterDefaultVisible | `boolean` | `true` | 设置过滤器默认是否可见。 |
|
||||
| initFetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000) |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否隐藏加载动画 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式)来配置停止刷新的条件 |
|
||||
| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](../concepts/expression)来配置停止刷新的条件 |
|
||||
| stopAutoRefreshWhenModalIsOpen | `boolean` | `false` | 当有弹框时关闭自动刷新，关闭弹框又恢复 |
|
||||
| syncLocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 |
|
||||
| draggable | `boolean` | `false` | 是否可通过拖拽排序 |
|
||||
| itemDraggableOn | `boolean` | | 用[表达式](./Types.md#表达式)来配置是否可拖拽排序 |
|
||||
| [saveOrderApi](#saveOrderApi) | [API](./types-api) | | 保存排序的 api。 |
|
||||
| [quickSaveApi](#quickSaveApi) | [API](./types-api) | | 快速编辑后用来批量保存的 API。 |
|
||||
| [quickSaveItemApi](#quickSaveItemApi) | [API](./types-api) | | 快速编辑配置成及时保存时使用的 API。 |
|
||||
| itemDraggableOn | `boolean` | | 用[表达式](../concepts/expression)来配置是否可拖拽排序 |
|
||||
| [saveOrderApi](#saveOrderApi) | [API](../types/api) | | 保存排序的 api。 |
|
||||
| [quickSaveApi](#quickSaveApi) | [API](../types/api) | | 快速编辑后用来批量保存的 API。 |
|
||||
| [quickSaveItemApi](#quickSaveItemApi) | [API](../types/api) | | 快速编辑配置成及时保存时使用的 API。 |
|
||||
| bulkActions | Array<[Action](./action)> | | 批量操作列表，配置后，表格可进行选中操作。 |
|
||||
| defaultChecked | `boolean` | `false` | 当可批量操作时，默认是否全部勾选。 |
|
||||
| messages | `Object` | | 覆盖消息提示，如果不指定，将采用 api 返回的 message |
|
||||
@ -1320,8 +1324,3 @@ CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一
|
||||
| labelTpl | `string` | | 单条描述模板，`keepItemSelectionOnPageChange`设置为`true`后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 |
|
||||
| headerToolbar | Array | `['bulkActions', 'pagination']` | 顶部工具栏配置 |
|
||||
| footerToolbar | Array | `['statistics', 'pagination']` | 底部工具栏配置 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Dialog 对话框
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Dialog 对话框
|
||||
icon:
|
||||
icon:
|
||||
order: 41
|
||||
---
|
||||
|
||||
Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框以供用户操作。
|
||||
|
||||
## 基本用法
|
||||
@ -173,7 +174,7 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
}
|
||||
```
|
||||
|
||||
### 提交表单 或 ajax请求
|
||||
### 提交表单 或 ajax 请求
|
||||
|
||||
弹框中通过配置`form`或`ajax`行为按钮，可以实现`form`提交和`ajax`请求操作。
|
||||
|
||||
@ -228,9 +229,9 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
}
|
||||
```
|
||||
|
||||
### 提交表单 或 ajax请求 后不关闭弹框
|
||||
### 提交表单 或 ajax 请求 后不关闭弹框
|
||||
|
||||
默认情况下，当弹框中配置了form并进行了**提交表单操作（confirm）**或进行了**`ajax`请求**，请求成功后，会自动关闭当前弹框，你可以通过手动设置`"close": true` 来禁止该默认特性。
|
||||
默认情况下，当弹框中配置了 form 并进行了**提交表单操作（confirm）**或进行了**`ajax`请求**，请求成功后，会自动关闭当前弹框，你可以通过手动设置`"close": true` 来禁止该默认特性。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
@ -286,7 +287,7 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
|
||||
## feedback 反馈弹框
|
||||
|
||||
feedback 反馈弹框是指，在ajax请求后，可以显示一个弹框，进行反馈操作
|
||||
feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，进行反馈操作
|
||||
|
||||
### 基本使用
|
||||
|
||||
@ -308,7 +309,7 @@ feedback 反馈弹框是指，在ajax请求后，可以显示一个弹框，进
|
||||
|
||||
#### 关闭 feedback 弹框时，同时关闭上层弹框
|
||||
|
||||
当你在弹框中配置了feedback，操作之后，你希望关闭当前feedback弹框同时，关闭上层的弹框，具体有两种方式
|
||||
当你在弹框中配置了 feedback，操作之后，你希望关闭当前 feedback 弹框同时，关闭上层的弹框，具体有两种方式
|
||||
|
||||
##### 1. 不请求接口，直接关闭
|
||||
|
||||
@ -386,7 +387,7 @@ feedback 反馈弹框是指，在ajax请求后，可以显示一个弹框，进
|
||||
|
||||
##### 2. 请求接口，请求成功后，关闭所有弹框
|
||||
|
||||
需要在 feedback 的 `body` 中添加Form组件，并配置`"actionType": "confirm"`，
|
||||
需要在 feedback 的 `body` 中添加 Form 组件，并配置`"actionType": "confirm"`，
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
@ -481,7 +482,7 @@ feedback 反馈弹框是指，在ajax请求后，可以显示一个弹框，进
|
||||
|
||||
#### 关闭 feedback 弹框时，不同时关闭上层弹框
|
||||
|
||||
改场景只适用于**不请求接口关闭弹框**的场景，需要在feedback层添加`"skipRestOnCancel": true`
|
||||
改场景只适用于**不请求接口关闭弹框**的场景，需要在 feedback 层添加`"skipRestOnCancel": true`
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
@ -524,7 +525,7 @@ feedback 反馈弹框是指，在ajax请求后，可以显示一个弹框，进
|
||||
|
||||
### 根据条件显示 feedback
|
||||
|
||||
可以根据条件弹出，例如下面这个例子，只有当接口返回的时间戳可以整除2时才显示弹框。
|
||||
可以根据条件弹出，例如下面这个例子，只有当接口返回的时间戳可以整除 2 时才显示弹框。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
{
|
||||
@ -540,26 +541,18 @@ feedback 反馈弹框是指，在ajax请求后，可以显示一个弹框，进
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | -------------------------------- | ------------------ | ------------------------------------------------------------------------------ |
|
||||
| type | `string` | | `"dialog"` 指定为 Dialog 渲染器 |
|
||||
| title | [SchemaNode](./types-schemanode) | | 弹出层标题 |
|
||||
| body | [SchemaNode](./types-schemanode) | | 往 Dialog 内容区加内容 |
|
||||
| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` |
|
||||
| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |
|
||||
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |
|
||||
| showCloseButton | `boolean` | `true` | 是否显示右上角的关闭按钮 |
|
||||
| showErrorMsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 |
|
||||
| disabled | `boolean` | `false` | 如果设置此属性，则该 Dialog 只读没有提交操作。 |
|
||||
| actions | Array<[Action](./action)> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` |
|
||||
| data | `object` | | 支持[数据映射](./data-mapping)，如果不设定将默认将触发按钮的上下文中继承数据。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------------------------------- | ------------------ | ---------------------------------------------------------------------------------------- |
|
||||
| type | `string` | | `"dialog"` 指定为 Dialog 渲染器 |
|
||||
| title | [SchemaNode](../types/schemanode) | | 弹出层标题 |
|
||||
| body | [SchemaNode](../types/schemanode) | | 往 Dialog 内容区加内容 |
|
||||
| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` |
|
||||
| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |
|
||||
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |
|
||||
| showCloseButton | `boolean` | `true` | 是否显示右上角的关闭按钮 |
|
||||
| showErrorMsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 |
|
||||
| disabled | `boolean` | `false` | 如果设置此属性，则该 Dialog 只读没有提交操作。 |
|
||||
| actions | Array<[Action](./action)> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` |
|
||||
| data | `object` | | 支持[数据映射](../concepts/data-mapping)，如果不设定将默认将触发按钮的上下文中继承数据。 |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Drawer 抽屉
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Drawer 抽屉
|
||||
icon:
|
||||
icon:
|
||||
order: 43
|
||||
---
|
||||
|
||||
@ -212,24 +212,16 @@ order: 43
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------- | -------------------------------- | ------------------ | ------------------------------------------------------------------------------- |
|
||||
| type | `string` | | `"drawer"` 指定为 Drawer 渲染器 |
|
||||
| title | [SchemaNode](./types-schemanode) | | 弹出层标题 |
|
||||
| body | [SchemaNode](./types-schemanode) | | 往 Drawer 内容区加内容 |
|
||||
| size | `string` | | 指定 Drawer 大小，支持: `xs`、`sm`、`md`、`lg` |
|
||||
| bodyClassName | `string` | `modal-body` | Drawer body 区域的样式类名 |
|
||||
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Drawer |
|
||||
| closeOnOutside | `boolean` | `false` | 点击内容区外是否关闭 Drawer |
|
||||
| overlay | `boolean` | `true` | 是否显示蒙层 |
|
||||
| resizable | `boolean` | `false` | 是否可通过拖拽改变 Drawer 大小 |
|
||||
| actions | Array<[Action](./action)> | 【确认】和【取消】 | 可以不设置，默认只有两个按钮。 |
|
||||
| data | `object` | | 支持 [数据映射](./data-mapping)，如果不设定将默认将触发按钮的上下文中继承数据。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------- | --------------------------------- | ------------------ | ----------------------------------------------------------------------------------------- |
|
||||
| type | `string` | | `"drawer"` 指定为 Drawer 渲染器 |
|
||||
| title | [SchemaNode](../types/schemanode) | | 弹出层标题 |
|
||||
| body | [SchemaNode](../types/schemanode) | | 往 Drawer 内容区加内容 |
|
||||
| size | `string` | | 指定 Drawer 大小，支持: `xs`、`sm`、`md`、`lg` |
|
||||
| bodyClassName | `string` | `modal-body` | Drawer body 区域的样式类名 |
|
||||
| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Drawer |
|
||||
| closeOnOutside | `boolean` | `false` | 点击内容区外是否关闭 Drawer |
|
||||
| overlay | `boolean` | `true` | 是否显示蒙层 |
|
||||
| resizable | `boolean` | `false` | 是否可通过拖拽改变 Drawer 大小 |
|
||||
| actions | Array<[Action](./action)> | 【确认】和【取消】 | 可以不设置，默认只有两个按钮。 |
|
||||
| data | `object` | | 支持 [数据映射](../concepts/data-mapping)，如果不设定将默认将触发按钮的上下文中继承数据。 |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Each 循环渲染器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Each 循环渲染器
|
||||
icon:
|
||||
icon:
|
||||
order: 45
|
||||
---
|
||||
|
||||
@ -23,15 +23,9 @@ order: 45
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------ | -------- | -------- | ------------------------------------------------- |
|
||||
| type | `string` | `"each"` | 指定为 Each 组件 |
|
||||
| value | `array` | `[]` | 用于循环的值 |
|
||||
| name | `string` | | 获取数据域中变量，支持 [数据映射](./data-mapping) |
|
||||
| items | `object` | | 使用`value`中的数据，循环输出渲染器。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------ | -------- | -------- | ----------------------------------------------------------- |
|
||||
| type | `string` | `"each"` | 指定为 Each 组件 |
|
||||
| value | `array` | `[]` | 用于循环的值 |
|
||||
| name | `string` | | 获取数据域中变量，支持 [数据映射](../concepts/data-mapping) |
|
||||
| items | `object` | | 使用`value`中的数据，循环输出渲染器。 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Radios 单选框
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Radios 单选框
|
||||
icon:
|
||||
icon:
|
||||
order: 36
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="260" scope="body"
|
||||
@ -40,21 +41,15 @@ order: 36
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 属性表
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | -------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Array 数组输入框
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Array 数组输入框
|
||||
icon:
|
||||
icon:
|
||||
order: 3
|
||||
---
|
||||
|
||||
[普通表单项](./formitem)，其实就是 [Combo](./combo) 的一个 flat 用法。
|
||||
|
||||
## 基本用法
|
||||
@ -30,19 +31,14 @@ order: 3
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | ------------------------------ | --------- | ------------------------------------------------------------------------ |
|
||||
| type | `string` | `"array"` | 指明为`array`组件 |
|
||||
| items | `string`或 [API](../types-api) | | 配置单项表单类型 |
|
||||
| addable | `boolean` | | 是否可新增。 |
|
||||
| removable | `boolean` | | 是否可删除 |
|
||||
| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\$id 字段 |
|
||||
| draggableTip | `string` | | 可拖拽的提示文字，默认为：`"可通过拖动每行中的【交换】按钮进行顺序调整"` |
|
||||
| addButtonText | `string` | `"新增"` | 新增按钮文字 |
|
||||
| minLength | `number` | | 限制最小长度 |
|
||||
| maxLength | `number` | | 限制最大长度 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | --------------------------------- | --------- | ------------------------------------------------------------------------ |
|
||||
| type | `string` | `"array"` | 指明为`array`组件 |
|
||||
| items | `string`或 [API](../../types/api) | | 配置单项表单类型 |
|
||||
| addable | `boolean` | | 是否可新增。 |
|
||||
| removable | `boolean` | | 是否可删除 |
|
||||
| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\$id 字段 |
|
||||
| draggableTip | `string` | | 可拖拽的提示文字，默认为：`"可通过拖动每行中的【交换】按钮进行顺序调整"` |
|
||||
| addButtonText | `string` | `"新增"` | 新增按钮文字 |
|
||||
| minLength | `number` | | 限制最小长度 |
|
||||
| maxLength | `number` | | 限制最大长度 |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Button-Group 按钮集合
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Button-Group
|
||||
icon:
|
||||
icon:
|
||||
order: 6
|
||||
---
|
||||
|
||||
@ -85,18 +85,13 @@ order: 6
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | -------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#%E5%A4%9A%E9%80%89-multiple) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#%E5%A4%9A%E9%80%89-multiple) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Button-Toolbar 按钮工具栏
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Button-Toolbar
|
||||
icon:
|
||||
icon:
|
||||
order: 5
|
||||
---
|
||||
|
||||
默认按钮独立配置的时候，是独占一行的，如果想让多个按钮在一起放置，可以使用 `button-toolbar` 组件
|
||||
|
||||
## 基本使用
|
||||
@ -52,12 +53,7 @@ order: 5
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------- | ---------------------------------- | ------------------ | ------------------------- |
|
||||
| type | `string` | `"button-toolbar"` | 指定为 ButtonToolbar 组件 |
|
||||
| buttons | Array<[行为按钮](./action-button)> | | 按钮组 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------- | --------------------------- | ------------------ | ------------------------- |
|
||||
| type | `string` | `"button-toolbar"` | 指定为 ButtonToolbar 组件 |
|
||||
| buttons | Array<[行为按钮](./action)> | | 按钮组 |
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
title: Button 按钮
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Button
|
||||
icon:
|
||||
icon:
|
||||
order: 4
|
||||
---
|
||||
|
||||
`form`中除了支持 [行为按钮](./action-button)以外，还支持一些特定的按钮。
|
||||
`form`中除了支持 [行为按钮](./action)以外，还支持一些特定的按钮。
|
||||
|
||||
## 基本用法
|
||||
|
||||
@ -81,12 +81,4 @@ order: 4
|
||||
|
||||
## 属性表
|
||||
|
||||
见 [Action 行为按钮](../action-button)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
见 [Action 行为按钮](../action)
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Chain-Select 链式下拉框
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Chain-Select
|
||||
icon:
|
||||
icon:
|
||||
order: 7
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 API 拉取数据，只要 API 有返回结果，就能一直无限级别下拉下去。
|
||||
@ -32,7 +33,7 @@ order: 7
|
||||
|
||||
## 暴露参数
|
||||
|
||||
为了帮助后端接口获取当前选择器状态，chained-select会默认给source接口的数据域中，添加若干个参数：
|
||||
为了帮助后端接口获取当前选择器状态，chained-select 会默认给 source 接口的数据域中，添加若干个参数：
|
||||
|
||||
- `value`: 选中的表单项值；
|
||||
- `level`: 当前拉取数据时的层级,
|
||||
@ -43,20 +44,15 @@ order: 7
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | -------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | `string`或 [API](../types-api) | | [自动选中](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| delimiter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
|
||||
@todo可能还支持别的
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | `string`或 [API](../../types/api) | | [自动选中](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| delimiter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
|
||||
@todo 可能还支持别的
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Checkboxes 复选框
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Checkboxes
|
||||
icon:
|
||||
icon:
|
||||
order: 9
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
@ -108,29 +109,24 @@ order: 9
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | -------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |
|
||||
| checkAll | `boolean` | `false` | 是否支持全选 |
|
||||
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| 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](./types-api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
|
||||
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
|
||||
| editApi | [API](./types-api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
|
||||
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
|
||||
| deleteApi | [API](./types-api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |
|
||||
| checkAll | `boolean` | `false` | 是否支持全选 |
|
||||
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| 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](../types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
|
||||
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
|
||||
| editApi | [API](../types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
|
||||
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
|
||||
| deleteApi | [API](../types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Combo 组合
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Combo
|
||||
icon:
|
||||
icon:
|
||||
order: 12
|
||||
---
|
||||
|
||||
组合模式，支持自由组合多个表单项。当设置成单选时数据格式为对象，当设置成多选时数据格式为数组，数组成员是对象（flat 模式可以直接是某个表单单项的数值）。
|
||||
|
||||
## 基本使用
|
||||
@ -42,7 +43,7 @@ order: 12
|
||||
|
||||
## 多行展示模式
|
||||
|
||||
默认，combo内表单项是横着展示一排，如果想换行展示，可以配置`"multiLine": true`
|
||||
默认，combo 内表单项是横着展示一排，如果想换行展示，可以配置`"multiLine": true`
|
||||
|
||||
```schema:height="450" scope="body"
|
||||
{
|
||||
@ -96,7 +97,7 @@ order: 12
|
||||
|
||||
## 多选模式
|
||||
|
||||
默认，combo为单选模式，可以配置`"multiple": true`实现多选模式
|
||||
默认，combo 为单选模式，可以配置`"multiple": true`实现多选模式
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -307,10 +308,7 @@ order: 12
|
||||
|
||||
```json
|
||||
{
|
||||
"combo2": [
|
||||
"aaa",
|
||||
"bbb"
|
||||
]
|
||||
"combo2": ["aaa", "bbb"]
|
||||
}
|
||||
```
|
||||
|
||||
@ -353,7 +351,7 @@ order: 12
|
||||
}
|
||||
```
|
||||
|
||||
上例中，`text`和`select`都配置了`"unique": true`，新增多条combo，在任意两个`text`输入框的值相同时，提交时都会报错`"当前值不唯一"`，而`select`选择框也不可选择重复的选项
|
||||
上例中，`text`和`select`都配置了`"unique": true`，新增多条 combo，在任意两个`text`输入框的值相同时，提交时都会报错`"当前值不唯一"`，而`select`选择框也不可选择重复的选项
|
||||
|
||||
## 拖拽排序
|
||||
|
||||
@ -604,9 +602,9 @@ order: 12
|
||||
|
||||
## 同步更新内部表单项
|
||||
|
||||
配置`canAccessSuperData`可以获取父级数据域值，但是为了效率，在父级数据域变化的时候，默认combo内部是不会进行同步的
|
||||
配置`canAccessSuperData`可以获取父级数据域值，但是为了效率，在父级数据域变化的时候，默认 combo 内部是不会进行同步的
|
||||
|
||||
如下，添加一组combo，然后可以看到默认会映射父级变量值`123`，但是当你在更改父级数据域`super_text`文本框值后，combo内部文本框并没有同步更新
|
||||
如下，添加一组 combo，然后可以看到默认会映射父级变量值`123`，但是当你在更改父级数据域`super_text`文本框值后，combo 内部文本框并没有同步更新
|
||||
|
||||
```schema:height="500" scope="body"
|
||||
{
|
||||
@ -643,8 +641,7 @@ order: 12
|
||||
- 配置`"strictMode": false`
|
||||
- 配置`syncFields`字符串数组，数组项是需要同步的变量名
|
||||
|
||||
以上面为例，我们在combo上配置`"strictMode": false`和`"syncFields": ["super_text"]`，即可实现同步
|
||||
|
||||
以上面为例，我们在 combo 上配置`"strictMode": false`和`"syncFields": ["super_text"]`，即可实现同步
|
||||
|
||||
```schema:height="500" scope="body"
|
||||
{
|
||||
@ -730,7 +727,7 @@ order: 12
|
||||
| delimeter | `string` | `false` | 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。 |
|
||||
| addable | `boolean` | `false` | 是否可新增 |
|
||||
| removable | `boolean` | `false` | 是否可删除 |
|
||||
| deleteApi | [API](../types-api) | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 |
|
||||
| deleteApi | [API](../../types/api) | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 |
|
||||
| deleteConfirmText | `string` | `"确认要删除？"` | 当配置 `deleteApi` 才生效！删除时用来做用户确认 |
|
||||
| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\$id 字段 |
|
||||
| draggableTip | `string` | `"可通过拖动每行中的【交换】按钮进行顺序调整"` | 可拖拽的提示文字 |
|
||||
@ -742,8 +739,3 @@ order: 12
|
||||
| noBorder | `boolean` | `false` | 单组表单项是否显示边框 |
|
||||
| strictMode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 |
|
||||
| syncFields | `Array<string>` | `true` | 配置同步字段。只有 strictMode 为 false 时有效。如果 combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`["os"]` |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: FieldSet 表单项集合
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: FieldSet
|
||||
icon:
|
||||
icon:
|
||||
order: 20
|
||||
---
|
||||
|
||||
FieldSet 是用于分组展示表单项的一种容器型组件。
|
||||
|
||||
## 基本用法
|
||||
@ -41,7 +42,7 @@ FieldSet 是用于分组展示表单项的一种容器型组件。
|
||||
|
||||
## 展示模式
|
||||
|
||||
可以通过设置`mode`调整展示模式，用法同 [Form 展示模式](../form#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA)
|
||||
可以通过设置`mode`调整展示模式，用法同 [Form 展示模式](../form/index#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA)
|
||||
|
||||
下面`group`我们配置了`"mode": "horizontal"`，观察显示情况
|
||||
|
||||
@ -144,19 +145,13 @@ FieldSet 是用于分组展示表单项的一种容器型组件。
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------------------------------- | ------- | ------------------------------------ |
|
||||
| className | `string` | | CSS 类名 |
|
||||
| headingClassName | `string` | | 标题 CSS 类名 |
|
||||
| bodyClassName | `string` | | 内容区域 CSS 类名 |
|
||||
| title | [SchemaNode](../types-schemanode) | | 标题 |
|
||||
| controls | Array<[表单项](./formitem)> | | 表单项集合 |
|
||||
| mode | `string` | | 展示默认，同 [Form](./form) 中的模式 |
|
||||
| collapsable | `boolean` | `false` | 配置是否可折叠 |
|
||||
| collapsed | `booelan` | | 展示默认，同 [Form](./form) 中的模式 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ------------------------------------ | ------- | ------------------------------------------ |
|
||||
| className | `string` | | CSS 类名 |
|
||||
| headingClassName | `string` | | 标题 CSS 类名 |
|
||||
| bodyClassName | `string` | | 内容区域 CSS 类名 |
|
||||
| title | [SchemaNode](../../types/schemanode) | | 标题 |
|
||||
| controls | Array<[表单项](./formitem)> | | 表单项集合 |
|
||||
| mode | `string` | | 展示默认，同 [Form](./form/index) 中的模式 |
|
||||
| collapsable | `boolean` | `false` | 配置是否可折叠 |
|
||||
| collapsed | `booelan` | | 展示默认，同 [Form](./form/index) 中的模式 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: File 文件上传
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: File
|
||||
icon:
|
||||
icon:
|
||||
order: 21
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了。
|
||||
@ -80,31 +81,25 @@ order: 21
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| reciever | [API](../types-api) | | 上传文件接口 |
|
||||
| accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` |
|
||||
| asBase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 |
|
||||
| asBlob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 |
|
||||
| maxSize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`KB` |
|
||||
| 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) |
|
||||
| delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |
|
||||
| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |
|
||||
| stateTextMap | [stateTextMap](./stateTextMap) | ` { init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 |
|
||||
| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 |
|
||||
| downloadUrl | `boolean`或`string` | `""` | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 |
|
||||
| useChunk | `boolean`或`"auto"` | `"auto"` | amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 |
|
||||
| chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 |
|
||||
| startChunkApi | [API](../types-api) | | startChunkApi |
|
||||
| chunkApi | [API](../types-api) | | chunkApi |
|
||||
| finishChunkApi | [API](../types-api) | | finishChunkApi |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| reciever | [API](../../types/api) | | 上传文件接口 |
|
||||
| accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` |
|
||||
| asBase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 |
|
||||
| asBlob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 |
|
||||
| maxSize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`KB` |
|
||||
| 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) |
|
||||
| delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |
|
||||
| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |
|
||||
| stateTextMap | [stateTextMap](./stateTextMap) | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 |
|
||||
| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 |
|
||||
| downloadUrl | `boolean`或`string` | `""` | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 |
|
||||
| useChunk | `boolean`或`"auto"` | `"auto"` | amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 |
|
||||
| chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 |
|
||||
| startChunkApi | [API](../../types/api) | | startChunkApi |
|
||||
| chunkApi | [API](../../types/api) | | chunkApi |
|
||||
| finishChunkApi | [API](../../types/api) | | finishChunkApi |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: FormItem 普通表单项
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Formula 普通表单项
|
||||
icon:
|
||||
icon:
|
||||
order: 1
|
||||
---
|
||||
|
||||
**表单项** 是组成一个表单的基本单位，它具有的一些特性会帮助我们更好地实现表单操作。
|
||||
|
||||
> 所有派生自`FormItem`的组件，都具有`FormItem`的特性。
|
||||
@ -27,6 +28,7 @@ order: 1
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
- `name`: **必填属性**，标识表单数据域中，当前表单项值的`key`
|
||||
- `type`: **必填属性**，标识表单项类型
|
||||
- `label`: 标识表单项的标签
|
||||
@ -162,7 +164,7 @@ order: 1
|
||||
|
||||
##### 通过条件配置是否禁用
|
||||
|
||||
你也通过[表达式](../expression)配置`disabledOn`，来实现在某个条件下禁用当前表单项.
|
||||
你也通过[表达式](../../concepts/expression)配置`disabledOn`，来实现在某个条件下禁用当前表单项.
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -216,7 +218,7 @@ order: 1
|
||||
|
||||
##### 通过条件配置显隐
|
||||
|
||||
你也通过[表达式](../expression)配置`hiddenOn`，来实现在某个条件下禁用当前表单项.
|
||||
你也通过[表达式](../../concepts/expression)配置`hiddenOn`，来实现在某个条件下禁用当前表单项.
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -532,7 +534,7 @@ amis 会有默认的报错信息，如果你想自定义校验信息，配置`va
|
||||
}
|
||||
```
|
||||
|
||||
点击提交，api接口返回中，需要在errors变量中，返回某个表单项的报错信息，`key`值为该表单项的`name`值。
|
||||
点击提交，api 接口返回中，需要在 errors 变量中，返回某个表单项的报错信息，`key`值为该表单项的`name`值。
|
||||
|
||||
如上，接口返回的格式如下，提交后，`test2`表达项会显示报错信息
|
||||
|
||||
@ -547,31 +549,24 @@ amis 会有默认的报错信息，如果你想自定义校验信息，配置`va
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------- | ------------------------------ | ------ | ---------------------------------------------------------- |
|
||||
| type | `string` | | 指定表单项类型 |
|
||||
| className | `string` | | 表单最外层类名 |
|
||||
| inputClassName | `string` | | 表单控制器类名 |
|
||||
| labelClassName | `string` | | label 的类名 |
|
||||
| name | `string` | | 字段名，指定该表单项提交时的 key |
|
||||
| label | [模板](../template) 或 `false` | | 表单项标签 |
|
||||
| description | [模板](../template) | | 表单项描述 |
|
||||
| placeholder | `string` | | 表单项描述 |
|
||||
| inline | `boolean` | | 是否为 内联 模式 |
|
||||
| submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 |
|
||||
| disabled | `boolean` | | 当前表单项是否是禁用状态 |
|
||||
| disabledOn | [表达式](../expression) | | 当前表单项是否禁用的条件 |
|
||||
| visible | [表达式](../expression) | | 当前表单项是否禁用的条件 |
|
||||
| visibleOn | [表达式](../expression) | | 当前表单项是否禁用的条件 |
|
||||
| required | `boolean` | | 是否为必填。 |
|
||||
| requiredOn | [表达式](../expression) | | 过[表达式](../Types.md#表达式)来配置当前表单项是否为必填。 |
|
||||
| validations | [表达式](../expression) | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------- | ----------------------------------- | ------ | ---------------------------------------------------------- |
|
||||
| type | `string` | | 指定表单项类型 |
|
||||
| className | `string` | | 表单最外层类名 |
|
||||
| inputClassName | `string` | | 表单控制器类名 |
|
||||
| labelClassName | `string` | | label 的类名 |
|
||||
| name | `string` | | 字段名，指定该表单项提交时的 key |
|
||||
| label | [模板](../template) 或 `false` | | 表单项标签 |
|
||||
| description | [模板](../template) | | 表单项描述 |
|
||||
| placeholder | `string` | | 表单项描述 |
|
||||
| inline | `boolean` | | 是否为 内联 模式 |
|
||||
| submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 |
|
||||
| disabled | `boolean` | | 当前表单项是否是禁用状态 |
|
||||
| disabledOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 |
|
||||
| visible | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 |
|
||||
| visibleOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 |
|
||||
| required | `boolean` | | 是否为必填。 |
|
||||
| requiredOn | [表达式](../../concepts/expression) | | 过[表达式](../Types.md#表达式)来配置当前表单项是否为必填。 |
|
||||
| validations | [表达式](../../concepts/expression) | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Formula 公式
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Formula
|
||||
icon:
|
||||
icon:
|
||||
order: 22
|
||||
---
|
||||
|
||||
@ -128,7 +128,7 @@ order: 22
|
||||
```
|
||||
|
||||
> 为什么设置`id`而不是设置`name`?
|
||||
>
|
||||
>
|
||||
> 因为`name`值已经用来设置目标变量名了，这个表单项肯定已经存在了，所以不是唯一了，不能够被按钮指定。
|
||||
|
||||
## 条件应用
|
||||
@ -177,16 +177,11 @@ order: 22
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | ----------------------- | ------ | -------------------------------------------------------------------------------------------------------------- |
|
||||
| name | `string` | | 需要应用的表单项`name`值，公式结果将作用到此处指定的变量中去。 |
|
||||
| formula | [表达式](../expression) | | 应用的公式 |
|
||||
| condition | [表达式](../expression) | | 公式作用条件 |
|
||||
| initSet | `boolean` | `true` | 初始化时是否设置 |
|
||||
| autoSet | `boolean` | `true` | 观察公式结果，如果计算结果有变化，则自动应用到变量上 |
|
||||
| id | `boolean` | `true` | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoSet` 为 false 时用来手动触发 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | ----------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------- |
|
||||
| name | `string` | | 需要应用的表单项`name`值，公式结果将作用到此处指定的变量中去。 |
|
||||
| formula | [表达式](../../concepts/expression) | | 应用的公式 |
|
||||
| condition | [表达式](../../concepts/expression) | | 公式作用条件 |
|
||||
| initSet | `boolean` | `true` | 初始化时是否设置 |
|
||||
| autoSet | `boolean` | `true` | 观察公式结果，如果计算结果有变化，则自动应用到变量上 |
|
||||
| id | `boolean` | `true` | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoSet` 为 false 时用来手动触发 |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Grid 网格
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Grid
|
||||
icon:
|
||||
icon:
|
||||
order: 23
|
||||
---
|
||||
|
||||
@ -49,39 +49,33 @@ order: 23
|
||||
|
||||
## 属性表
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------------------- | -------------------------------- | -------- | -------------------------------------------------------------- |
|
||||
| type | `string` | `"grid"` | 指定为 Grid 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| columns | `Array` | | 列集合 |
|
||||
| columns[x] | [SchemaNode](./types-schemanode) | | 成员可以是其他渲染器 |
|
||||
| columns[x].controls | Array<[表单项](./formitem)> | | 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合 |
|
||||
| columns[x].columnClassName | `int` | | 配置列的 `className` |
|
||||
| columns[x].xs | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].xsHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].xsOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].xsPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].xsPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].sm | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].smHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].smOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].smPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].smPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].md | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].mdHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].mdOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].mdPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].mdPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].lg | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].lgHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].lgOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].lgPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].lgPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| -------------------------- | --------------------------------- | -------- | -------------------------------------------------------------- |
|
||||
| type | `string` | `"grid"` | 指定为 Grid 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| columns | `Array` | | 列集合 |
|
||||
| columns[x] | [SchemaNode](../types/schemanode) | | 成员可以是其他渲染器 |
|
||||
| columns[x].controls | Array<[表单项](./formitem)> | | 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合 |
|
||||
| columns[x].columnClassName | `int` | | 配置列的 `className` |
|
||||
| columns[x].xs | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].xsHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].xsOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].xsPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].xsPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].sm | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].smHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].smOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].smPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].smPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].md | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].mdHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].mdOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].mdPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].mdPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].lg | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].lgHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].lgOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].lgPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].lgPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
|
||||
更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
---
|
||||
title: Group 表单项组
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Group
|
||||
icon:
|
||||
icon:
|
||||
order: 24
|
||||
---
|
||||
|
||||
表单项，默认都是一行显示一个，Group组件用于在一行展示多个表单项
|
||||
表单项，默认都是一行显示一个，Group 组件用于在一行展示多个表单项
|
||||
|
||||
## 基本用法
|
||||
|
||||
@ -45,7 +45,7 @@ order: 24
|
||||
|
||||
## 展示
|
||||
|
||||
可以给`group`组件设置`mode`调整展示模式，用法同 [Form 展示](../form#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA)
|
||||
可以给`group`组件设置`mode`调整展示模式，用法同 [Form 展示](../form/index#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA)
|
||||
|
||||
下面`group`我们配置了`"mode": "horizontal"`，观察显示情况
|
||||
|
||||
@ -156,13 +156,8 @@ order: 24
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- |
|
||||
| className | `string` | | CSS 类名 |
|
||||
| label | `string` | | group的标签 |
|
||||
| label | `string` | | group 的标签 |
|
||||
| controls | Array<[表单项](./formitem)> | | 表单项集合 |
|
||||
| mode | `string` | | 展示默认，同 [Form](./form) 中的模式 |
|
||||
| mode | `string` | | 展示默认，同 [Form](./form/index) 中的模式 |
|
||||
| gap | `string` | | 表单项之间的间距，可选： |
|
||||
| direction | `string` | `"horizontal"` | 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal` |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: HBox
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: HBox
|
||||
icon:
|
||||
icon:
|
||||
order: 25
|
||||
---
|
||||
|
||||
@ -42,20 +42,15 @@ order: 25
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------- | ------------------------- | ------ | ---------------------------------------- |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------- | ------------------------ | ------ | ---------------------------------------- |
|
||||
| columns | Array<[Column](columns)> | | 列内容。每个 column 为一个独立的渲染器。 |
|
||||
|
||||
### Column 属性
|
||||
|
||||
除了 [SchemaNode](../types-schemanode) 支持属性以外，还支持以下几种属性
|
||||
除了 [SchemaNode](../../types/schemanode) 支持属性以外，还支持以下几种属性
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------------------------- | ------ | ---------------------------------------------------------------------------- |
|
||||
| columnClassName | `string` | | 配置列的 CSS 类名 |
|
||||
| controls | Array<[表单项](./formitem)> | | 表单项数组，如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
---
|
||||
title: Hidden 隐藏字段
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Hidden 隐藏字段
|
||||
icon:
|
||||
icon:
|
||||
order: 26
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
默认表单提交，在没有 [自定义API请求数据](../types-api#%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE) 的情况下，只会发送 `controls` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件
|
||||
默认表单提交，在没有 [自定义 API 请求数据](../../types/api#%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE) 的情况下，只会发送 `controls` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -36,7 +36,3 @@ order: 26
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Image 图片
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Image
|
||||
icon:
|
||||
icon:
|
||||
order: 27
|
||||
---
|
||||
|
||||
图片格式输入，默认 amis 会直接存储在 FEX 的 hiphoto 里面，提交到 form 是直接的图片 url。
|
||||
|
||||
## 基本用法
|
||||
@ -73,7 +74,7 @@ order: 27
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- |
|
||||
| reciever | [API](../types-api) | | 上传文件接口 |
|
||||
| reciever | [API](../../types/api) | | 上传文件接口 |
|
||||
| accept | `string` | `text/plain` | 默认只支持`image/jpeg, image/jpg, image/png, image/gif`，要支持其他类型，请配置此属性为图片后缀`.xxx` |
|
||||
| maxSize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`KB` |
|
||||
| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 |
|
||||
@ -99,8 +100,3 @@ order: 27
|
||||
| maxWidth | `number` | | 限制图片最大宽度。 |
|
||||
| maxHeight | `number` | | 限制图片最大高度。 |
|
||||
| aspectRatio | `number` | | 限制图片宽高比，格式为浮点型数字，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率，请设置空字符串。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
---
|
||||
title: Form 表单
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Form 表单
|
||||
icon:
|
||||
icon:
|
||||
order: 24
|
||||
---
|
||||
|
||||
表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据。
|
||||
|
||||
## 基本用法
|
||||
|
||||
最基本的用法是配置 [表单项](./form/formitem) 和 提交接口`api`。
|
||||
最基本的用法是配置 [表单项](./form/index/formitem) 和 提交接口`api`。
|
||||
|
||||
如下我们配置姓名和邮箱表单项，并可以填写数据并提交给接口`/api/mock2/form/saveForm`。
|
||||
|
||||
@ -276,7 +277,7 @@ Form 默认会在底部渲染一个提交按钮，用于执行表单的提交行
|
||||
|
||||
#### 配置若干自定义按钮
|
||||
|
||||
同样，你可以通过actions属性，配置任意你想要的行为按钮。
|
||||
同样，你可以通过 actions 属性，配置任意你想要的行为按钮。
|
||||
|
||||
```schema:height="330" scope="body"
|
||||
{
|
||||
@ -447,7 +448,7 @@ Form 支持轮训初始化接口，步骤如下：
|
||||
}
|
||||
```
|
||||
|
||||
当你需要配置特定的请求方式，请求体，`header`时，使用对象类型api配置，并使用 数据映射 进行数据配置。下面示例我们更改了请求方法为`PUT`，并在原提交数据的基础上添加一个字段`"_from"`。更多用法查看 [API文档](https://suda.bce.baidu.com/docs/api) 和 [数据映射](https://suda.bce.baidu.com/docs/data-mapping)文档
|
||||
当你需要配置特定的请求方式，请求体，`header`时，使用对象类型 api 配置，并使用 数据映射 进行数据配置。下面示例我们更改了请求方法为`PUT`，并在原提交数据的基础上添加一个字段`"_from"`。更多用法查看 [API 文档](../../types/api) 和 [数据映射](../../concepts/data-mapping)文档
|
||||
|
||||
```schema:height="330" scope="body"
|
||||
{
|
||||
@ -573,7 +574,7 @@ Form 支持轮训初始化接口，步骤如下：
|
||||
|
||||
默认表单是可以获取到完整数据链中的数据的，但是该默认行为不适用于所有场景，例如：
|
||||
|
||||
在CRUD的列表项中配置弹框，弹框中有一个表单，则该表单项中所有的同`name`表单项都会根据上层`crud`的行数据进行初始化，如果你是实现编辑的功能那并没有是什么问题，但是如果你是新建功能，那么这将不符合你的预期，你可以手动设置`"canAccessSuperData": false`来关闭该行为
|
||||
在 CRUD 的列表项中配置弹框，弹框中有一个表单，则该表单项中所有的同`name`表单项都会根据上层`crud`的行数据进行初始化，如果你是实现编辑的功能那并没有是什么问题，但是如果你是新建功能，那么这将不符合你的预期，你可以手动设置`"canAccessSuperData": false`来关闭该行为
|
||||
|
||||
## 提交后行为
|
||||
|
||||
@ -667,7 +668,7 @@ Form 支持轮训初始化接口，步骤如下：
|
||||
|
||||
上例中`form`提交成功后，会触发`name`为`my_service`的`Service`组件重新请求初始化接口
|
||||
|
||||
上面示例是一种[组件间联动](https://suda.bce.baidu.com/docs/linkage#%E7%BB%84%E4%BB%B6%E9%97%B4%E8%81%94%E5%8A%A8)
|
||||
上面示例是一种[组件间联动](../concepts/linkage#%E7%BB%84%E4%BB%B6%E9%97%B4%E8%81%94%E5%8A%A8)
|
||||
|
||||
### 将数据域发送给目标组件
|
||||
|
||||
@ -719,7 +720,7 @@ Form 支持轮训初始化接口，步骤如下：
|
||||
|
||||
第一个表单在提交时，会将它的表单数据域数据发送给`detailForm`表单，触发`detailForm`的初始化接口联动，重新请求接口更新数据域，并更新关键字表单项。
|
||||
|
||||
上面示例组合使用了 [组件间联动](https://suda.bce.baidu.com/docs/linkage#%E7%BB%84%E4%BB%B6%E9%97%B4%E8%81%94%E5%8A%A8) 和 [接口联动](https://suda.bce.baidu.com/docs/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)
|
||||
上面示例组合使用了 [组件间联动](../concepts/linkage#%E7%BB%84%E4%BB%B6%E9%97%B4%E8%81%94%E5%8A%A8) 和 [接口联动](../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)
|
||||
|
||||
## 持久化保存表单项数据
|
||||
|
||||
@ -730,6 +731,7 @@ Form 支持轮训初始化接口，步骤如下：
|
||||
## 修改表单项变化方式
|
||||
|
||||
@todo
|
||||
|
||||
- lazyChange
|
||||
- formLazyChange
|
||||
|
||||
@ -779,8 +781,3 @@ Form 支持轮训初始化接口，步骤如下：
|
||||
| persistData | `boolean` | `true` | 指定表单是否开启本地缓存 |
|
||||
| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 |
|
||||
| name | `string` | | 设置一个名字后，方便其他组件与其通信 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: List 列表
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: List
|
||||
icon:
|
||||
icon:
|
||||
order: 29
|
||||
---
|
||||
|
||||
@ -77,18 +77,13 @@ order: 29
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | -------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#%E5%A4%9A%E9%80%89-multiple) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| multiple | `boolean` | `false` | [多选](./options#%E5%A4%9A%E9%80%89-multiple) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Matrix 矩阵
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Matrix
|
||||
icon:
|
||||
icon:
|
||||
order: 30
|
||||
---
|
||||
|
||||
矩阵类型的输入框。
|
||||
|
||||
## 基本用法
|
||||
@ -80,7 +81,7 @@ order: 30
|
||||
|
||||
## 动态选项
|
||||
|
||||
可以配置source渲染动态选项
|
||||
可以配置 source 渲染动态选项
|
||||
|
||||
```schema:height="350" scope="body"
|
||||
{
|
||||
@ -156,11 +157,9 @@ order: 30
|
||||
}
|
||||
```
|
||||
|
||||
### column 模式
|
||||
|
||||
|
||||
### column模式
|
||||
|
||||
默认为column模式，即每列只能单选某个单元格
|
||||
默认为 column 模式，即每列只能单选某个单元格
|
||||
|
||||
```schema:height="350" scope="body"
|
||||
{
|
||||
@ -194,9 +193,9 @@ order: 30
|
||||
}
|
||||
```
|
||||
|
||||
### cell模式
|
||||
### cell 模式
|
||||
|
||||
cell模式，指全部选项中只能单选某个单元格
|
||||
cell 模式，指全部选项中只能单选某个单元格
|
||||
|
||||
```schema:height="350" scope="body"
|
||||
{
|
||||
@ -231,9 +230,9 @@ cell模式，指全部选项中只能单选某个单元格
|
||||
}
|
||||
```
|
||||
|
||||
### row模式
|
||||
### row 模式
|
||||
|
||||
row模式，每行只能单选某个单元格
|
||||
row 模式，每行只能单选某个单元格
|
||||
|
||||
```schema:height="350" scope="body"
|
||||
{
|
||||
@ -272,16 +271,11 @@ row模式，每行只能单选某个单元格
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| columns | `Array<column>` | | 列信息，数组中 `label` 字段是必须给出的 |
|
||||
| rows | `Array<row>` | | 行信息， 数组中 `label` 字段是必须给出的 |
|
||||
| rowLabel | `string` | | 行标题说明 |
|
||||
| source | [API](../types-api) | | Api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 |
|
||||
| multiple | `boolean` | `true` | 是否多选 |
|
||||
| singleSelectMode | `string` | `"column"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ---------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| columns | `Array<column>` | | 列信息，数组中 `label` 字段是必须给出的 |
|
||||
| rows | `Array<row>` | | 行信息， 数组中 `label` 字段是必须给出的 |
|
||||
| rowLabel | `string` | | 行标题说明 |
|
||||
| source | [API](../../types/api) | | Api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 |
|
||||
| multiple | `boolean` | `true` | 是否多选 |
|
||||
| singleSelectMode | `string` | `"column"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: NestedSelect 级联选择器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: NestedSelect 级联选择器
|
||||
icon:
|
||||
icon:
|
||||
order: 31
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
@ -227,21 +228,16 @@ order: 31
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | -------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| delimeter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| cascade | `boolean` | `false` | 设置 `true`时，当选中父节点时不自动选择子节点。 |
|
||||
| withChildren | `boolean` | `false` | 设置 `true`时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 |
|
||||
| searchPromptText | `string` | `"输入内容进行检索"` | 搜索框占位文本 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| delimeter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| cascade | `boolean` | `false` | 设置 `true`时，当选中父节点时不自动选择子节点。 |
|
||||
| withChildren | `boolean` | `false` | 设置 `true`时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 |
|
||||
| searchPromptText | `string` | `"输入内容进行检索"` | 搜索框占位文本 |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Options 选择器表单项
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Options 选择器表单项
|
||||
icon:
|
||||
icon:
|
||||
order: 2
|
||||
---
|
||||
|
||||
@ -101,7 +101,6 @@ order: 2
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
##### 简单格式
|
||||
|
||||
也可以配置简单的字符串或数字数组，此时默认`label`和`value`保持一致
|
||||
@ -125,7 +124,7 @@ order: 2
|
||||
|
||||
### 通过数据域中变量配置
|
||||
|
||||
你也可以配置`source`属性，利用 [数据映射](../data-mapping)，获取当前数据链中的变量
|
||||
你也可以配置`source`属性，利用 [数据映射](.../concepts/data-mapping)，获取当前数据链中的变量
|
||||
|
||||
```schema:height="260" scope="body"
|
||||
{
|
||||
@ -157,11 +156,11 @@ order: 2
|
||||
}
|
||||
```
|
||||
|
||||
上例中，我们给select组件，配置`"source": "${items}"`，获取了当前数据域中的`items`变量作为选项组。
|
||||
上例中，我们给 select 组件，配置`"source": "${items}"`，获取了当前数据域中的`items`变量作为选项组。
|
||||
|
||||
### 远程拉取
|
||||
|
||||
除了可以通过数据映射获取当前数据域中的变量以外，`source`还支持配置接口，格式为 [API](../types-api)，用于动态返回选项组。
|
||||
除了可以通过数据映射获取当前数据域中的变量以外，`source`还支持配置接口，格式为 [API](../../types/api)，用于动态返回选项组。
|
||||
|
||||
```schema:height="260" scope="body"
|
||||
{
|
||||
@ -177,28 +176,27 @@ order: 2
|
||||
}
|
||||
```
|
||||
|
||||
远程拉取接口时，返回的数据结构除了需要满足 [amis接口要求的基本数据结构](../types-api#%E6%8E%A5%E5%8F%A3%E8%BF%94%E5%9B%9E%E6%A0%BC%E5%BC%8F-%E9%87%8D%E8%A6%81-) 以外，必须用`"options"`作为选项组的`key`值，如下
|
||||
远程拉取接口时，返回的数据结构除了需要满足 [amis 接口要求的基本数据结构](../../types/api#%E6%8E%A5%E5%8F%A3%E8%BF%94%E5%9B%9E%E6%A0%BC%E5%BC%8F-%E9%87%8D%E8%A6%81-) 以外，必须用`"options"`作为选项组的`key`值，如下
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
|
||||
// 必须用 options 作为选项组的 key 值
|
||||
"options": [
|
||||
{
|
||||
"label":"A",
|
||||
"value":"a"
|
||||
},
|
||||
{
|
||||
"label":"B",
|
||||
"value":"b"
|
||||
},
|
||||
{
|
||||
"label":"C",
|
||||
"value":"c"
|
||||
}
|
||||
{
|
||||
"label": "A",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "B",
|
||||
"value": "b"
|
||||
},
|
||||
{
|
||||
"label": "C",
|
||||
"value": "c"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -255,18 +253,18 @@ order: 2
|
||||
"data": {
|
||||
"value": "b", // 这样就会自动选中b选项
|
||||
"options": [
|
||||
{
|
||||
"label":"A",
|
||||
"value":"a"
|
||||
},
|
||||
{
|
||||
"label":"B",
|
||||
"value":"b"
|
||||
},
|
||||
{
|
||||
"label":"C",
|
||||
"value":"c"
|
||||
}
|
||||
{
|
||||
"label": "A",
|
||||
"value": "a"
|
||||
},
|
||||
{
|
||||
"label": "B",
|
||||
"value": "b"
|
||||
},
|
||||
{
|
||||
"label": "C",
|
||||
"value": "c"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -518,7 +516,7 @@ order: 2
|
||||
|
||||
当你通过`joinValues`调整选择器表单项的数据结构后，设置默认值时，格式也要和设置的数据结构保持一致
|
||||
|
||||
例如下面这个例子，当你给`select`设置了`"joinValues": false`时，选中B选项，则该表单项值为`{"label":"B","value":"b"}`，如果你想要默认选中某一项，则也需要设置`value`为完整的对象：`{"label":"B","value":"b"}`
|
||||
例如下面这个例子，当你给`select`设置了`"joinValues": false`时，选中 B 选项，则该表单项值为`{"label":"B","value":"b"}`，如果你想要默认选中某一项，则也需要设置`value`为完整的对象：`{"label":"B","value":"b"}`
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -555,7 +553,7 @@ order: 2
|
||||
|
||||
## 提取多选值 extractValue
|
||||
|
||||
当`"joinValues": false`时，默认会将选中的所有选项组成的对象数组，作为表单项的值，如果你想只抽取选项中的value值，拼成新的数组，那么可以配置`"extractValue": true`
|
||||
当`"joinValues": false`时，默认会将选中的所有选项组成的对象数组，作为表单项的值，如果你想只抽取选项中的 value 值，拼成新的数组，那么可以配置`"extractValue": true`
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -594,7 +592,7 @@ order: 2
|
||||
|
||||
当你通过`joinValues`和`extractValue`调整选择器表单项的数据结构后，设置默认值时，格式也要和设置的数据结构保持一致
|
||||
|
||||
例如下面这个例子，当你给`select`设置了`"joinValues": false`和`"extractValue": true`时，选中A、B选项，则该表单项值为`["a", "b"]`，如果你想要默认选中某一项，则也需要设置`value`为同样格式：`["a", "b"]`
|
||||
例如下面这个例子，当你给`select`设置了`"joinValues": false`和`"extractValue": true`时，选中 A、B 选项，则该表单项值为`["a", "b"]`，如果你想要默认选中某一项，则也需要设置`value`为同样格式：`["a", "b"]`
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -653,7 +651,7 @@ order: 2
|
||||
|
||||
默认渲染选项组，会获取每一项中的`label`变量作为展示文本，如果你的选中项中没有`label`字段，可能会有显示问题
|
||||
|
||||
例如下例中，options中只有`text`和`value`字段而没有value字段，这时点开下拉框，你会发现选项无法正常显示。
|
||||
例如下例中，options 中只有`text`和`value`字段而没有 value 字段，这时点开下拉框，你会发现选项无法正常显示。
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -720,7 +718,7 @@ order: 2
|
||||
|
||||
默认渲染选项组，会获取每一项中的`value`变量作为表单项值，如果你的选中项中没有`value`字段，将会无法选中
|
||||
|
||||
例如下例中，options中只有`label`和`val`字段而没有`value`字段，这时点开下拉框，你会发现选项无法正常选中。
|
||||
例如下例中，options 中只有`label`和`val`字段而没有`value`字段，这时点开下拉框，你会发现选项无法正常选中。
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -931,7 +929,7 @@ order: 2
|
||||
```
|
||||
|
||||
> 配置`addApi`实际上将该配置值设置给该表单的`api`属性。
|
||||
>
|
||||
>
|
||||
> 如果同时配置了`source`和`addApi`，添加选项成功后会重新获取请求`source`接口
|
||||
|
||||
## 编辑选项
|
||||
@ -1078,7 +1076,7 @@ order: 2
|
||||
```
|
||||
|
||||
> 配置`editApi`实际上将该配置值设置给编辑表单的`api`属性。
|
||||
>
|
||||
>
|
||||
> 如果同时配置了`source`和`editApi`，添加选项成功后会重新获取请求`source`接口
|
||||
|
||||
## 删除选项
|
||||
@ -1126,7 +1124,7 @@ order: 2
|
||||
|
||||
## 自动填充 autoFill
|
||||
|
||||
一些选择器组件，支持配置`autoFill`，将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，**只在单选时有效**，支持[数据映射](../data-mapping)
|
||||
一些选择器组件，支持配置`autoFill`，将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，**只在单选时有效**，支持[数据映射](.../concepts/data-mapping)
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -1168,17 +1166,12 @@ order: 2
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | -------------------------------- | --------- | ---------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | 选项组，供用户选择 |
|
||||
| source | `string`或 [API](../types-api) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置API对象 |
|
||||
| multiple | `boolean` | `false` | 是否多选 |
|
||||
| labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 |
|
||||
| valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 |
|
||||
| joinValues | `boolean` | `true` | 是否拼接`value`值 |
|
||||
| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | --------------------------------- | --------- | ---------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | 选项组，供用户选择 |
|
||||
| source | `string`或 [API](../../types/api) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |
|
||||
| multiple | `boolean` | `false` | 是否多选 |
|
||||
| labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 |
|
||||
| valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 |
|
||||
| joinValues | `boolean` | `true` | 是否拼接`value`值 |
|
||||
| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Panel 面板
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Panel
|
||||
icon:
|
||||
icon:
|
||||
order: 34
|
||||
---
|
||||
|
||||
还是为了布局，可以把一部分 [FormItem](./FormItem.md) 合并到一个 panel 里面单独展示。
|
||||
|
||||
## 基本用法
|
||||
@ -38,24 +39,18 @@ order: 34
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------------------------------- | ------ | ------------------------------------------------------------------- |
|
||||
| title | `string` | | panel 标题 |
|
||||
| body | [SchemaNode](../types-schemanode) | | 内容区 |
|
||||
| bodyClassName | `string` | | body 的 className |
|
||||
| footer | [SchemaNode](../types-schemanode) | | 底部区 |
|
||||
| footerClassName | `string` | | footer 的 className |
|
||||
| controls | Array<表单项> | | `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 |
|
||||
|
||||
- `title` panel 标题
|
||||
- `body` [Container](../Types.md#container) 可以是其他渲染模型。
|
||||
- `bodyClassName` body 的 className.
|
||||
- `footer` [Container](../Types.md#container) 可以是其他渲染模型。
|
||||
- `footerClassName` footer 的 className.
|
||||
- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | ------------------------------------ | ------ | ------------------------------------------------------------------- |
|
||||
| title | `string` | | panel 标题 |
|
||||
| body | [SchemaNode](../../types/schemanode) | | 内容区 |
|
||||
| bodyClassName | `string` | | body 的 className |
|
||||
| footer | [SchemaNode](../../types/schemanode) | | 底部区 |
|
||||
| footerClassName | `string` | | footer 的 className |
|
||||
| controls | Array<表单项> | | `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 |
|
||||
|
||||
- `title` panel 标题
|
||||
- `body` [Container](../Types.md#container) 可以是其他渲染模型。
|
||||
- `bodyClassName` body 的 className.
|
||||
- `footer` [Container](../Types.md#container) 可以是其他渲染模型。
|
||||
- `footerClassName` footer 的 className.
|
||||
- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Picker 列表选择器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Picker
|
||||
icon:
|
||||
icon:
|
||||
order: 35
|
||||
---
|
||||
|
||||
列表选取。可以静态数据，或者通过接口拉取动态数据。
|
||||
|
||||
## 基本用法
|
||||
@ -265,7 +266,7 @@ order: 35
|
||||
|
||||
## 内嵌模式
|
||||
|
||||
可以配置`"embed": true`，实现内嵌picker
|
||||
可以配置`"embed": true`，实现内嵌 picker
|
||||
|
||||
```schema:height="900" scope="body"
|
||||
{
|
||||
@ -492,22 +493,17 @@ order: 35
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | -------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| multiple | `boolean` | | 是否为多选。 |
|
||||
| delimeter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| modalMode | `string` | `"dialog"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 |
|
||||
| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 [CRUD](../crud) |
|
||||
| embed | `boolean` | `false` | 是否使用内嵌模式 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | --------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| multiple | `boolean` | | 是否为多选。 |
|
||||
| delimeter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| modalMode | `string` | `"dialog"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 |
|
||||
| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 [CRUD](../crud) |
|
||||
| embed | `boolean` | `false` | 是否使用内嵌模式 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Rich-Text 富文本编辑器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Rich-Text
|
||||
icon:
|
||||
icon:
|
||||
order: 47
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="600" scope="body"
|
||||
@ -23,30 +24,30 @@ order: 47
|
||||
}
|
||||
```
|
||||
|
||||
## 配置buttons
|
||||
## 配置 buttons
|
||||
|
||||
```js
|
||||
[
|
||||
'paragraphFormat',
|
||||
'quote',
|
||||
'color',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strikeThrough',
|
||||
'|',
|
||||
'formatOL',
|
||||
'formatUL',
|
||||
'align',
|
||||
'|',
|
||||
'insertLink',
|
||||
'insertImage',
|
||||
'insertTable',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'html',
|
||||
'paragraphFormat',
|
||||
'quote',
|
||||
'color',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'strikeThrough',
|
||||
'|',
|
||||
'formatOL',
|
||||
'formatUL',
|
||||
'align',
|
||||
'|',
|
||||
'insertLink',
|
||||
'insertImage',
|
||||
'insertTable',
|
||||
'|',
|
||||
'undo',
|
||||
'redo',
|
||||
'html'
|
||||
];
|
||||
```
|
||||
|
||||
@ -54,16 +55,10 @@ order: 47
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
|
||||
| saveAsUbb | `boolean` | | 是否保存为 ubb 格式 |
|
||||
| reciever | [API](../types-api) | | 默认的图片保存 API |
|
||||
| size | `string` | | 框的大小，可设置为 `md` 或者 `lg` |
|
||||
| options | `object` | | Object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options |
|
||||
| buttons | `Array<string>` | `[ 'paragraphFormat', 'quote', 'color', ' | ', 'bold', 'italic', 'underline', 'strikeThrough', ' | ', 'formatOL', 'formatUL', 'align', ' | ', 'insertLink', 'insertImage', 'insertTable', ' | ', 'undo', 'redo', 'html' ]` | 精度，即小数点后几位 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
|
||||
| saveAsUbb | `boolean` | | 是否保存为 ubb 格式 |
|
||||
| reciever | [API](../../types/api) | | 默认的图片保存 API |
|
||||
| size | `string` | | 框的大小，可设置为 `md` 或者 `lg` |
|
||||
| options | `object` | | Object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options |
|
||||
| buttons | `Array<string>` | `[ 'paragraphFormat', 'quote', 'color', ' | ', 'bold', 'italic', 'underline', 'strikeThrough', ' | ', 'formatOL', 'formatUL', 'align', ' | ', 'insertLink', 'insertImage', 'insertTable', ' | ', 'undo', 'redo', 'html' ]` | 精度，即小数点后几位 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Select 选择器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Select 选择器
|
||||
icon:
|
||||
icon:
|
||||
order: 48
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
@ -45,31 +46,26 @@ order: 48
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | -------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | [API](../types-api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| checkAll | `boolean` | `false` | 是否支持全选 |
|
||||
| checkAllLabel | `string` | `全选` | 全选的文字 |
|
||||
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| 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](./types-api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
|
||||
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
|
||||
| editApi | [API](./types-api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
|
||||
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
|
||||
| deleteApi | [API](./types-api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | [API](../../types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| checkAll | `boolean` | `false` | 是否支持全选 |
|
||||
| checkAllLabel | `string` | `全选` | 全选的文字 |
|
||||
| defaultCheckAll | `boolean` | `false` | 默认是否全选 |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| 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](../types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
|
||||
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
|
||||
| editApi | [API](../types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
|
||||
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
|
||||
| deleteApi | [API](../types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
|
||||
| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Service 功能容器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Service
|
||||
icon:
|
||||
icon:
|
||||
order: 49
|
||||
---
|
||||
|
||||
@ -30,7 +30,7 @@ order: 49
|
||||
}
|
||||
```
|
||||
|
||||
上例中我们在`text`表单项外，嵌套一层service，用于初始化该表单项
|
||||
上例中我们在`text`表单项外，嵌套一层 service，用于初始化该表单项
|
||||
|
||||
> 一般初始化表单项是使用 form 的`initApi`配置，当你需要多个接口来初始化一个表单中的表单项时，可以考虑使用 service
|
||||
|
||||
@ -82,7 +82,7 @@ order: 49
|
||||
|
||||
Service 中的`api`和`schemaApi`都支持**接口联动**。
|
||||
|
||||
下面例子中，`数据模板`下拉框的值变化后，会触发service重新拉取api接口，从而更新数据源，变化表单项的值，更多用法查看 [接口联动](./linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)。
|
||||
下面例子中，`数据模板`下拉框的值变化后，会触发 service 重新拉取 api 接口，从而更新数据源，变化表单项的值，更多用法查看 [接口联动](../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)。
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
@ -169,9 +169,3 @@ Service 中的`api`和`schemaApi`都支持**接口联动**。
|
||||
```
|
||||
|
||||
`schemaApi` 同样支持 []()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: SubForm 子表单
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: SubForm 子表单
|
||||
icon:
|
||||
icon:
|
||||
order: 50
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
@ -75,22 +76,18 @@ order: 50
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | --------------- | --------------------------- | ------------------------------------------------------ |
|
||||
| multiple | `boolean` | `false` | 是否为多选模式 |
|
||||
| labelField | `string` | | 当值中存在这个字段，则按钮名称将使用此字段的值来展示。 |
|
||||
| btnLabel | `string` | `"设置"` | 按钮默认名称 |
|
||||
| minLength | `number` | `0` | 限制最小长度。 |
|
||||
| maxLength | `number` | `0` | 限制最大长度。 |
|
||||
| addButtonClassName | `string` | `btn-success btn-sm` | 新增按钮 CSS 类名 |
|
||||
| editButtonClassName | `string` | `btn-info btn-addon btn-sm` | 修改按钮 CSS 类名 |
|
||||
| form | [Form](../form) | | 子表单配置，同 [Form](../form) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | --------------------- | --------------------------- | ------------------------------------------------------ |
|
||||
| multiple | `boolean` | `false` | 是否为多选模式 |
|
||||
| labelField | `string` | | 当值中存在这个字段，则按钮名称将使用此字段的值来展示。 |
|
||||
| btnLabel | `string` | `"设置"` | 按钮默认名称 |
|
||||
| minLength | `number` | `0` | 限制最小长度。 |
|
||||
| maxLength | `number` | `0` | 限制最大长度。 |
|
||||
| addButtonClassName | `string` | `btn-success btn-sm` | 新增按钮 CSS 类名 |
|
||||
| editButtonClassName | `string` | `btn-info btn-addon btn-sm` | 修改按钮 CSS 类名 |
|
||||
| form | [Form](../form/index) | | 子表单配置，同 [Form](../form/index) |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Tabs 选项卡
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Tabs 选项卡
|
||||
icon:
|
||||
icon:
|
||||
order: 53
|
||||
---
|
||||
|
||||
@ -61,16 +61,11 @@ order: 53
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------------------------------- | ------ | ------------------- |
|
||||
| tabs | `Array` | | tabs 内容 |
|
||||
| toolbar | [SchemaNode](../types-schemanode) | | tabs 中的工具栏 |
|
||||
| toolbarClassName | `string` | | tabs 中工具栏的类名 |
|
||||
| tabs[x].title | `string` | | Tab 标题 |
|
||||
| tabs[x].body | [SchemaNode](../types-schemanode) | | 内容容器 |
|
||||
| tabs[x].controls | Array<[表单项](./formitem)> | | 表单项集合。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | ------------------------------------ | ------ | ------------------- |
|
||||
| tabs | `Array` | | tabs 内容 |
|
||||
| toolbar | [SchemaNode](../../types/schemanode) | | tabs 中的工具栏 |
|
||||
| toolbarClassName | `string` | | tabs 中工具栏的类名 |
|
||||
| tabs[x].title | `string` | | Tab 标题 |
|
||||
| tabs[x].body | [SchemaNode](../../types/schemanode) | | 内容容器 |
|
||||
| tabs[x].controls | Array<[表单项](./formitem)> | | 表单项集合。 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Tag 标签选择器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Tag 标签选择器
|
||||
icon:
|
||||
icon:
|
||||
order: 55
|
||||
---
|
||||
|
||||
## 基本使用
|
||||
|
||||
```schema:height="350" scope="body"
|
||||
@ -32,20 +33,15 @@ order: 55
|
||||
|
||||
除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | -------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| optionsTip | `Array<object>`或`Array<string>` | `"最近您使用的标签"` | 选项提示 |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 |
|
||||
| resetValue | `string` | `""` | 删除后设置此配置项给定的值。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| optionsTip | `Array<object>`或`Array<string>` | `"最近您使用的标签"` | 选项提示 |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 |
|
||||
| resetValue | `string` | `""` | 删除后设置此配置项给定的值。 |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Text 输入框
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Text 输入框
|
||||
icon:
|
||||
icon:
|
||||
order: 56
|
||||
---
|
||||
|
||||
@ -131,26 +131,21 @@ order: 56
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | -------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | `string`或 [API](../types-api) | | [自动补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| multiple | `boolean` | | [是否多选](./options#%E5%A4%9A%E9%80%89-multiple) |
|
||||
| delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| addOn | `addOn` | | 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。 |
|
||||
| addOn.type | `string` | | 请选择 `text` 、`button` 或者 `submit`。 |
|
||||
| addOn.label | `string` | | 文字说明 |
|
||||
| addOn.xxx | `string` | | 其他参数请参考按钮文档 |
|
||||
| trimContents | `boolean` | | 是否去除首尾空白文本。 |
|
||||
| clearable | `boolean` | | 是否可清除 |
|
||||
| resetValue | `string` | `""` | 清除后设置此配置项给定的值。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | `string`或 [API](../../types/api) | | [自动补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| multiple | `boolean` | | [是否多选](./options#%E5%A4%9A%E9%80%89-multiple) |
|
||||
| delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| addOn | `addOn` | | 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。 |
|
||||
| addOn.type | `string` | | 请选择 `text` 、`button` 或者 `submit`。 |
|
||||
| addOn.label | `string` | | 文字说明 |
|
||||
| addOn.xxx | `string` | | 其他参数请参考按钮文档 |
|
||||
| trimContents | `boolean` | | 是否去除首尾空白文本。 |
|
||||
| clearable | `boolean` | | 是否可清除 |
|
||||
| resetValue | `string` | `""` | 清除后设置此配置项给定的值。 |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: Tree 树形选择框
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Tree 树形选择框
|
||||
icon:
|
||||
icon:
|
||||
order: 59
|
||||
---
|
||||
|
||||
@ -398,7 +398,7 @@ order: 59
|
||||
|
||||
如果层级较多，也可以配置`unfoldedLevel`指定展开的层级数。
|
||||
|
||||
下例中设置`"unfoldedLevel": 1`，默认展开第1层
|
||||
下例中设置`"unfoldedLevel": 1`，默认展开第 1 层
|
||||
|
||||
```schema:height="500" scope="body"
|
||||
{
|
||||
@ -463,40 +463,35 @@ order: 59
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | -------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../types-api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | [API](../types-api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| multiple | `boolean` | `false` | 是否多选 |
|
||||
| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| 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](./types-api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
|
||||
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
|
||||
| editApi | [API](./types-api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
|
||||
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
|
||||
| deleteApi | [API](./types-api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
|
||||
| hideRoot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` |
|
||||
| rootLabel | `boolean` | `"顶级"` | 当 `hideRoot` 不为 `false` 时有用，用来设置顶级节点的文字。 |
|
||||
| showIcon | `boolean` | `true` | 是否显示图标 |
|
||||
| showRadio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 |
|
||||
| initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 |
|
||||
| unfoldedLevel | `number` | `0` | 设置默认展开的级数，只有`initiallyOpen`不是`true`时生效。 |
|
||||
| cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 |
|
||||
| withChildren | `boolean` | `false` | 选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 |
|
||||
| onlyChildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 |
|
||||
| rootCreatable | `boolean` | `false` | 是否可以创建顶级节点 |
|
||||
| rootCreateTip | `string` | `"添加一级节点"` | 创建顶级节点的悬浮提示 |
|
||||
| minLength | `number` | | 最少选中的节点数 |
|
||||
| maxLength | `number` | | 最多选中的节点数 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | --------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| options | `Array<object>`或`Array<string>` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) |
|
||||
| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) |
|
||||
| autoComplete | [API](../../types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) |
|
||||
| multiple | `boolean` | `false` | 是否多选 |
|
||||
| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) |
|
||||
| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) |
|
||||
| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) |
|
||||
| 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) |
|
||||
| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) |
|
||||
| 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](../types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) |
|
||||
| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) |
|
||||
| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) |
|
||||
| editApi | [API](../types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) |
|
||||
| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) |
|
||||
| deleteApi | [API](../types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) |
|
||||
| hideRoot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` |
|
||||
| rootLabel | `boolean` | `"顶级"` | 当 `hideRoot` 不为 `false` 时有用，用来设置顶级节点的文字。 |
|
||||
| showIcon | `boolean` | `true` | 是否显示图标 |
|
||||
| showRadio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 |
|
||||
| initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 |
|
||||
| unfoldedLevel | `number` | `0` | 设置默认展开的级数，只有`initiallyOpen`不是`true`时生效。 |
|
||||
| cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 |
|
||||
| withChildren | `boolean` | `false` | 选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 |
|
||||
| onlyChildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 |
|
||||
| rootCreatable | `boolean` | `false` | 是否可以创建顶级节点 |
|
||||
| rootCreateTip | `string` | `"添加一级节点"` | 创建顶级节点的悬浮提示 |
|
||||
| minLength | `number` | | 最少选中的节点数 |
|
||||
| maxLength | `number` | | 最多选中的节点数 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Grid 网格布局
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Grid 格线组件
|
||||
icon:
|
||||
icon:
|
||||
order: 46
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
@ -46,36 +47,31 @@ order: 46
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | -------------------------------- | -------- | ----------------------- |
|
||||
| type | `string` | `"grid"` | 指定为 Grid 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| columns | `Array` | | 列集合 |
|
||||
| columns[x] | [SchemaNode](./types-schemanode) | | 成员可以是其他渲染器 |
|
||||
| columns[x].xs | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].xsHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].xsOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].xsPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].xsPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].sm | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].smHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].smOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].smPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].smPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].md | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].mdHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].mdOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].mdPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].mdPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].lg | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].lgHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].lgOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].lgPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].lgPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | --------------------------------- | -------- | ----------------------- |
|
||||
| type | `string` | `"grid"` | 指定为 Grid 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| columns | `Array` | | 列集合 |
|
||||
| columns[x] | [SchemaNode](../types/schemanode) | | 成员可以是其他渲染器 |
|
||||
| columns[x].xs | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].xsHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].xsOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].xsPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].xsPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].sm | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].smHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].smOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].smPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].smPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].md | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].mdHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].mdOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].mdPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].mdPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
| columns[x].lg | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].lgHidden | `boolean` | | 是否隐藏 |
|
||||
| columns[x].lgOffset | `int` | | 偏移量 1 - 12 |
|
||||
| columns[x].lgPull | `int` | | 靠左的距离占比：1 - 12 |
|
||||
| columns[x].lgPush | `int` | | 靠右的距离占比： 1 - 12 |
|
||||
|
||||
更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: HBox 布局
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: HBox
|
||||
icon:
|
||||
icon:
|
||||
order: 48
|
||||
---
|
||||
|
||||
@ -48,11 +48,5 @@ order: 48
|
||||
| type | `string` | `"hbox"` | 指定为 HBox 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| columns | `Array` | | 列集合 |
|
||||
| columns[x] | [Container](./Types.md#Container) | | 成员可以是其他渲染器 |
|
||||
| columns[x] | [SchemaNode](../types/schemanode) | | 成员可以是其他渲染器 |
|
||||
| columns[x].columnClassName | `string` | `"wrapper-xs"` | 列上类名 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: List 列表
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: List
|
||||
icon:
|
||||
icon:
|
||||
order: 56
|
||||
---
|
||||
|
||||
@ -73,33 +73,25 @@ order: 56
|
||||
}
|
||||
```
|
||||
|
||||
或者你也可以使用CRUD的 [list模式](./crud#list-%E5%88%97%E8%A1%A8%E6%A8%A1%E5%BC%8F)
|
||||
或者你也可以使用 CRUD 的 [list 模式](./crud#list-%E5%88%97%E8%A1%A8%E6%A8%A1%E5%BC%8F)
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------ | -------------------------------- | --------------------- | ---------------------------------------------------------- |
|
||||
| type | `string` | | `"list"` 指定为列表展示。 |
|
||||
| title | `string` | | 标题 |
|
||||
| source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持[数据映射](./data-mapping) |
|
||||
| placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| headerClassName | `string` | `amis-list-header` | 顶部外层 CSS 类名 |
|
||||
| footerClassName | `string` | `amis-list-footer` | 底部外层 CSS 类名 |
|
||||
| listItem | `Array` | | 配置单条信息 |
|
||||
| listItem.title | [模板](./template) | | 标题 |
|
||||
| listItem.titleClassName | `string` | `h5` | 标题 CSS 类名 |
|
||||
| listItem.subTitle | [模板](./template) | | 副标题 |
|
||||
| listItem.avatar | [模板](./template) | | 图片地址 |
|
||||
| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |
|
||||
| listItem.desc | [模板](./template) | | 描述 |
|
||||
| listItem.body | `Array` 或者 [Field](./Field.md) | | 内容容器，主要用来放置 [Field](./Field.md) |
|
||||
| listItem.actions | Array<[Action](./action)> | | 按钮区域 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------ | ---------------------------- | --------------------- | -------------------------------------------------------------------- |
|
||||
| type | `string` | | `"list"` 指定为列表展示。 |
|
||||
| title | `string` | | 标题 |
|
||||
| source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持[数据映射](../concepts/data-mapping) |
|
||||
| placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| headerClassName | `string` | `amis-list-header` | 顶部外层 CSS 类名 |
|
||||
| footerClassName | `string` | `amis-list-footer` | 底部外层 CSS 类名 |
|
||||
| listItem | `Array` | | 配置单条信息 |
|
||||
| listItem.title | [模板](../concepts/template) | | 标题 |
|
||||
| listItem.titleClassName | `string` | `h5` | 标题 CSS 类名 |
|
||||
| listItem.subTitle | [模板](../concepts/template) | | 副标题 |
|
||||
| listItem.avatar | [模板](../concepts/template) | | 图片地址 |
|
||||
| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |
|
||||
| listItem.desc | [模板](../concepts/template) | | 描述 |
|
||||
| listItem.body | `Array` | | 内容容器，主要用来放置非表单项组件 |
|
||||
| listItem.actions | Array<[Action](./action)> | | 按钮区域 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Nav 导航
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Nav
|
||||
icon:
|
||||
icon:
|
||||
order: 58
|
||||
---
|
||||
|
||||
用于展示链接导航
|
||||
|
||||
## 基本用法
|
||||
@ -61,20 +62,14 @@ order: 58
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------------- | ---------------------- | -------- | -------------------------------------- |
|
||||
| type | `string` | `"nav"` | 指定为 Nav 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |
|
||||
| links | `Array` | | 链接集合 |
|
||||
| links[x].label | `string` | | 名称 |
|
||||
| links[x].to | [模板](./template) | | 链接地址 |
|
||||
| links[x].icon | `string` | | 图标 |
|
||||
| links[x].active | `boolean` | | 是否高亮 |
|
||||
| links[x].activeOn | [表达式](./expression) | | 是否高亮的条件，留空将自动分析链接地址 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------------- | -------------------------------- | ------- | -------------------------------------- |
|
||||
| type | `string` | `"nav"` | 指定为 Nav 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |
|
||||
| links | `Array` | | 链接集合 |
|
||||
| links[x].label | `string` | | 名称 |
|
||||
| links[x].to | [模板](../concepts/template) | | 链接地址 |
|
||||
| links[x].icon | `string` | | 图标 |
|
||||
| links[x].active | `boolean` | | 是否高亮 |
|
||||
| links[x].activeOn | [表达式](../concepts/expression) | | 是否高亮的条件，留空将自动分析链接地址 |
|
||||
|
||||
@ -86,7 +86,7 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
|
||||
}
|
||||
```
|
||||
|
||||
具体 API 规范查看 [API 文档](./api)。
|
||||
具体 API 规范查看 [API 文档](../types/api)。
|
||||
|
||||
## 轮训初始化接口
|
||||
|
||||
@ -128,23 +128,23 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | -------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"page"` | 指定为 Page 组件 |
|
||||
| title | [SchemaNode](./types-schemanode) | | 页面标题 |
|
||||
| subTitle | [SchemaNode](./types-schemanode) | | 页面副标题 |
|
||||
| remark | [Remark](./remark) | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 |
|
||||
| aside | [SchemaNode](./types-schemanode) | | 往页面的边栏区域加内容 |
|
||||
| toolbar | [SchemaNode](./types-schemanode) | | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 |
|
||||
| body | [SchemaNode](./types-schemanode) | | 往页面的内容区域加内容 |
|
||||
| className | `string` | | 外层 dom 类名 |
|
||||
| toolbarClassName | `string` | `v-middle wrapper text-right bg-light b-b` | Toolbar dom 类名 |
|
||||
| bodyClassName | `string` | `wrapper` | Body dom 类名 |
|
||||
| asideClassName | `string` | `w page-aside-region bg-auto` | Aside dom 类名 |
|
||||
| headerClassName | `string` | `bg-light b-b wrapper` | Header 区域 dom 类名 |
|
||||
| initApi | [API](./types-api) | | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 |
|
||||
| initFetch | `boolean` | `true` | 是否起始拉取 initApi |
|
||||
| initFetchOn | [表达式](./expression) | | 是否起始拉取 initApi, 通过表达式配置 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000) |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | [表达式](./expression) | `""` | 通过表达式来配置停止刷新的条件 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | --------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"page"` | 指定为 Page 组件 |
|
||||
| title | [SchemaNode](../types/schemanode) | | 页面标题 |
|
||||
| subTitle | [SchemaNode](../types/schemanode) | | 页面副标题 |
|
||||
| remark | [Remark](./remark) | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 |
|
||||
| aside | [SchemaNode](../types/schemanode) | | 往页面的边栏区域加内容 |
|
||||
| toolbar | [SchemaNode](../types/schemanode) | | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 |
|
||||
| body | [SchemaNode](../types/schemanode) | | 往页面的内容区域加内容 |
|
||||
| className | `string` | | 外层 dom 类名 |
|
||||
| toolbarClassName | `string` | `v-middle wrapper text-right bg-light b-b` | Toolbar dom 类名 |
|
||||
| bodyClassName | `string` | `wrapper` | Body dom 类名 |
|
||||
| asideClassName | `string` | `w page-aside-region bg-auto` | Aside dom 类名 |
|
||||
| headerClassName | `string` | `bg-light b-b wrapper` | Header 区域 dom 类名 |
|
||||
| initApi | [API](../types/api) | | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 |
|
||||
| initFetch | `boolean` | `true` | 是否起始拉取 initApi |
|
||||
| initFetchOn | [表达式](../concepts/expression) | | 是否起始拉取 initApi, 通过表达式配置 |
|
||||
| interval | `number` | `3000` | 刷新时间(最低 3000) |
|
||||
| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | [表达式](../concepts/expression) | `""` | 通过表达式来配置停止刷新的条件 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Panel 面板
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Panel
|
||||
icon:
|
||||
icon:
|
||||
order: 59
|
||||
---
|
||||
|
||||
可以把相关信息以面板的形式展示到一块。
|
||||
|
||||
## 基本用法
|
||||
@ -88,22 +89,17 @@ order: 59
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | -------------------------------- | -------------------------------------- | ------------------- |
|
||||
| type | `string` | `"panel"` | 指定为 Panel 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| headerClassName | `string` | `"panel-heading"` | header 区域的类名 |
|
||||
| footerClassName | `string` | `"panel-footer bg-light lter wrapper"` | footer 区域的类名 |
|
||||
| actionsClassName | `string` | `"panel-footer"` | actions 区域的类名 |
|
||||
| bodyClassName | `string` | `"panel-body"` | body 区域的类名 |
|
||||
| title | [SchemaNode](./types-schemanode) | | 标题 |
|
||||
| header | [SchemaNode](./types-schemanode) | | 头部容器 |
|
||||
| body | [SchemaNode](./types-schemanode) | | 内容容器 |
|
||||
| footer | [SchemaNode](./types-schemanode) | | 底部容器 |
|
||||
| affixFooter | `boolean` | | 是否固定底部容器 |
|
||||
| actions | Array<[Action](./action-button)> | | 按钮区域 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ---------------- | --------------------------------- | -------------------------------------- | ------------------- |
|
||||
| type | `string` | `"panel"` | 指定为 Panel 渲染器 |
|
||||
| className | `string` | `"panel-default"` | 外层 Dom 的类名 |
|
||||
| headerClassName | `string` | `"panel-heading"` | header 区域的类名 |
|
||||
| footerClassName | `string` | `"panel-footer bg-light lter wrapper"` | footer 区域的类名 |
|
||||
| actionsClassName | `string` | `"panel-footer"` | actions 区域的类名 |
|
||||
| bodyClassName | `string` | `"panel-body"` | body 区域的类名 |
|
||||
| title | [SchemaNode](../types/schemanode) | | 标题 |
|
||||
| header | [SchemaNode](../types/schemanode) | | 头部容器 |
|
||||
| body | [SchemaNode](../types/schemanode) | | 内容容器 |
|
||||
| footer | [SchemaNode](../types/schemanode) | | 底部容器 |
|
||||
| affixFooter | `boolean` | | 是否固定底部容器 |
|
||||
| actions | Array<[Action](./action)> | | 按钮区域 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: QRCode 二维码
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: QRCode 二维码
|
||||
icon:
|
||||
icon:
|
||||
order: 61
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
@ -17,7 +18,7 @@ order: 61
|
||||
}
|
||||
```
|
||||
|
||||
> 根据QR码国际标准，二进制模式最多可存储`2953`字节的内容（1中文汉字=2字节）
|
||||
> 根据 QR 码国际标准，二进制模式最多可存储`2953`字节的内容（1 中文汉字=2 字节）
|
||||
|
||||
## 配置背景色
|
||||
|
||||
@ -82,22 +83,15 @@ order: 61
|
||||
|
||||
```
|
||||
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | ------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"qr-code"` | 指定为 QRCode 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| qrcodeClassName | `string` | | 二维码 SVG 的类名 |
|
||||
| codeSize | `number` | `128` | 二维码的宽高大小 |
|
||||
| backgroundColor | `string` | `"#fff"` | 二维码背景色 |
|
||||
| foregroundColor | `string` | `"#000"` | 二维码前景色 |
|
||||
| level | `string` | `"L"` | 二维码复杂级别，有（'L' 'M' 'Q' 'H'）四种 |
|
||||
| value | [模板](./template) | `"https://www.baidu.com"` | 扫描二维码后显示的文本，如果要显示某个页面请输入完整 url（`"http://..."`或`"https://..."`开头），支持使用 [模板](./template) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | ---------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"qr-code"` | 指定为 QRCode 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| qrcodeClassName | `string` | | 二维码 SVG 的类名 |
|
||||
| codeSize | `number` | `128` | 二维码的宽高大小 |
|
||||
| backgroundColor | `string` | `"#fff"` | 二维码背景色 |
|
||||
| foregroundColor | `string` | `"#000"` | 二维码前景色 |
|
||||
| level | `string` | `"L"` | 二维码复杂级别，有（'L' 'M' 'Q' 'H'）四种 |
|
||||
| value | [模板](../concepts/template) | `"https://www.baidu.com"` | 扫描二维码后显示的文本，如果要显示某个页面请输入完整 url（`"http://..."`或`"https://..."`开头），支持使用 [模板](./concepts/template) |
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
---
|
||||
title: Service 功能型容器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Service
|
||||
icon:
|
||||
icon:
|
||||
order: 63
|
||||
---
|
||||
|
||||
amis 中部分组件，作为展示组件，自身没有**使用接口初始化数据域的能力**，例如：[Table](./table)、[Cards](./cards)、[List](./list)等，他们需要使用某些配置项，例如`source`，通过[数据映射](./data-mapping)功能，在当前的 **数据链** 中获取数据，并进行数据展示。
|
||||
amis 中部分组件，作为展示组件，自身没有**使用接口初始化数据域的能力**，例如：[Table](./table)、[Cards](./cards)、[List](./list)等，他们需要使用某些配置项，例如`source`，通过[数据映射](../concepts/data-mapping)功能，在当前的 **数据链** 中获取数据，并进行数据展示。
|
||||
|
||||
而`Service`组件就是专门为该类组件而生，它的功能是：：**配置初始化接口，进行数据域的初始化，然后在`Service`内容器中配置子组件，这些子组件通过数据链的方法，获取`Service`所拉取到的数据**
|
||||
|
||||
## 基本使用
|
||||
|
||||
最基本的使用，是配置初始化接口`api`，将接口返回的数据添加到自身的数据域中，以供子组件通过[数据链](./data-scope-and-chain#%E6%95%B0%E6%8D%AE%E9%93%BE)进行获取使用。
|
||||
最基本的使用，是配置初始化接口`api`，将接口返回的数据添加到自身的数据域中，以供子组件通过[数据链](./datascope-and-datachain#%E6%95%B0%E6%8D%AE%E9%93%BE)进行获取使用。
|
||||
|
||||
```schema:height="200" scope="body"
|
||||
{
|
||||
@ -85,7 +85,7 @@ amis 中部分组件，作为展示组件，自身没有**使用接口初始化
|
||||
}
|
||||
```
|
||||
|
||||
上例中service接口返回数据结构如下：
|
||||
上例中 service 接口返回数据结构如下：
|
||||
|
||||
```json
|
||||
{
|
||||
@ -218,7 +218,7 @@ amis 中部分组件，作为展示组件，自身没有**使用接口初始化
|
||||
|
||||
## 接口联动
|
||||
|
||||
`api`和`schemaApi`都支持[接口联动](./linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)
|
||||
`api`和`schemaApi`都支持[接口联动](../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)
|
||||
|
||||
```schema:height="300" scope="body"
|
||||
{
|
||||
@ -275,31 +275,24 @@ amis 中部分组件，作为展示组件，自身没有**使用接口初始化
|
||||
}
|
||||
```
|
||||
|
||||
上例可看到，变更**数据模板**的值，会触发service重新请求，并更新当前数据域中的数据
|
||||
上例可看到，变更**数据模板**的值，会触发 service 重新请求，并更新当前数据域中的数据
|
||||
|
||||
更多相关见[接口联动](./linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------- | -------------------------------- | -------------- | ----------------------------------------------------------------------------- |
|
||||
| type | `string` | `"service"` | 指定为 service 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| body | [SchemaNode](./types-schemanode) | | 内容容器 |
|
||||
| api | [api](./types-api) | | 初始化数据域接口地址 |
|
||||
| initFetch | `boolean` | | 是否默认拉取 |
|
||||
| schemaApi | [api](./types-api) | | 用来获取远程 Schema 接口地址 |
|
||||
| initFetchSchema | `boolean` | | 是否默认拉取 Schema |
|
||||
| messages | `Object` | | 消息提示覆写，默认消息读取的是接口返回的 toast 提示文字，但是在此可以覆写它。 |
|
||||
| messages.fetchSuccess | `string` | | 接口请求成功时的 toast 提示文字 |
|
||||
| messages.fetchFailed | `string` | `"初始化失败"` | 接口请求失败时 toast 提示文字 |
|
||||
| interval | `number` | | 轮训时间间隔(最低 3000) |
|
||||
| silentPolling | `boolean` | `false` | 配置轮训时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | [表达式](./expression) | | 配置停止轮训的条件 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------------- | --------------------------------- | -------------- | ----------------------------------------------------------------------------- |
|
||||
| type | `string` | `"service"` | 指定为 service 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| body | [SchemaNode](../types/schemanode) | | 内容容器 |
|
||||
| api | [api](../types/api) | | 初始化数据域接口地址 |
|
||||
| initFetch | `boolean` | | 是否默认拉取 |
|
||||
| schemaApi | [api](../types/api) | | 用来获取远程 Schema 接口地址 |
|
||||
| initFetchSchema | `boolean` | | 是否默认拉取 Schema |
|
||||
| messages | `Object` | | 消息提示覆写，默认消息读取的是接口返回的 toast 提示文字，但是在此可以覆写它。 |
|
||||
| messages.fetchSuccess | `string` | | 接口请求成功时的 toast 提示文字 |
|
||||
| messages.fetchFailed | `string` | `"初始化失败"` | 接口请求失败时 toast 提示文字 |
|
||||
| interval | `number` | | 轮训时间间隔(最低 3000) |
|
||||
| silentPolling | `boolean` | `false` | 配置轮训时是否显示加载动画 |
|
||||
| stopAutoRefreshWhen | [表达式](../concepts/expression) | | 配置停止轮训的条件 |
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
---
|
||||
title: Tpl 模板
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Tpl
|
||||
icon:
|
||||
icon:
|
||||
order: 70
|
||||
---
|
||||
输出 [模板](./template) 的常用组件
|
||||
|
||||
输出 [模板](./concepts/template) 的常用组件
|
||||
|
||||
## 基本用法
|
||||
|
||||
@ -24,19 +25,12 @@ order: 70
|
||||
}
|
||||
```
|
||||
|
||||
更多模板相关配置请看[模板文档](./template)
|
||||
更多模板相关配置请看[模板文档](../concepts/template)
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | ------------------ | ------- | --------------- |
|
||||
| type | `string` | `"tpl"` | 指定为 Tpl 组件 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| tpl | [模板](./template) | | 配置模板 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | ---------------------------- | ------- | --------------- |
|
||||
| type | `string` | `"tpl"` | 指定为 Tpl 组件 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| tpl | [模板](../concepts/template) | | 配置模板 |
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Wizard 向导
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Wizard 向导
|
||||
icon:
|
||||
icon:
|
||||
order: 73
|
||||
---
|
||||
|
||||
表单向导，能够配置多个步骤引导用户一步一步完成表单提交。
|
||||
|
||||
## 基本使用
|
||||
@ -57,24 +58,24 @@ order: 73
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | ---------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"wizard"` | 指定为 `Wizard` 组件 |
|
||||
| mode | `string` | `"horizontal"` | 展示模式，选择：`horizontal` 或者 `vertical` |
|
||||
| api | [API](./types-api) | | 最后一步保存的接口。 |
|
||||
| initApi | [API](./types-api) | | 初始化数据接口 |
|
||||
| initFetch | [API](./types-api) | | 初始是否拉取数据。 |
|
||||
| initFetchOn | [表达式](./expression) | | 初始是否拉取数据，通过表达式来配置 |
|
||||
| actionPrevLabel | `string` | `上一步` | 上一步按钮文本 |
|
||||
| actionNextLabel | `string` | `下一步` | 下一步按钮文本 |
|
||||
| actionNextSaveLabel | `string` | `保存并下一步` | 保存并下一步按钮文本 |
|
||||
| actionFinishLabel | `string` | `完成` | 完成按钮文本 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| actionClassName | `string` | `btn-sm btn-default` | 按钮 CSS 类名 |
|
||||
| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |
|
||||
| redirect | [模板](./template) | `3000` | 操作完后跳转。 |
|
||||
| target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 |
|
||||
| steps | Array<[step](#step)> | | 数组，配置步骤信息 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------- | -------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| type | `string` | `"wizard"` | 指定为 `Wizard` 组件 |
|
||||
| mode | `string` | `"horizontal"` | 展示模式，选择：`horizontal` 或者 `vertical` |
|
||||
| api | [API](../types/api) | | 最后一步保存的接口。 |
|
||||
| initApi | [API](../types/api) | | 初始化数据接口 |
|
||||
| initFetch | [API](../types/api) | | 初始是否拉取数据。 |
|
||||
| initFetchOn | [表达式](../concepts/expression) | | 初始是否拉取数据，通过表达式来配置 |
|
||||
| actionPrevLabel | `string` | `上一步` | 上一步按钮文本 |
|
||||
| actionNextLabel | `string` | `下一步` | 下一步按钮文本 |
|
||||
| actionNextSaveLabel | `string` | `保存并下一步` | 保存并下一步按钮文本 |
|
||||
| actionFinishLabel | `string` | `完成` | 完成按钮文本 |
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| actionClassName | `string` | `btn-sm btn-default` | 按钮 CSS 类名 |
|
||||
| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |
|
||||
| redirect | [模板](../concepts/template) | `3000` | 操作完后跳转。 |
|
||||
| target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 |
|
||||
| steps | Array<[step](#step)> | | 数组，配置步骤信息 |
|
||||
|
||||
### step
|
||||
|
||||
@ -86,18 +87,8 @@ order: 73
|
||||
| horizontal.label | `number` | | 左边 label 的宽度占比 |
|
||||
| horizontal.right | `number` | | 右边控制器的宽度占比。 |
|
||||
| horizontal.offset | `number` | | 当没有设置 label 时，右边控制器的偏移量 |
|
||||
| api | [API](./types-api) | | 当前步骤保存接口，可以不配置。 |
|
||||
| initApi | [API](./types-api) | | 当前步骤数据初始化接口。 |
|
||||
| api | [API](../types/api) | | 当前步骤保存接口，可以不配置。 |
|
||||
| initApi | [API](../types/api) | | 当前步骤数据初始化接口。 |
|
||||
| initFetch | `boolean` | | 当前步骤数据初始化接口是否初始拉取。 |
|
||||
| initFetchOn | [表达式](./expression) | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 |
|
||||
| initFetchOn | [表达式](../concepts/expression) | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 |
|
||||
| controls | Array<[FormItem](./form/formItem)> | | 当前步骤的表单项集合，请参考 [FormItem](./form/formItem)。 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: Wrapper 包裹容器
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Wrapper
|
||||
icon:
|
||||
icon:
|
||||
order: 72
|
||||
---
|
||||
|
||||
简单的一个包裹容器组件
|
||||
|
||||
## 基本用法
|
||||
@ -19,7 +20,6 @@ order: 72
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 不同内边距
|
||||
|
||||
通过配置`size`属性，可以调整内边距
|
||||
@ -86,11 +86,4 @@ order: 72
|
||||
| type | `string` | `"wrapper"` | 指定为 Wrapper 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| size | `string` | | 支持: `xs`、`sm`、`md`和`lg` |
|
||||
| body | [SchemaNode](./types-schemanode) | | 内容容器 |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
| body | [SchemaNode](../types/schemanode) | | 内容容器 |
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: 数据映射
|
||||
title: 行为
|
||||
description:
|
||||
type: 0
|
||||
group: 💡 概念
|
||||
menuName: 数据映射
|
||||
menuName: 行为
|
||||
icon:
|
||||
order: 12
|
||||
---
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: 数据域与数据链
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: 💡 概念
|
||||
menuName: 数据域与数据链
|
||||
icon:
|
||||
icon:
|
||||
order: 10
|
||||
---
|
||||
|
||||
## 基本的数据展示
|
||||
|
||||
我们再看之前的 Hello World 示例：
|
||||
@ -78,7 +79,7 @@ order: 10
|
||||
|
||||
上面的配置要做的很简单：使用 `Page` 组件，在内容区内渲染一段模板文字，其中`${text}`是**模板变量**，它会去到当前组件的数据域中，获取`text`变量值。
|
||||
|
||||
毫无疑问，`${text}`将会解析为空白文本，最终渲染的文本是 `Hello `
|
||||
毫无疑问，`${text}`将会解析为空白文本，最终渲染的文本是 `Hello`
|
||||
|
||||
```schema:height="200"
|
||||
{
|
||||
@ -114,12 +115,12 @@ order: 10
|
||||
```
|
||||
|
||||
> amis 中大部分组件都具有数据域。
|
||||
>
|
||||
> 而前面我们知道 amis 的特性之一是基于组件树，因此自然数据域也会形成类似于树型结构，如何来处理这些数据域之间的联系呢，这就是我们马上要介绍到的 **[数据链](./data-scope-and-chain#%E6%95%B0%E6%8D%AE%E9%93%BE)**
|
||||
>
|
||||
> 而前面我们知道 amis 的特性之一是基于组件树，因此自然数据域也会形成类似于树型结构，如何来处理这些数据域之间的联系呢，这就是我们马上要介绍到的 **[数据链](./datascope-and-datachain#%E6%95%B0%E6%8D%AE%E9%93%BE)**
|
||||
|
||||
## 数据链
|
||||
|
||||
相信通过上文，你已经基本掌握了amis中数据域的概念，接下来我们会介绍另一个重要概念：**数据链**。
|
||||
相信通过上文，你已经基本掌握了 amis 中数据域的概念，接下来我们会介绍另一个重要概念：**数据链**。
|
||||
|
||||
**数据链**的特性是，当前组件在遇到获取变量的场景（例如模板渲染、展示表单数据、渲染列表等等）时：
|
||||
|
||||
@ -160,6 +161,7 @@ order: 10
|
||||
上面的配置项形成了如下的组件树和数据链：
|
||||
|
||||
组件树：
|
||||
|
||||
```
|
||||
page
|
||||
├─ tpl
|
||||
@ -168,6 +170,7 @@ page
|
||||
```
|
||||
|
||||
数据链：
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "zhangsan",
|
||||
@ -187,8 +190,8 @@ page
|
||||
由代码可以看出，`service`数据域中`name`变量为`lisi`，因此停止该变量的寻找，接下来寻找`age`变量。
|
||||
|
||||
很明显在`service`数据域中寻找`age`变量会失败，因此向上查找，尝试在`page`数据域中寻找`age`变量，找到为`20`，寻找变量结束，通过数据映射渲染，输出：`my name is lisi, I'm 20 years old`，渲染结束。
|
||||
> **注意：** 当前例子中，对数据域中数据的获取使用的是 **${xxx}** 模板语法，但是在不同的组件配置项中，获取数据的语法会有差异，我们会在后续的[模板](./template)和[表达式章节](./expression)中一一介绍。
|
||||
|
||||
> **注意：** 当前例子中，对数据域中数据的获取使用的是 **\${xxx}** 模板语法，但是在不同的组件配置项中，获取数据的语法会有差异，我们会在后续的[模板](../concepts/template)和[表达式章节](../concepts/expression)中一一介绍。
|
||||
|
||||
## 初始化数据域
|
||||
|
||||
@ -218,8 +221,10 @@ page
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**注意：**
|
||||
1. **并不是所有组件都支持配置初始化接口来实现数据域初始化操作**，对于那些不支持配置初始化接口的组件来说，一般会使用 [**Service组件**](./service) 来辅助实现数据域初始化；
|
||||
|
||||
1. **并不是所有组件都支持配置初始化接口来实现数据域初始化操作**，对于那些不支持配置初始化接口的组件来说，一般会使用 [**Service 组件**](./service) 来辅助实现数据域初始化；
|
||||
2. **`status`**、**`msg`** 和 **`data`** 字段为接口返回的必要字段；
|
||||
3. `data`必须返回一个具有`key-value`结构的对象
|
||||
|
||||
@ -245,9 +250,9 @@ page
|
||||
}
|
||||
```
|
||||
|
||||
> `api` 除了配置字符串格式以外，还可以配置复杂对象结构，更多详情查看[API文档](./api)
|
||||
> `api` 除了配置字符串格式以外，还可以配置复杂对象结构，更多详情查看[API 文档](./api)
|
||||
|
||||
### 2. 显式配置data属性值
|
||||
### 2. 显式配置 data 属性值
|
||||
|
||||
另一种初始化当前数据域的方式是显式的设置组件的`data`属性值：
|
||||
|
||||
@ -307,11 +312,7 @@ page
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
这时 amis 将会把`data`数据与当前`form`组件的数据域进行**merge**，`form`组件中的`static-tpl`组件会根据更新后的数据域，显示`id`为`1`。
|
||||
|
||||
> 具有类似特征的组件还有`Formula`等
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
---
|
||||
title: 联动
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: 💡 概念
|
||||
menuName: 联动
|
||||
icon:
|
||||
icon:
|
||||
order: 14
|
||||
---
|
||||
|
||||
上一节我们介绍了表达式的概念，而表达式应用最多的场景，是实现页面的联动效果。
|
||||
|
||||
## 基本联动
|
||||
@ -18,7 +19,7 @@ order: 14
|
||||
- 某个条件下轮训接口停止轮训
|
||||
- 等等...
|
||||
|
||||
> 联动配置项一般都是 [表达式](./expression)
|
||||
> 联动配置项一般都是 [表达式](../concepts/expression)
|
||||
|
||||
### 组件配置联动
|
||||
|
||||
@ -62,15 +63,15 @@ order: 14
|
||||
```
|
||||
|
||||
上面实例主要为一个表单，表单内有三个组件：一个`radio`, 两个`text`，通过配置联动配置项，实现下面联动效果：
|
||||
|
||||
1. 只要当`radio`选中`类型1`时，才会显示`text1`；
|
||||
2. 当`radio`选中`类型2`时，`text2`将会变为`禁用状态`
|
||||
|
||||
> **注意：**
|
||||
>
|
||||
> **注意：**
|
||||
>
|
||||
> 在表单项联动中，为了方便数据的读取，赋值后或者修改过的表单项，通过隐藏后，并不会在当前数据域中删除掉该字段值，因此默认提交的时候可能仍然会带上已隐藏表单项的值
|
||||
>
|
||||
> 如果想要在提交时去掉某个隐藏的字段，可以通过 [数据映射](./data-mapping) 配置自定义数据体
|
||||
|
||||
>
|
||||
> 如果想要在提交时去掉某个隐藏的字段，可以通过 [数据映射](./data-mapping) 配置自定义数据体
|
||||
|
||||
### 接口联动
|
||||
|
||||
@ -121,7 +122,7 @@ order: 14
|
||||
|
||||
是如何做到的？
|
||||
|
||||
实际上，所有**初始化接口链接上使用数据映射获取参数的形式**时，例如下面的`query=${query}`，在当前数据域中，**所引用的变量值（即query）发生变化时**，自动重新请求该接口。
|
||||
实际上，所有**初始化接口链接上使用数据映射获取参数的形式**时，例如下面的`query=${query}`，在当前数据域中，**所引用的变量值（即 query）发生变化时**，自动重新请求该接口。
|
||||
|
||||
```json
|
||||
{
|
||||
@ -130,14 +131,14 @@ order: 14
|
||||
```
|
||||
|
||||
> **tip:**
|
||||
>
|
||||
>
|
||||
> 触发所引用变量值发生变化的方式有以下几种：
|
||||
>
|
||||
>
|
||||
> 1. 通过对表单项的修改，可以更改表单项`name`属性值所配置变量的值；
|
||||
> 2. 通过[组件间联动](./linkage#%E7%BB%84%E4%BB%B6%E9%97%B4%E8%81%94%E5%8A%A8)，将其他组件的值发送到目标组件，进行数据域的更新，从而触发联动效果
|
||||
>
|
||||
>
|
||||
> 接口联动一般只适用于初始化接口，例如：
|
||||
>
|
||||
>
|
||||
> - `form`组件中的`initApi`；
|
||||
> - `select`组件中的`source`选项源接口；
|
||||
> - `service`组件中的`api`和`schemaApi`；
|
||||
@ -234,7 +235,7 @@ order: 14
|
||||
|
||||
### 其他联动
|
||||
|
||||
还有一些组件特有的联动效果，例如form的disabledOn，crud中的itemDraggableOn等等，可以参考相应的组件文档。
|
||||
还有一些组件特有的联动效果，例如 form 的 disabledOn，crud 中的 itemDraggableOn 等等，可以参考相应的组件文档。
|
||||
|
||||
## 组件间联动
|
||||
|
||||
@ -333,19 +334,14 @@ order: 14
|
||||
```
|
||||
|
||||
我们进行两个调整：
|
||||
|
||||
1. 为`crud`组件设置了`name`属性为`my_crud`
|
||||
2. 为`form`组件配置了`target`属性为`crud`的`name`：**`my_crud`**
|
||||
|
||||
更改配置后，提交表单时，如果有配置提交接口，会先请求提交，之后 amis 会寻找`target`所配置的目标组件，把`form`中所提交的数据，发送给该目标组件中，并将该数据**合并**到目标组件的数据域中，并触发目标组件的刷新操作，对于CRUD组件来说，刷新即重新拉取数据接口。
|
||||
更改配置后，提交表单时，如果有配置提交接口，会先请求提交，之后 amis 会寻找`target`所配置的目标组件，把`form`中所提交的数据，发送给该目标组件中，并将该数据**合并**到目标组件的数据域中，并触发目标组件的刷新操作，对于 CRUD 组件来说，刷新即重新拉取数据接口。
|
||||
|
||||
> 当然，`crud`组件内置已经支持此功能，你只需要配置`crud`中的`filter`属性，就可以实现上面的效果，更多内容查看 [crud -> filter](./crud) 文档。
|
||||
|
||||
我们再来一个例子，这次我们实现两个`form`之间的联动：
|
||||
|
||||
|
||||
事实上，**组件间联动也可以实现上述任意的 [基本联动效果](./linkage#%E5%9F%BA%E6%9C%AC%E8%81%94%E5%8A%A8)（显隐联动、接口联动等其他联动）。**
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -395,7 +395,7 @@ export default class CustomCheckbox extends React.Component {
|
||||
|
||||
#### 组件间通信
|
||||
|
||||
关于组件间通信，amis 中有个机制就是，把需要被引用的组件设置一个 name 值，然后其他组件就可以通过这个 name 与其通信，比如这个[栗子](./advanced.md#组件间通信)。其实内部是依赖于内部的一个 Scoped Context。你的组件希望可以被别的组件引用，你需要把自己注册进去，默认自定义的非表单类组件并没有把自己注册进去，可以参考以下代码做添加。
|
||||
关于组件间通信，amis 中有个机制就是，把需要被引用的组件设置一个 name 值，然后其他组件就可以通过这个 name 与其通信，比如这个[栗子](../concepts/linkage)。其实内部是依赖于内部的一个 Scoped Context。你的组件希望可以被别的组件引用，你需要把自己注册进去，默认自定义的非表单类组件并没有把自己注册进去，可以参考以下代码做添加。
|
||||
|
||||
```js
|
||||
import * as React from 'react';
|
||||
|
||||
@ -167,7 +167,7 @@ class MyComponent extends React.Component<any, any> {
|
||||
|
||||
## SDK
|
||||
|
||||
SDK 适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式不支持[定制组件](../sdk)，只能使用 amis 内置的组件。
|
||||
SDK 适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式不支持 [自定义组件](./custom)，只能使用 amis 内置的组件。
|
||||
|
||||
JSSDK 的代码从以下地址获取：
|
||||
|
||||
|
||||
@ -119,7 +119,7 @@ API 还支持配置对象类型
|
||||
|
||||
### 配置请求地址
|
||||
|
||||
可以配置`url`指定接口请求地址，支持[模板字符串](./template)。
|
||||
可以配置`url`指定接口请求地址，支持[模板字符串](../concepts/template)。
|
||||
|
||||
### 配置请求数据
|
||||
|
||||
@ -349,7 +349,7 @@ API 还支持配置对象类型
|
||||
}
|
||||
```
|
||||
|
||||
查看 **选项 2** 的`source`属性，他是 API 类型值，支持配置`sendOn` [表达式](./expression)，实现根据条件请求接口。
|
||||
查看 **选项 2** 的`source`属性，他是 API 类型值，支持配置`sendOn` [表达式](../concepts/expression)，实现根据条件请求接口。
|
||||
|
||||
### 配置接口缓存
|
||||
|
||||
@ -591,7 +591,7 @@ const schema = {
|
||||
| dataType | 数据体格式 | 字符串 | 默认为 `json` 可以配置成 `form` 或者 `form-data`。当 `data` 中包含文件时，自动会采用 `form-data（multipart/form-data）` 格式。当配置为 `form` 时为 `application/x-www-form-urlencoded` 格式。 |
|
||||
| qsOptions | -- | 对象或字符串 | 当 dataType 为 form 或者 form-data 的时候有用。具体参数请参考这里，默认设置为: `{ arrayFormat: 'indices', encodeValuesOnly: true }` |
|
||||
| headers | 请求头 | 对象 | - |
|
||||
| sendOn | 请求条件 | [表达式](https://suda.bce.baidu.com/docs/expression) | - |
|
||||
| sendOn | 请求条件 | [表达式](../concepts/expression) | - |
|
||||
| cache | 接口缓存时间 | 整型数字 | - |
|
||||
| requestAdaptor | 发送适配器 | 字符串 | ，支持字符串串格式，或者直接就是函数如： |
|
||||
| adaptor | 接收适配器 | 字符串 | 如果接口返回不符合要求，可以通过配置一个适配器来处理成 amis 需要的。同样支持 Function 或者 字符串函数体格式 |
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
---
|
||||
title: SchemaNode
|
||||
description:
|
||||
description:
|
||||
type: 0
|
||||
group: 🔧 类型
|
||||
menuName: SchemaNode 配置节点
|
||||
icon:
|
||||
icon:
|
||||
order: 19
|
||||
---
|
||||
|
||||
@ -16,7 +16,7 @@ SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"text": "World"
|
||||
"text": "World"
|
||||
},
|
||||
"body": "Hello ${text}!" // 输出 Hello World!
|
||||
}
|
||||
@ -24,11 +24,11 @@ SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema
|
||||
|
||||
上例中的`body`属性所配置的属性值`"Hello ${text}!"`就是一个模板
|
||||
|
||||
更多使用说明见 [模板文档](./template)
|
||||
更多使用说明见 [模板文档](../concepts/template)
|
||||
|
||||
## Schema 配置
|
||||
|
||||
`Schema`，即**组件的JSON配置**
|
||||
`Schema`，即**组件的 JSON 配置**
|
||||
|
||||
**它至少需要一个`type`字段，用以标识当前`Schema`的类型。**
|
||||
|
||||
@ -36,10 +36,10 @@ SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema
|
||||
{
|
||||
"type": "page",
|
||||
"data": {
|
||||
"text": "World"
|
||||
"text": "World"
|
||||
},
|
||||
"body": {
|
||||
"type":"tpl",
|
||||
"type": "tpl",
|
||||
"tpl": "Hello ${text}!" // 输出 Hello World!
|
||||
}
|
||||
}
|
||||
@ -47,7 +47,7 @@ SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema
|
||||
|
||||
`type`, `data`, `body`这三个字段组成的`JSON`对象，便是一个`Schema`，它由`type`字段作为标识，指明当前 `Schema` 是 `Page`组件节点
|
||||
|
||||
而通过查看 [Page组件属性表](./page#属性表) 可知，`body`属性类型是`SchemaNode`，即可以在`body`中，嵌套配置其他组件。我们在这里，用`type`和`tpl` JSON 对象，配置了 `Tpl` 组件，渲染了一段模板字符串。
|
||||
而通过查看 [Page 组件属性表](../components/page) 可知，`body`属性类型是`SchemaNode`，即可以在`body`中，嵌套配置其他组件。我们在这里，用`type`和`tpl` JSON 对象，配置了 `Tpl` 组件，渲染了一段模板字符串。
|
||||
|
||||
> amis 可以通过该方法，在`Schema`中嵌套配置其他`SchemaNode`，从而搭建非常复杂的页面应用。
|
||||
|
||||
@ -89,7 +89,7 @@ SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema
|
||||
|
||||
##### 通过条件配置显隐
|
||||
|
||||
你也通过 [表达式](../expression) 配置`hiddenOn`，来实现在某个条件下禁用当前组件.
|
||||
你也通过 [表达式](../concepts/expression) 配置`hiddenOn`，来实现在某个条件下禁用当前组件.
|
||||
|
||||
```schema:height="400" scope="body"
|
||||
{
|
||||
@ -113,7 +113,7 @@ SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema
|
||||
}
|
||||
```
|
||||
|
||||
为了方便说明，我们在form中演示了条件显隐，实际上，只要当前数据域中数据有变化，都可以实现组件显隐
|
||||
为了方便说明，我们在 form 中演示了条件显隐，实际上，只要当前数据域中数据有变化，都可以实现组件显隐
|
||||
|
||||
> `visible`和`hidden`，`visibleOn`和`hiddenOn`除了判断逻辑相反以外，没有任何区别
|
||||
|
||||
@ -142,9 +142,3 @@ SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema
|
||||
```
|
||||
|
||||
非常容易看出来，我们给`body`属性，配置了数组结构的`Schema`，从而实现在`body`下，渲染两个`tpl`，来输入两段文字的效果
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -61,65 +61,65 @@ export const docs = [
|
||||
children: [
|
||||
{
|
||||
label: '配置与组件',
|
||||
path: '/docs/concept/schema',
|
||||
path: '/docs/concepts/schema',
|
||||
getComponent: (location, cb) =>
|
||||
require(['../../docs/concept/schema.md'], doc => {
|
||||
require(['../../docs/concepts/schema.md'], doc => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
})
|
||||
},
|
||||
{
|
||||
label: '数据域与数据链',
|
||||
path: '/docs/concept/datascope-and-datachain',
|
||||
path: '/docs/concepts/datascope-and-datachain',
|
||||
getComponent: (location, cb) =>
|
||||
require(['../../docs/concept/datascope-and-datachain.md'], doc => {
|
||||
require(['../../docs/concepts/datascope-and-datachain.md'], doc => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
})
|
||||
},
|
||||
{
|
||||
label: '模板',
|
||||
path: '/docs/concept/template',
|
||||
path: '/docs/concepts/template',
|
||||
getComponent: (location, cb) =>
|
||||
require(['../../docs/concept/template.md'], doc => {
|
||||
require(['../../docs/concepts/template.md'], doc => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
})
|
||||
},
|
||||
{
|
||||
label: '数据映射',
|
||||
path: '/docs/concept/data-mapping',
|
||||
path: '/docs/concepts/data-mapping',
|
||||
getComponent: (location, cb) =>
|
||||
require(['../../docs/concept/data-mapping.md'], doc => {
|
||||
require(['../../docs/concepts/data-mapping.md'], doc => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
})
|
||||
},
|
||||
{
|
||||
label: '表达式',
|
||||
path: '/docs/concept/expression',
|
||||
path: '/docs/concepts/expression',
|
||||
getComponent: (location, cb) =>
|
||||
require(['../../docs/concept/expression.md'], doc => {
|
||||
require(['../../docs/concepts/expression.md'], doc => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
})
|
||||
},
|
||||
{
|
||||
label: '联动',
|
||||
path: '/docs/concept/linkage',
|
||||
path: '/docs/concepts/linkage',
|
||||
getComponent: (location, cb) =>
|
||||
require(['../../docs/concept/linkage.md'], doc => {
|
||||
require(['../../docs/concepts/linkage.md'], doc => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
})
|
||||
},
|
||||
{
|
||||
label: '行为',
|
||||
path: '/docs/concept/action',
|
||||
path: '/docs/concepts/action',
|
||||
getComponent: (location, cb) =>
|
||||
require(['../../docs/concept/action.md'], doc => {
|
||||
require(['../../docs/concepts/action.md'], doc => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
})
|
||||
},
|
||||
{
|
||||
label: '样式',
|
||||
path: '/docs/concept/style',
|
||||
path: '/docs/concepts/style',
|
||||
getComponent: (location, cb) =>
|
||||
require(['../../docs/concept/style.md'], doc => {
|
||||
require(['../../docs/concepts/style.md'], doc => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user