test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 10:59:42 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
115c6a3eef
amis/examples/docs.json
liaoxuezhi cd7d6062aa
chore: 调整 vite 后 gh-pages 问题修复 (#5682) 
* chore: 调整 vite 后 gh-pages 问题修复

* 降级monaco-editor
2022-11-03 12:12:14 +08:00

1 line
852 KiB
JSON
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{"docs":[{"title":"Action 行为按钮","body":"\nAction 行为按钮，是触发页面行为的主要方法之一\n\n## 基本用法\n\n我们这里简单实现一个点击按钮弹框的交互。\n\n\n\n## 样式\n\n### 尺寸\n\n配置`size`，显示不同尺寸\n\n\n\n### 主题\n\n可以配置`level`或者`primary`，显示不同样式。\n\n\n\n### 图标\n\n可以配置`icon`配置项，实现按钮显示图标\n\n\n\nicon 也可以是 url 地址，比如\n\n\n\n如果`label`配置为空字符串，可以只显示`icon`\n\n\n\n## 操作前确认\n\n可以通过配置`confirmText`，实现在任意操作前，弹出提示框确认是否进行该操作。\n\n\n\n## ajax 请求\n\n通过配置`\"actionType\":\"ajax\"`和`api`，可以实现 ajax 请求。\n\n\n\n### 请求成功后，跳转至某个页面\n\n##### 配置相对路径，实现单页跳转\n\n\n\n##### 配置完整路径，直接跳转指定路径\n\n\n\n### 请求成功后，显示反馈弹框\n\n\n\n更多内容查看\n\n### 请求成功后，刷新目标组件\n\n1. 目标组件需要配置 `name` 属性\n2. Action 上添加 `\"reload\": \"xxx\"`，`xxx` 为目标组件的 `name` 属性值，如果配置多个组件，`name` 用逗号分隔，另外如果想让 reload 的时候再携带些数据可以类似这样配置 `{\"reload\": \"xxx?a=${a}&b=${b}\"}`, 这样不仅让目标组件刷新，同时还会把当前环境中的数据 a 和 b 传递给 xxx.\n\n\n\n> 配置 `\"reload\": \"window\"` 可刷新当前页面\n\n### 自定义 toast 文字\n\n可以通过配置`messages`，自定义接口返回`toast`信息\n\n\n\n需要注意如果 api 结果返回了 `msg` 字段，会优先使用 api 的返回。\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ---------------------------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------- |\n| api | 格式说明。 |\n| redirect | | - | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。 |\n| feedback | `DialogObject` | - | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考 |\n| messages | `object` | - | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。 |\n\n## 下载请求\n\n> 1.4.0 及以上版本\n\n通过配置 `\"actionType\":\"download\"` 和 `api`，可以实现下载请求，它其实是 `ajax` 的一种特例，自动给 api 加上了 `\"responseType\": \"blob\"`。\n\n\n\n上面的例子由于环境原因没法测试，需要在返回的 header 中配置 `content-type` 和 `Content-Disposition`，比如\n\n\n\n如果接口存在跨域，除了常见的 cors header 外，还需要添加以下 header\n\n\n\n## 保存到本地\n\n> 1.10.0 及以上版本\n\n和前面的下载接口功能类似，但不需要返回 `Content-Disposition` header，只需要解决跨域问题，主要用于一些简单的场景，比如下载文本\n\n\n\n> 这个功能目前还没用到 env 里的 fetcher 方法，不支持 POST\n\n默认会自动取 url 中的文件名，如果没有的话就需要指定，比如\n\n\n\n## 倒计时\n\n主要用于发验证码的场景，通过设置倒计时 `countDown`（单位是秒），让点击按钮后禁用一段时间：\n\n\n\n同时还能通过 `countDownTpl` 来控制显示的文本，其中 `${timeLeft}` 变量是剩余时间。\n\n## 跳转链接\n\n### 单页跳转\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |\n| actionType | `string` | `link` | 单页跳转 |\n| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值。 |\n\n### 直接跳转\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------- | ------- | ------------------------------------------------ |\n| actionType | `string` | `url` | 页面跳转 |\n| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值。 |\n| blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开。 |\n\n## 发送邮件\n\n\n\n### 异步获取数据\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | ------- | -------------------------------- |\n| actionType | `string` | `email` | 点击后显示一个弹出框 |\n| to | `string` | - | 收件人邮箱，可用 ${xxx} 取值。 |\n| cc | `string` | - | 抄送邮箱，可用 ${xxx} 取值。 |\n| bcc | `string` | - | 匿名抄送邮箱，可用 ${xxx} 取值。 |\n| subject | `string` | - | 邮件主题，可用 ${xxx} 取值。 |\n| body | `string` | - | 邮件正文，可用 ${xxx} 取值。 |\n\n## 弹框\n\n\n\n### 弹框结合 reload 刷新下拉框的例子\n\n下面是一种典型场景，有个一个下拉框，然后有个按钮能弹框新增数据，新增了之后需要下拉框重新拉取最新列表（这个例子因为没实现新增功能，所以看不出更新，如果看网络请求会发现重新请求了一次）。\n\n\n\n可以看到 `reload` 是 `myForm.group`，第一个是表单的 name，第二个是下拉框的 name。\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | -------------------------- | -------- | --------------------------------------------- |\n| actionType | `string` | `dialog` | 点击后显示一个弹出框 |\n| dialog | `string` 或 `DialogObject` | - | 指定弹框内容，格式可参考 |\n| nextCondition | `boolean` | - | 可以用来设置下一条数据的条件，默认为 `true`。 |\n\n## 抽屉\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------------------------- | -------- | ------------------------------------------ |\n| actionType | `string` | `drawer` | 点击后显示一个侧边栏 |\n| drawer | `string` 或 `DrawerObject` | - | 指定弹框内容，格式可参考 |\n\n## 复制文本\n\n\n\n可以通过 `copyFormat` 设置复制的格式，默认是文本\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ------------------------------------ | ------ | ------------------------------------ |\n| actionType | `string` | `copy` | 复制一段内容到粘贴板 |\n| content | | - | 指定复制的内容。可用 `${xxx}` 取值。 |\n\n## 刷新其他组件\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | -------- | --------------------------------------------------------------------------- |\n| actionType | `string` | `reload` | 刷新目标组件 |\n| target | `string` | - | 需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |\n\n## 组件特有的行为类型\n\n### 表单中表格添加一行\n\n该 actionType 为专用行为\n\n### 校验表单\n\n下面的表单中会优先校验按钮`required`属性包含的表单项，当所有的字段校验完毕后，才会校验表单中固有的项目。需要额外注意的是，当按钮中的 `required` 和对应表单项本身的 `required` 属性冲突时，最终校验方式是`\"required\": true`。\n\n\n\n### 重置表单\n\n在 form 中，配置`\"type\": \"reset\"`的按钮，可以实现重置表单数据的功能\n\n\n\n### 清空表单\n\n在 form 中，配置`\"actionType\": \"clear\"`的按钮，可以实现清空表单数据的功能，跟重置不同的是，重置其实是还原到初始值，并不一定是清空。\n\n\n\n### 重置表单并提交\n\n`actionType` 配置成 `\"reset-and-submit\"`\n\n### 清空表单并提交\n\n`actionType` 配置成 `\"clear-and-submit\"`\n\n## 自定义点击事件\n\n> 1.3.0 版本新增功能\n\n如果上面的的行为不满足需求，还可以通过字符串形式的 `onClick` 来定义点击事件，这个字符串会转成 JavaScript 函数，并支持异步（如果是用 sdk 需要自己编译一个 es2017 版本）。\n\n\n\namis 会传入两个参数 `event` 和 `props`，`event` 就是 React 的事件，而 `props` 可以拿到这个组件的其他属性，同时还能调用 amis 中的内部方法。\n\n\n\n我们将前面的代码拿出来方便分析：\n\n\n\n这个函数如果返回 `false` 就会阻止 amis 其他 action 的执行，比如这个例子\n\n\n\n它的行为是先执行 alert，再执行弹框，但如果我们加上一个 `return false`，就会发现后面的 amis 弹框不执行了。\n\n\n\n如果是在表单项中，还能通过 `props.formStore.setValues();` 来修改其它表单项值\n\n\n\n## 全局键盘快捷键触发\n\n> 1.3.0 版本新增功能\n\n可以通过 `hotKey` 属性来配置键盘快捷键触发，比如下面的例子\n\n\n\n除了 ctrl 和 command 还支持 shift、alt。\n\n其它键盘特殊按键的命名列表：backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete, f1 - f19, num_0 - num_9, num_multiply, num_add, num_enter, num_subtract, num_decimal, num_divide。\n\n> 注意这个主要用于实现页面级别快捷键，如果要实现回车提交功能，请将 `input-text` 放在 `form` 里，而不是给 button 配一个 `enter` 的快捷键。\n\n## Action 作为容器组件\n\n> 1.5.0 及以上版本\n\naction 还可以使用 `body` 来渲染其他组件，让那些不支持行为的组件支持点击事件，比如下面的例子\n\n\n\n在这种模式下不支持按钮的各种配置项，比如 `label`、`size`、`icon` 等，因为它只作为容器组件，没有展现。\n\n## 按钮提示\n\n通过 `tooltip` 来设置提示\n\n\n\n如果按钮是 disabled，需要使用 `disabledTip`\n\n\n\n还可以通过 `tooltipPlacement` 设置弹出位置\n\n\n\n## 通用属性表\n\n所有`actionType`都支持的通用配置项\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | ------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `action` | 指定为 Page 渲染器。 |\n| actionType | `string` | - | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 |\n| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 |\n| level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 |\n| size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 |\n| icon | `string` | - | 设置图标，例如`fa fa-plus`。 |\n| iconClassName | `string` | - | 给图标上添加类名。 |\n| rightIcon | `string` | - | 在按钮文本右侧设置图标，例如`fa fa-plus`。 |\n| rightIconClassName | `string` | - | 给右侧图标上添加类名。 |\n| active | `boolean` | - | 按钮是否高亮。 |\n| activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 |\n| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 |\n| block | `boolean` | - | 用`display:\"block\"`来显示按钮。 |\n| confirmText | | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |\n| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |\n| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |\n| disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |\n| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |\n| close | `boolean` or `string` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。当值为字符串，并且是祖先层弹框的名字的时候，会把祖先弹框关闭掉。 |\n| required | `Array<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | -------- | -------------- |\n| click | - | 点击时触发 |\n| mouseenter | - | 鼠标移入时触发 |\n| mouseleave | - | 鼠标移出时触发 |\n\n## 动作表\n\n暂无\n","path":"/zh-CN/components/action"},{"title":"Alert 提示","body":"\n用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。\n\n## 基本使用\n\n`level`属性支持 4 种预设样式：`info`, `success`, `warning`, `danger`。\n\n\n\n## 图标\n\n配置`\"showIcon\": true`后展示图标让信息更加醒目。可以通过`icon`属性自定义设置 icon 内容，如果`icon`属性为空，则根据`level`值添加默认 icon。\n\n\n\n## level 支持表达式\n\n> 1.6.4 及以上版本\n\n修改下面例子的 status 值为 2 就能看到变化\n\n\n\n同时 icon 和 showIcon 也都支持表达式\n\n## 显示关闭按钮\n\n配置`\"showCloseButton\": true`实现显示关闭按钮。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------- | ----------------------------------------- | --------- | -------------------------------------------------------- |\n| type | `string` | `\"alert\"` | 指定为 alert 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` |\n| body | | | 显示内容 |\n| showCloseButton | `boolean` | `false` | 是否显示关闭按钮 |\n| closeButtonClassName | `string` | | 关闭按钮的 CSS 类名 |\n| showIcon | `boolean` | `false` | 是否显示 icon |\n| icon | `string` | | 自定义 icon |\n| iconClassName | `string` | | icon 的 CSS 类名 |\n","path":"/zh-CN/components/alert"},{"title":"AnchorNav 锚点导航","body":"\n锚点导航容器组件。\n\n## 基本用法\n\n\n\n默认想要显示多少锚点导航配置多少个 `links` 成员即可。\n\n## 水平导航\n\n\n\n## 默认定位到某个区域\n\n主要配置`active`属性来实现该效果，共有下面两种方法：\n\n#### 配置 href 值\n\n\n\n#### 配置索引值\n\n单个`link`上不要配置`href`属性，配置需要展示的`link`索引值，`0`代表第一个。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | --------------------------------- | ----------------------------------- | -------------------------------------------------------------------------- |\n| type | `string` | `\"anchor-nav\"` | 指定为 AnchorNav 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| linkClassName | `string` | | 导航 Dom 的类名 |\n| sectionClassName | `string` | | 锚点区域 Dom 的类名 |\n| links | `Array` | | links 内容 |\n| direction | `string` | `\"vertical\"` | 可以配置导航水平展示还是垂直展示。对应的配置项分别是：vertical、horizontal |\n| active | `string` | | 需要定位的区域 |\n| links[x].title | `string` | | 区域 标题 |\n| links[x].href | `string` | | 区域 标识 |\n| links | | 区域 内容区 |\n| links[x].className | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | 区域成员 样式 |\n","path":"/zh-CN/components/anchor-nav"},{"title":"App 多页应用","body":"\n用于实现多页应用，适合于全屏模式，如果只是局部渲染请不要使用。\n\n## 基本用法\n\n类型定义为 `app`，通过 pages 定义页面，支持层级，支持内嵌 schema，或者 通过 schemaApi 远程拉取页面，完整用法请参考 项目里的代码示例，需要修改 `env`：\n\n\n\n## 属性说明\n\n- `type` 请配置成 `app`\n- `api` 页面配置接口，如果你想远程拉取页面配置请配置。返回配置路径 `json>data>pages`，具体格式请参考 `pages` 属性。\n- `brandName` 应用名称。\n- `logo` 支持图片地址，或者 svg。\n- `className` css 类名。\n- `header` 顶部区域。\n- `asideBefore` 页面菜单上前面区域。\n- `asideAfter` 页面菜单下前面区域。\n- `footer` 页面。\n- `pages` `Array<页面配置>`具体的页面配置。\n 通常为数组，数组第一层为分组，一般只需要配置 label 集合，如果你不想分组，直接不配置，真正的页面请在第二层开始配置，即第一层的 children 中。\n\n 具体的页面配置也支持属性结构，每层有以下配置。\n\n - `label` 菜单名称。\n - `icon` 菜单图标，比如：fa fa-file.\n - `url` 页面路由路径，当路由命中该路径时，启用当前页面。当路径不是 `/` 打头时，会连接父级路径。比如：父级的路径为 `folder`，而此时配置 `pageA`, 那么当页面地址为 `/folder/pageA` 时才会命中此页面。当路径是 `/` 开头如： `/crud/list` 时，则不会拼接父级路径。另外还支持 `/crud/view/:id` 这类带参数的路由，页面中可以通过 `${params.id}` 取到此值。\n - `schema` 页面的配置，具体配置请前往 \n - `schemaApi` 如果想通过接口拉取，请配置。返回路径为 `json>data`。schema 和 schemaApi 只能二选一。\n - `link` 如果想配置个外部链接菜单，只需要配置 link 即可。\n - `redirect` 跳转，当命中当前页面时，跳转到目标页面。\n - `rewrite` 改成渲染其他路径的页面，这个方式页面地址不会发生修改。\n - `isDefaultPage` 当你需要自定义 404 页面的时候有用，不要出现多个这样的页面，因为只有第一个才会有用。\n - `visible` 有些页面可能不想出现在菜单中，可以配置成 `false`，另外带参数的路由无需配置，直接就是不可见的。\n - `className` 菜单类名。\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ---------------- |\n| reload | - | 刷新（重新加载） |\n| setValue | `value: object` 更新的数据 | 更新数据 |\n","path":"/zh-CN/components/app"},{"title":"Audio 音频","body":"\n## 基本使用\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------- | ------------------------------------------------ | --------------------------------------- |\n| type | `string` | `\"audio\"` | 指定为 audio 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| inline | `boolean` | true | 是否是内联模式 |\n| src | `string` | | 音频地址 |\n| loop | `boolean` | false | 是否循环播放 |\n| autoPlay | `boolean` | false | 是否自动播放 |\n| rates | `array` | `[]` | 可配置音频播放倍速如：`[1.0, 1.5, 2.0]` |\n| controls | `array` | `['rates', 'play', 'time', 'process', 'volume']` | 内部模块定制化 |\n","path":"/zh-CN/components/audio"},{"title":"Avatar 头像","body":"\n用来显示用户头像\n\n## 基本使用\n\n\n\n## 文字\n\n\n\n## 图标\n\n通过 icon 设置图标\n\n\n\n> 如果同时存在 src、text 和 icon，会优先用 src、接着 text、最后 icon\n\n## 动态图片或文字\n\nsrc、text 都支持变量，可以从上下文中动态获取图片或文字，下面的例子中：\n- 第一个获取到了，显示正常\n- 第二个没获取到，因此降级为显示 icon\n- 第三个图片没获取到，由于 text 优先级比 icon 高，所以显示 text\n\n\n\n## 方形和圆角形\n\n可以通过 shape 改成方形或圆角形\n\n\n\n## 大小\n\n通过 size 可以控制头像的大小\n\n\n\n## 控制字符类型距离左右两侧边界单位像素\n\n通过 gap 可以控制字符类型距离左右两侧边界单位像素\n\n\n\n## 图片拉伸方式\n\n通过 `fit` 可以控制图片拉伸方式，默认是 `'cover'`\n\n\n\n## 控制图片是否允许拖动\n\n通过 draggable 可以控制图片是否允许拖动\n\n\n\n## 图片加载失败后，通过 onError 控制是否进行 text、icon 置换\n> 如果同时存在 text 和 icon，会优先用 text、接着 icon\n\n\n\n## 样式\n\n可以通过 style 来控制背景及文字颜色\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ----------- | ------ | --------------------- |\n| className | `string` | | 外层 dom 的类名 |\n| style | `object` | | 外层 dom 的样式 |\n| fit |`'contain'` \\| `'cover'` \\| `'fill'` \\| `'none'` \\| `'scale-down'` | `'cover'` | 具体细节可以参考 MDN |\n| src | `string` | | 图片地址 |\n| text | `string` | | 文字 |\n| icon | `string` | `'fa fa-user'` | 图标 |\n| shape | `'circle'` \\| `'square'` \\| `'rounded'` | `'circle'` | 形状，有三种 `'circle'` （圆形）、`'square'`（正方形）、`'rounded'`（圆角） |\n| size | `number` \\| `'default'` \\| `'normal'` \\| `'small'` | `'default'` | `'default' \\| 'normal' \\| 'small'`三种字符串类型代表不同大小（分别是48、40、32），也可以直接数字表示 |\n| gap | `number` | 4 | 控制字符类型距离左右两侧边界单位像素 |\n| alt | `number` | | 图像无法显示时的替代文本 |\n| draggable | `boolean` | | 图片是否允许拖动 |\n| crossOrigin | `'anonymous'` \\| `'use-credentials'` \\| `''` | | 图片的 `CORS` 属性设置 |\n| onError | `string` | | 图片加载失败的字符串，这个字符串是一个New Function内部执行的字符串，参数是event（使用event.nativeEvent获取原生dom事件），这个字符串需要返回boolean值。设置 `\"return ture;\"` 会在图片加载失败后，使用 `text` 或者 `icon` 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意：图片加载失败，不包括$获取数据为空情况 |\n","path":"/zh-CN/components/avatar"},{"title":"Badge 角标","body":"\n## 基本用法\n\n部分组件可以设置 `badge` 属性来显示角标。\n\n> 1.2.2 及之前版本只支持头像组件\n>\n> 1.2.3 开始支持按钮、链接、模板组件。\n\n\n\n## 显示文字或数值\n\n设置 `mode` 为 `text`，通过 `text` 属性来显示文字或数字，数值为零的时候将不显示。\n\n\n\n## 显示位置\n\n通过 `position` 来控制角标显示位置，默认 `top-right`，还可以设置为 `top-left`、`bottom-left`、`bottom-right`。\n\n\n\n通过 `offset` 来控制角标显示位置，offset 相对于 position 位置进行水平、垂直偏移。offset 在 mode=ribbon 下设置无效。\n\n\n\n## 动态数字\n\n`text` 可以取上下文变量。\n\n\n\n## 设置封顶值\n\n通过 `overflowCount` 可以设置封顶值。超过 overflowCount 的会显示为 ${overflowCount}+，默认的 overflowCount 为 99\n\n\n\n## 动态控制是否显示角标\n\n角标可以直接写表达式来判断是否显示\n\n\n\n还可以通过 `visibleOn` 表达式来动态控制，这样还能设置其他属性\n\n\n\n## 设置大小\n\n通过 `size` 来控制大小\n\n\n\n## 设置角标级别\n\n通过 `level` 来设置角标级别，改变角标背景颜色\n\n\n\n## 是否显示动画\n\n在默认点状态下，可以通过设置 `animation` 属性来控制是否显示动画\n\n\n\n## 自定义样式\n\n通过 `style` 来控制展现样式，比如背景及文字的颜色\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ------------------------------------------- | --------- | ---------------------------------------------------------------------- |\n| mode | `string` | dot | 角标类型，可以是 dot/text/ribbon |\n| text | `string`\\|`number` | | 角标文案，支持字符串和数字，在 mode='dot'下设置无效 |\n| size | `number` | | 角标大小 |\n| level | `string` | | 角标级别, 可以是 info/success/warning/danger, 设置之后角标背景颜色不同 |\n| overflowCount | `number` | 99 | 设置封顶的数字值 |\n| position | `string` | top-right | 角标位置， 可以是 top-right/top-left/bottom-right/bottom-left |\n| offset | `number[top, left]` | [0, 0] | 角标位置，offset 相对于 position 位置进行水平、垂直偏移 |\n| className | `string` | | 外层 dom 的类名 |\n| animation | `boolean` | | 角标是否显示动画 |\n| style | `object` | | 角标的自定义样式 |\n| visibleOn | | | 控制角标的显示隐藏 |\n","path":"/zh-CN/components/badge"},{"title":"BarCode 条形码","body":"\n## 基本用法\n\n\n\n## 条形码配置\n\n通过 options 属性配置，具体请参考，比如\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | ------------------------------ |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 显示的颜色值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n","path":"/zh-CN/components/barcode"},{"title":"Breadcrumb 面包屑","body":"\n## 基本用法\n\n\n\n## 动态数据\n\n可以配置 source 来获取上下文中的动态数据，结合 来实现动态生成。\n\n\n\n## 分隔符\n\n\n\n## 下拉菜单\n\n\n\n## 最大展示长度\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | -------------------------------- | ------------- | ---------------------------------------------------- |\n| className | `string` | | 外层类名 |\n| itemClassName | `string` | | 导航项类名 |\n| separatorClassName | `string` | | 分割符类名 |\n| dropdownClassName | `string` | | 下拉菜单类名 |\n| dropdownItemClassName | `string` | | 下拉菜单项类名 |\n| separator | `string` | | 分隔符 |\n| labelMaxLength | `number` | 16 | 最大展示长度 |\n| tooltipPosition | `top \\| bottom \\| left \\| right` | `top` | 浮窗提示位置 |\n| source | `string` | | 动态数据 |\n| items[].label | `string` | | 文本 |\n| items[].href | `string` | | 链接 |\n| items |\n| items[].dropdown | `dropdown[]` | | 下拉菜单，dropdown[]的每个对象都包含label、href、icon属性 |\n","path":"/zh-CN/components/breadcrumb"},{"title":"ButtonGroup 按钮组","body":"\n## 基本用法\n\n\n\n## 垂直模式\n\n配置`\"vertical\": true`，实现垂直模式\n\n\n\n## 平铺模式\n\n配置 `\"tiled\": true` 实现平铺模式\n\n\n\n## 按钮主题样式\n\n配置 `btnLevel` 统一设置按钮主题样式，注意 `buttons ` 或 `options` 中的`level`属性优先级高于`btnLevel`。配置 `btnActiveLevel` 为按钮设置激活态时的主题样式。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------- | -------------------------- |\n| type | `string` | `\"button-group\"` | 指定为 button-group 渲染器 |\n| vertical | `boolean` | `false` | 是否使用垂直模式 |\n| tiled | `boolean` | `false` | 是否使用平铺模式 |\n| btnLevel | `'link' \\| 'primary' \\| 'secondary' \\| 'info'\\|'success' \\| 'warning' \\| 'danger' \\| 'light'\\| 'dark' \\| 'default'` | `\"default\"` | 按钮样式 |\n| btnActiveLevel | `'link' \\| 'primary' \\| 'secondary' \\| 'info'\\|'success' \\| 'warning' \\| 'danger' \\| 'light'\\| 'dark' \\| 'default'` | `\"default\"` | 选中按钮样式 |\n| buttons | `Array<Action>` | | |\n| className | `string` | | 外层 Dom 的类名 |\n","path":"/zh-CN/components/button-group"},{"title":"Button 按钮","body":"\n## 基本用法\n\n\n\n`button` 实际上是 `action` 的别名，更多用法见\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------- |\n| className | `string` | | 指定添加 button 类名 |\n| url | `string` | | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 |\n| size | `'xs' \\| 'sm' \\| 'md' \\| 'lg' ` | | 设置按钮大小 |\n| actionType | `'button' \\| 'reset' \\| 'submit'\\| 'clear'\\| 'url'` | button | 设置按钮类型 |\n| level | `'link' \\| 'primary' \\| 'enhance' \\| 'secondary' \\| 'info'\\|'success' \\| 'warning' \\| 'danger' \\| 'light'\\| 'dark' \\| 'default'` | default | 设置按钮样式 |\n| tooltip | `'string' \\| 'TooltipObject'` | | 气泡提示内容 |\n| tooltipPlacement | `'top' \\| 'right' \\| 'bottom' \\| 'left' ` | top | 气泡框位置器 |\n| tooltipTrigger | `'hover' \\| 'focus'` | | 触发 tootip |\n| disabled | `'boolean'` | false | 按钮失效状态 |\n| block | `'boolean'` | false | 将按钮宽度调整为其父宽度的选项 |\n| loading | `'boolean'` | false | 显示按钮 loading 效果 |\n| loadingOn | `'string'` | | 显示按钮 loading 表达式 |\n","path":"/zh-CN/components/button"},{"title":"Calendar 日历日程","body":"\n## 基本用法\n\n设置 `schedules` 属性\n\n\n\n## 自定义颜色\n\n\n\n## 自定义日程展示\n\n\n\n## 支持从数据源中获取日程\n\n\n\n## 放大模式\n\n\n\n## 今日高亮样式自定义\n\n> 2.1.1 及以上版本\n\n\n\n## Calendar 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"calendar\"` | 指定为 calendar 渲染器 |\n| schedules | `Array<{startTime: string, endTime: string, content: any, className?: string}> \\| string` | | 日历中展示日程，可设置静态数据或从上下文中取数据，startTime 和 endTime 格式参考 |\n| scheduleClassNames | `Array<string>` | ` |\n| scheduleAction | `SchemaNode` | | 自定义日程展示 |\n| largeMode | `boolean` | `false` | 放大模式 |\n| todayActiveStyle | `Record<string, any>` | | 今日激活时的自定义样式 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------ | ---------------- |\n| change | `value: string` 组件的值 | 时间值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/calendar"},{"title":"Card 卡片","body":"\n## 基本用法\n\n\n\n## 打开链接\n\n> 1.4.0 及以上版本\n\n通过 `href` 属性可以设置点击卡片打开外部链接\n\n\n\n## 设置头像文本\n\n如果没有 avatar，还可以通过 `avatarText` 设置头像文本\n\n\n\n> 1.5.0 及以上版本\n\n可以设置文本背景色，它会根据数据分配一个颜色，主要配合 `cards` 使用\n\n\n\n## 点击卡片的行为\n\n> 1.4.0 及以上版本\n\n通过设置 `itemAction` 可以设置整个卡片的点击行为\n\n\n\n注意它和前面的 `href` 配置冲突，如果设置了 `href` 这个将不会生效\n\n## 设置多媒体卡片\n\n> 1.5.0 及以上版本\n\n通过设置 `media` 可以设置为多媒体卡片, 通过 `mediaPosition` 可以设置多媒体位置\n\n\n\n## 设置标签卡片\n\n> 1.5.0 及以上版本\n\n\n\n## 设置按钮卡片\n\n> 1.5.0 及以上版本\n\n按钮卡片一般以卡片形式展示当前卡片的执行语义，例如：创建卡片、添加卡片等场景。\n\n\n\n## 设置文本卡片\n\n> 1.5.0 及以上版本\n\n\n\n## 设置单元格卡片\n\n> 1.5.0 及以上版本\n\n\n\n## 配置工具栏\n\n> 1.5.0 及以上版本\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------------------- | ------------------------------------ | ----------------------------------- | ------------------------------------------------- |\n| type | `string` | `\"card\"` | 指定为 Card 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| href | | | 外部链接 |\n| header | `Object` | | Card 头部内容设置 |\n| header.className | `string` | | 头部类名 |\n| header.title | | | 标题 |\n| header.titleClassName | `string` | | 标题类名 |\n| header.subTitle | | | 副标题 |\n| header.subTitleClassName | `string` | | 副标题类名 |\n| header.subTitlePlaceholder | `string` | | 副标题占位 |\n| header.description | | | 描述 |\n| header.descriptionClassName | `string` | | 描述类名 |\n| header.descriptionPlaceholder | `string` | | 描述占位 |\n| header.avatar | | | 图片 |\n| header.avatarClassName | `string` | `\"pull-left thumb avatar b-3x m-r\"` | 图片包括层类名 |\n| header.imageClassName | `string` | | 图片类名 |\n| header.avatarText | | | 如果不配置图片，则会在图片处显示该文本 |\n| header.avatarTextBackground | `Array` | | 设置文本背景色，它会根据数据分配一个颜色 |\n| header.avatarTextClassName | `string` | | 图片文本类名 |\n| header.highlight | `boolean` | `false` | 是否显示激活样式 |\n| header.highlightClassName | `string` | | 激活样式类名 |\n| header.href | | | 点击卡片跳转的链接地址 |\n| header.blank | `boolean` | `true` | 是否新窗口打开 |\n| body | `Array` | | 内容容器，主要用来放置非表单项组件 |\n| bodyClassName | `string` | | 内容区域类名 |\n| actions | Array<> | | 配置按钮集合 |\n| actionsCount | `number` | `4` | 按钮集合每行个数 |\n| itemAction | | | 点击卡片的行为 |\n| media | `Object` | | Card 多媒体部内容设置 |\n| media.type | `'image'\\|'video'` | | 多媒体类型 |\n| media.url | `string` | | 图片/视频链接 |\n| media.position | `'left'\\|'right'\\|'top'\\|'bottom'` | `'left'` | 多媒体位置 |\n| media.className | `string` | `\"w-44 h-28\"` | 多媒体类名 |\n| media.isLive | `boolean` | `false` | 视频是否为直播 |\n| media.autoPlay | `boolean` | `false` | 视频是否自动播放 |\n| media.poster | `string` | `false` | 视频封面 |\n| secondary | | | 次要说明 |\n| toolbar | Array<> | | 工具栏按钮 |\n| dragging | `boolean` | `false` | 是否显示拖拽图标 |\n| selectable | `boolean` | `false` | 卡片是否可选 |\n| checkable | `boolean` | `true` | 卡片选择按钮是否禁用 |\n| selected | `boolean` | `false` | 卡片选择按钮是否选中 |\n| hideCheckToggler | `boolean` | `false` | 卡片选择按钮是否隐藏 |\n| multiple | `boolean` | `false` | 卡片是否为多选 |\n| useCardLabel | `boolean` | `true` | 卡片内容区的表单项 label 是否使用 Card 内部的样式 |\n","path":"/zh-CN/components/card"},{"title":"Cards 卡片组","body":"\n卡片展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n这里我们使用手动初始数据域的方式，即配置`data`属性，进行数据域的初始化。\n\n\n\n或者你也可以使用 CRUD 的 \n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | -------------------------------------------- | ------------------- | ------------------------------ |\n| type | `string` | | `\"cards\"` 指定为卡片组。 |\n| title | | | 标题 |\n| source | | `${items}` | 数据源, 获取当前数据域中的变量 |\n| placeholder | | ‘暂无数据’ | 当没数据的时候的文字提示 |\n| className | `string` | | 外层 CSS 类名 |\n| headerClassName | `string` | `amis-grid-header` | 顶部外层 CSS 类名 |\n| footerClassName | `string` | `amis-grid-footer` | 底部外层 CSS 类名 |\n| itemClassName | `string` | `col-sm-4 col-md-3` | 卡片 CSS 类名 |\n| card | | | 配置卡片信息 |\n","path":"/zh-CN/components/cards"},{"title":"Carousel 轮播图","body":"\n## 基本用法\n\n\n\n## 动态列表\n\n轮播图组件目前没有获取数据的配置，因此需要依赖 `service` 来获取数据。\n\n\n\n目前数据关联是通过 name 的方式，因此 api 返回应该是类似这样的：\n\n\n\n其中的 `imageList` 要和配置的 `name` 值对应。\n\n## 点击图片打开外部链接\n\n> 1.3.3 及以上版本\n\n需要放回的字段中除了前面的 image，还有 href 属性\n\n\n\n## 自定义轮播图的展现\n\n通过配置 `itemSchema` 可以自定义轮播图的展现，比如图片默认背景配置是 contain，可以改成 cover：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------------- | --------- | ---------------------- | ------------------------------------------------------- |\n| type | `string` | `\"carousel\"` | 指定为 Carousel 渲染器 |\n| className | `string` | `\"panel-default\"` | 外层 Dom 的类名 |\n| options | `array` | `[]` | 轮播面板数据 |\n| options.image | `string` | | 图片链接 |\n| options.href | `string` | | 图片打开网址的链接 |\n| options.imageClassName | `string` | | 图片类名 |\n| options.title | `string` | | 图片标题 |\n| options.titleClassName | `string` | | 图片标题类名 |\n| options.description | `string` | | 图片描述 |\n| options.descriptionClassName | `string` | | 图片描述类名 |\n| options.html | `string` | | HTML 自定义，同一致 |\n| itemSchema | `object` | | 自定义`schema`来展示数据 |\n| auto | `boolean` | `true` | 是否自动轮播 |\n| interval | `string` | `5s` | 切换动画间隔 |\n| duration | `string` | `0.5s` | 切换动画时长 |\n| width | `string` | `auto` | 宽度 |\n| height | `string` | `200px` | 高度 |\n| controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 |\n| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 |\n| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |\n| thumbMode | `string` | `\"cover\" \\| \"contain\"` | 图片默认缩放模式 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------- | ---------------- |\n| change | `activeIndex: number` 激活图片的索引 <br /> `prevIndex: number` 上一张图片的索引 | 轮播图切换时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| ---------- | ------------------------------------ | ---------- |\n| next | - | 下一张 |\n| prev | - | 上一张 |\n| goto-image | `activeIndex: number` 切换图片的索引 | 切换轮播图 |\n","path":"/zh-CN/components/carousel"},{"title":"Chart 图表","body":"\n图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，\n\n## 基本用法\n\n\n\napi 返回支持两种格式，一种是直接返回完整 echarts 配置，数据包含在配置里，具体格式请参考后面的静态数据写法，另一种是返回纯数据，具体请参考动态数据写法。\n\n## 静态数据\n\n在 `config` 里填写完整的 echarts 配置，这里的数据是静态的。\n\n\n\n## 动态数据\n\n如果要实现动态数据，需要在 config 中做调整，比如将前面的例子改成如下写法\n\n\n\n其中 api 返回内容是如下写法，可以看到通过语法，我们可以将 api 放回结果中的 line 字段作为折线的数据。\n\n\n\n除了 `config` 中的 `data`，`config` 里的其它属性也都支持数据映射，还能支持数据映射中的各种过滤器。\n\n### 使用上层数据接口\n\n有时候数据是在上层获取的，比如通过 service 中返回了数据，这时需要通过 `trackExpression` 来指定跟踪什么数据，比如下面的例子，数据是从 service 获取的就需要配置 `trackExpression`。\n\n\n\n## 配置图表点击行为\n\n可以通过配置`\"clickAction\": {}`，来指定图表节点的点击行为，支持 amis 的 。\n\n然后在配置的行为中可以通过 的值，例如下面例子中可以通过`${value|json}`获取到点击节点的`传入的数据值`\n\n> 点击下面坐标中的节点查看效果！\n\n\n\n## 远程拉取动态配置项\n\n配置`api`，来远程拉取图标配置\n\n\n\n## 通过组件间联动，更新图表\n\n\n\n## 对函数配置的特殊支持\n\nECharts 中有些配置项可以写函数，比如 formatter 和 sort，但在 JSON 里无法写函数，因此我们做了特殊支持，将看起来像函数的字符串转成了函数：\n\n\n\n## 使用地图\n\n从 amis 1.1.0 版本开始，ECharts 版本升级到 5.0.0，为了规避政策风险，在这个版本删除了之前的地图 geojson，如果需要这个功能需要手动引入。\n\n方法是去 `https://github.com/apache/echarts/tree/master/test/data/map/js` 下载 `china.js` 和 `world.js`。\n\n对于 npm 版本，直接 `import` 这两个文件就行。\n\n对于 JS SDK 版本，需要先加入如下代码如下方式：\n\n\n\n然后通过 script 标签引入这两个文件，或者用下面的新版方法\n\n## 地图配置\n\n> 2.4.1 及以上版本\n\n新增了 `mapURL` 及 `mapName` 两个配置项\n\n\n\n## 加载百度地图\n\n配置 `loadBaiduMap` 后会加载百度地图，需要配置 `ak`\n\n\n\n## 动态处理 echart 配置\n\necharts 的 config 一般是静态配置的，支持简单的数据映射。如果你觉得还不够灵活可以通过自己手写逻辑代码来完成配置。\n\n通过配置 dataFiler 来处理。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | -------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"chart\"` | 指定为 chart 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| body | | | 内容容器 |\n| api | | | 配置项接口地址 |\n| source | | | 通过数据映射获取数据链中变量值作为配置 |\n| initFetch | `boolean` | | 组件初始化时，是否请求接口 |\n| interval | `number` | | 刷新时间(最小 1000) |\n| config | `object` 或 `string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 |\n| style | `object` | | 设置根元素的 style |\n| width | `string` | | 设置根元素的宽度 |\n| height | `string` | | 设置根元素的高度 |\n| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |\n| trackExpression | `string` | | 当这个表达式的值有变化时更新图表 |\n| dataFilter | `string` | | 自定义 echart config 转换，函数签名：function(config, echarts, data) {return config;} 配置时直接写函数体。其中 config 是当前 echart 配置，echarts 就是 echarts 对象，data 为上下文数据。 |\n| mapURL | | | 地图 geo json 地址 |\n| mapName | string | | 地图名称 |\n| loadBaiduMap | boolean | | 加载百度地图 |\n\n## 事件表\n\n> 2.4.1 及以上版本\n\n当前组件会对外派发`click`、`mouseover`、`legendselectchanged`事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看。\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ------------------------------------------ |\n| reload | - | 刷新（重新加载） |\n| setValue | `value: object` 更新的数据 | 更新数据，等于更新图表所依赖数据域中的变量 |\n\n2.4.1 及以上版本，除了以上动作，还支持直接触发，即通过`actionType`指定行为名称，行为配置通过`args: {动作配置项名称: xxx}`来配置具体的参数。\n","path":"/zh-CN/components/chart"},{"title":"Code 代码高亮","body":"\n使用代码高亮的方式来显示一段代码。\n\n## 基本用法\n\n\n\n## 语言设置\n\n默认语言是 html，可以通过 language 指定以下语言：\n\n`bat`、 `c`、 `coffeescript`、 `cpp`、 `csharp`、 `css`、 `dockerfile`、 `fsharp`、 `go`、 `handlebars`、 `html`、 `ini`、 `java`、 `javascript`、 `json`、 `less`、 `lua`、 `markdown`、 `msdax`、 `objective-c`、 `php`、 `plaintext`、 `postiats`、 `powershell`、 `pug`、 `python`、 `r`、 `razor`、 `ruby`、 `sb`、 `scss`、`shell`、 `sol`、 `sql`、 `swift`、 `typescript`、 `vb`、 `xml`、 `yaml`\n\n\n\nlanguage 支持从上下文获取数据\n\n\n\n## 动态数据\n\n可以使用 name 来从上下文来获取数据，比如\n\n\n\n因此它还能放在表单、crud 中实现代码的展现。\n\n## 主题及 tab 大小\n\n通过 `editorTheme` 设置主题，`tagSize` 设置 tab 宽度\n\n\n\n## 超出换行\n\n> 1.5.1 及以上版本\n\n通过 `wordWrap` 设置是否折行，默认是折行\n\n\n\n## 自定义语言高亮\n\n还可以通过 `customLang` 参数来自定义高亮，详情参考。\n\n`customLang` 中主要是 `tokens` 设置，这里是语言词法配置，它有 4 个配置项：\n\n- `name`：词法名称\n- `regex`：词法的正则匹配，注意因为是在字符串中，这里正则中如果遇到 `\\` 需要写成 `\\\\`\n- `regexFlags`: 可选，正则的标志参数\n- `color`：颜色\n- `fontStyle`: 可选，字体样式，比如 `bold` 代表加粗\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | ---------------------------------- |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 显示的颜色值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n| language | `string` | | 所使用的高亮语言，默认是 plaintext |\n| tabSize | `number` | 4 | 默认 tab 大小 |\n| editorTheme | `string` | 'vs' | 主题，还有 'vs-dark' |\n| wordWrap | `string` | `true` | 是否折行 |\n","path":"/zh-CN/components/code"},{"title":"Collapse 折叠器","body":"\n## 基本用法\n\n\n\n## 手风琴模式\n\n\n\n## 自定义图标\n\n\n\n## 设置图标位置\n\n\n\n## 面板嵌套\n\n\n\n## 折叠面板禁用\n\n\n\n## 折叠面板图标隐藏\n\n\n\n## CollapseGroup 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| - | - | - | - |\n| type | `string` | `\"collapse-group\"` | 指定为 collapse-group 渲染器 |\n| activeKey | `Array<string \\| number \\| never> \\| string \\| number` | - | 初始化激活面板的key |\n| accordion | `boolean` | `false` | 手风琴模式 |\n| expandIcon | `SchemaNode` | - | 自定义切换图标 |\n| expandIconPosition | `string` | `\"left\"` | 设置图标位置，可选值`left \\| right` |\n\n## Collapse 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| - | - | - | - |\n| type | `string` | `\"collapse\"` | 指定为 collapse 渲染器 |\n| disabled | `boolean` | `false` | 禁用 |\n| collapsed | `boolean` | `true` | 初始状态是否折叠 |\n| key | `string \\| number` | - | 标识 |\n| header | `string \\| SchemaNode` | - | 标题 |\n| body | `string \\| SchemaNode` | - | 内容 |\n| showArrow | `boolean` | `true` | 是否展示图标 |\n\n","path":"/zh-CN/components/collapse"},{"title":"Color 颜色","body":"\n用于展示颜色\n\n## 基本用法\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | --------- | ------ | -------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"color\"`；在 Form 中用作静态展示，为`\"static-color\"` |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 显示的颜色值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n| defaultColor | `string` | `#ccc` | 默认颜色值 |\n| showValue | `boolean` | `true` | 是否显示右边的颜色值 |\n","path":"/zh-CN/components/color"},{"title":"Container 容器","body":"\nContainer 是一种容器组件，它可以渲染其他 amis 组件。\n\n注意 Container 组件因为历史原因多了一层 div，推荐使用 来作为容器。\n\n## 基本用法\n\n\n\n### style\n\ncontainer 可以通过 style 来设置样式，比如背景色或背景图，注意这里的属性是使用驼峰写法，是 `backgroundColor` 而不是 `background-color`。\n\n\n\n### wrapperComponent\n\n修改标签名可以让容器使用其它标签渲染，比如 `pre`\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------- | ------------- | ----------------------- |\n| type | `string` | `\"container\"` | 指定为 container 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| bodyClassName | `string` | | 容器内容区的类名 |\n| wrapperComponent | `string` | `\"div\"` | 容器标签名 |\n| style | `Object` | | 自定义样式 |\n| body | | | 容器内容 |\n","path":"/zh-CN/components/container"},{"title":"CRUD 增删改查","body":"\nCRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。\n\n注意 CRUD 所需的数据必须放 items 中，因此如果只是想显示表格类型的数据没有分页，请使用 。\n\n## 基本用法\n\n最基本的用法是配置 **数据源接口(api)** 以及 **展示列(columns)**\n\n\n\n## 数据源接口数据结构要求\n\n- `items`或`rows`：用于返回数据源数据，格式是数组\n- `total`: 用于返回数据库中一共有多少条数据，用于生成分页\n\n\n\n如果想要通过接口控制当前所处在第几页，可以返回字段 `page`（或自定义字段 `pageField` 的值）。\n\n\n\n如果无法知道数据总数，只能知道是否有下一页，请返回如下格式，amis 会简单生成一个简单版本的分页控件。\n\n\n\n如果不需要分页，或者配置了 `loadDataOnce` 则可以忽略掉 `total` 和 `hasNext` 参数。\n\n> 如果 api 地址中有变量，比如 `/api/mock2/sample/${id}`，amis 就不会自动加上分页参数，需要自己加上，改成 `/api/mock2/sample/${id}?page=${page}&perPage=${perPage}`\n\n## 分页参数\n\n默认的分页参数是 `page` 和 `perPage`，page 代表页数，比如第一页，perPage 代表每页显示几行。\n\n如果要其它格式，比如转成 `limit` 和 `offset`，可以使用公式来转换，比如\n\n`/api/mock2/sample?limit=${perPage}&offset=${(page - 1) * perPage}`\n\n## 功能\n\n既然这个渲染器叫增删改查，那接下来分开介绍这几个功能吧。\n\n### 增\n\n其实这个渲染器并没有包含新增功能，新增功能其实还是依靠其他位置放个弹框表单完成，弹框完事了会自动让页面里面的 CRUD 刷新如：\n\n\n\n当然如果你不想要自动刷新，那么给按钮配置 reload: \"none\" 就行了。\n\n### 删\n\n删除功能主要有三种实现：或者直接添加一个操作栏，在里面放个类型为 ajax 类型的按钮即可。在这个按钮里面能获得对应的行数据，而且完成后也会自动刷新这个 CRUD 列表。\n\n\n\n### 改\n\n改和删其实是差不多的，唯一的区别在于，配置不同的 api，按钮类型改成弹框。\n\n\n\n弹框里面可用数据自动就是点击的那一行的行数据，如果列表没有返回，可以在 form 里面再配置个 initApi 初始化数据，如果行数据里面有倒是不需要再拉取了。表单项的 name 跟数据 key 对应上便自动回显了。默认发送给表单的保存接口只会包含配置了的表单项，如果不够，请在 api 上配置数据映射，或者直接添加 hidden 类型的表单项（即隐藏域 input[type=hidden]）。\n\n### 查\n\n查，就不单独介绍了，这个文档绝大部分都是关于查的。\n\n## 展示模式\n\nCRUD 支持下面 3 种展示模式，默认为 Table 表格模式。\n\n### Table 表格模式\n\nTable 模式支持 中的所有功能。\n\n\n\n这个模式下会默认开启固定表头功能，如果不需要可以使用 `\"affixHeader\": false` 关闭。\n\n### List 列表模式\n\nList 模式支持 中的所有功能。\n\n\n\n### Cards 卡片模式\n\nCards 模式支持 中的所有功能。\n\n\n\n## 查询条件表单\n\n大部分表格展示有对数据进行检索的需求，CRUD 自身支持通过配置`filter`，实现查询条件过滤表单。`filter` 配置实际上同 组件，因此支持绝大部分`form`的功能。\n\n在条件搜索区的 `Engine` 输入框中输入任意值查询会发现结果中 `ID` 为 1 - 3 的 `Rendering engine` 列因为返回值中没有对应字段值，被错误填入了与 `filter` 中相同 `name` 的字段值，这是因为表格 Cell 通过获取到了上层数据域 `filter` 中相同字段的数据值。这种情况可以在 CRUD `columns` 对应列配置`\"canAccessSuperData\": false`禁止访问父级数据域（比如: `Platform`列）。\n\n\n\n**请注意**：在默认没有自定义配置 api 数据映射时，提交查询条件表单，会自动将表单中的表单项值，发送给`crud`所配置的接口，然后通过后端接口，实现对数据的过滤操作，前端默认是不会进行任何的数据过滤操作\n\n如果想前端实现过滤功能，请看部分。\n\n### 自动生成查询区域\n\n通过设置`\"autoGenerateFilter\": true`开启查询区域，会根据列元素的 `searchable` 属性值，自动生成查询条件表单，只有 `searchable` 属性值为合法的组件 Schema 时才会生成查询条件。注意这个属性和 `filter` 冲突，开启 `filter` 后 `autoGenerateFilter` 将会失效。\n\n\n\n## 配置默认请求参数\n\n可以配置`defaultParams`，来指定拉取接口时的默认参数：\n\n\n\n例如上例中，配置`{ perPage: 50 }`，指定分页的默认每页数据条数为 50 条。\n\n## 数据源接口轮询\n\n可以配置`interval`来实现数据接口轮询功能，最低为`1000`毫秒：\n\n\n\n配置`stopAutoRefreshWhen`表达式，来实现满足条件，停止轮询\n\n## 列配置\n\n除了支持 以外，crud 还支持下面这些配置，帮助更好的操作数据\n\n### 排序检索\n\n可以在列上配置`\"sortable\": true`，该列表头右侧会渲染一个可点击的排序图标，可以切换`正序`和`倒序`。\n\n\n\namis 只负责生成排序组件，并将排序参数传递给接口，而不会在前端对数据进行排序处理。参数格式如下：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n### 快速搜索\n\n可以在列上配置`\"searchable\": true`，该列表头右侧会渲染一个可点击的搜索图标，点击可以输入关键字进行该列的搜索：\n\n\n\namis 只负责生成搜索组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n### 快速过滤\n\n可以在列上配置`filterable`属性，该列表头右侧会渲染一个可点击的过滤图标，点击显示下拉框，选中进行过滤：\n\n\n\namis 只负责生成下拉选择器组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n### 快速编辑\n\n可以通过给列配置：`\"quickEdit\":true`和`quickSaveApi` 可以实现表格内快速编辑并批量保存的功能。\n\n如下`Rendering engine`列的每一行中，会生成可编辑图标，点击后会显示弹框，用于编辑该列的值，\n\n\n\n#### 指定编辑表单项类型\n\n`quickEdit`也可以配置对象形式，可以指定编辑表单项的类型，例如`\"type\": \"select\"`：\n\n\n\n#### 快速编辑多个表单项\n\n\n\n#### 内联模式\n\n配置`quickEdit`的`mode`为`inline`。可以直接将编辑表单项渲染至表格内，可以直接操作编辑。\n\n\n\n#### 即时保存\n\n如果想编辑完表单项之后，不想点击顶部确认按钮来进行保存，而是即时保存当前标记的数据，则需要配置 `quickEdit` 中的 `\"saveImmediately\": true`，然后配置接口`quickSaveItemApi`，可以直接将编辑表单项渲染至表格内操作。\n\n\n\n你也可以在`saveImmediately`中配置 api，实现即时保存\n\n\n\n#### 配置快速编辑启动条件\n\n通过 `quickEditEnabledOn` 配置表达式来实现，如下，只有 id 小于 5 的数据可以编辑 engine。\n\n\n\n## 顶部和底部工具栏\n\ncrud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在表格顶部和底部渲染组件，\n\n\n\n上例中我们在顶部渲染了一段模板，通过`${count}`取到数据域中，CRUD 返回的`count`变量值；然后我们在底部渲染了一个按钮。\n\n从上面一些例子中你可能已经发现，当我们不配置该属性时，crud 默认会在顶部和底部渲染一些组件，实际上，`headerToolbar`和`footerToolbar`默认会有下面这些配置：\n\n\n\n- 在顶部工具栏中：渲染批量操作按钮（如果在 crud 中，配置了 bulkActions 的话）和 分页组件\n- 在底部工具栏中：渲染数据统计组件 和 分页组件\n\n> 如果你不希望在顶部或者底部渲染默认组件，你可以设置`headerToolbar`和`footerToolbar`为空数组`[]`\n\n这些组件还能设置 `align` 来控制位置，有 `left` 和 `right` 两种，比如\n\n\n\n### 其它 amis 组件\n\n在 `headerToolbar` 和 `footerToolbar` 中可以配置各种 amis 其它组件，比如按钮和 tpl：\n\n\n\n### 分页\n\n在`headerToolbar`或者`footerToolbar`数组中添加`pagination`字符串，并且在数据源接口中返回了数据总数`count`，即可以渲染分页组件；添加`switch-per-page`字符串，可以渲染切换每页条数组件\n\n\n\n`crud`默认不会处理数据分页，只是会把分页参数传给后端，由后端实现分页，并返回需要展示的数据 和 总数据数`total`变量：\n\n默认传给后端的分页参数格式为：\n\n\n\n你可以通过配置`pageField`和`perPageField`来修改传给后端的分页数据格式，如：\n\n\n\n这样传给后端的参数格式将为：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n\n\n分页有两种模式：\n\n##### 1. 知道数据总数\n\n如果后端可以知道数据总数时，接口返回格式如下：\n\n\n\n该模式下，会自动计算总页码数，渲染出有页码的分页组件\n\n##### 2. 不知道数据总数\n\n如果后端无法知道数据总数，那么可以返回`hasNext`字段，来标识是否有下一页。\n\n\n\n这样 amis 会在配置分页组件的地方，渲染出一个简单的页面跳转控件。\n\n> 如果总数据只够展示一页，则默认不显示该分页组件\n\n### 批量操作\n\n在`headerToolbar`或者`footerToolbar`数组中添加`bulkActions`字符串，并且在 crud 上配置`bulkActions`行为按钮数组，可以实现选中表格项并批量操作的功能。\n\n> 需要设置`primaryField`用于标识选中状态，配置当前行数据中的某一**唯一标识字段**，例如`id`，否则可能会出现无法选中的问题\n\n\n\n#### 批量操作数据域\n\n批量操作会默认将下面数据添加到数据域中以供**按钮行为**使用，需要注意的是**静态**和**批量操作**时的数据域是不同的。**静态数据域**是指渲染批量操作区域时能够获取到的数据，**批量操作数据域**是指触发按钮动作时能够获取到的数据，具体区别参考下表：\n\n| 属性名 | 类型 | 所属数据域 | 说明 | 版本 |\n| ----------------- | --------------------- | -------------- | ------------------------------------------------------------------------------------ | ------- |\n| `currentPageData` | `Array<Column>` | 静态, 批量操作 | 当前分页数据集合，`Column`为当前 Table 数据结构定义 | `2.4.0` |\n| `selectedItems` | `Array<Column>` | 静态, 批量操作 | 选中的行数据集合 |\n| `unSelectedItems` | `Array<Column>` | 静态, 批量操作 | 未选中的行数据集合 |\n| `items` | `Array<Column>` | 批量操作 | `selectedItems` 的别名 |\n| `rows` | `Array<Column>` | 批量操作 | `selectedItems` 的别名，推荐用 `items` |\n| `ids` | `string` | 批量操作 | 多个 id 值用英文逗号隔开，前提是行数据中有 id 字段，或者有指定的 `primaryField` 字段 |\n| `...rest` | `Record<string, any>` | 批量操作 | 选中的行数据集合的首个元素的字段，注意列字段如果和以上字段重名时，会被上述字段值覆盖 |\n\n你可以通过，在`api`中获取这些参数。\n\n**约束批量操作**\n\n有时候并不是勾选了就能支持批量操作的，比如想约束如果勾选了某条数据 owner 值不是当前用户的就不可以操作。\n\n有两种方式来约束。\n\n1. 批量操作按钮上配置 `disabledOn` 值为 `this.selectedItems.some(item => item.owner === this.amisUser.name)`\n2. 给表格加上 `itemCheckableOn` 值为 `this.owner === this.amisUser.name` 表示只有 owner 是自己的才可以打勾。\n\n**保留条目选择**\n\n默认分页、搜素后，用户选择条目会被清空，配置`keepItemSelectionOnPageChange`属性后会保留用户选择，可以实现跨页面批量操作。\n同时可以通过配置`maxKeepItemSelectionLength`属性限制最大勾选数\n\n\n\n还可以设置 `\"checkOnItemClick\": true` 属性来支持点击一行的触发选中状态切换\n\n\n\n### 数据统计\n\n在`headerToolbar`或者`footerToolbar`数组中添加`statistics`字符串，可以实现简单的数据统计功能\n\n\n\n### 加载更多\n\n在`headerToolbar`或者`footerToolbar`数组中添加`load-more`字符串，可以实现点击加载更多功能。\n\n\n\n### 导出 CSV\n\n在`headerToolbar`或者`footerToolbar`数组中添加`export-csv`字符串，可以实现点击下载 CSV 的功能，注意这里只包括当前分页的数据，要下载全部数据需要通过后端 API 实现。\n\n\n\n### 通过 api 导出 CSV\n\n> 1.4.0 及以上版本\n\n`export-csv` 可以单独配置 `api` 实现导出全量功能，这个 api 的返回结果和 CRUD 类似\n\n\n\n### 导出 Excel\n\n在`headerToolbar`或者`footerToolbar`数组中添加`export-excel`字符串，可以实现点击下载 Excel 的功能，和导出 CSV 一样只包括当前分页的数据，但它们有明显区别：\n\n1. 导出 CSV 是将 api 返回数据导出，表头是数据里的 key，而 Excel 的表头使用的是 label。\n2. 导出 Excel 更重视展现一致，支持合并单元格、链接、mapping 映射、图片（需要加）。\n3. 导出 Excel 只在 `mode` 为 `table` 时能用。\n\n\n\n#### 只导出部分列\n\n> 1.4.0 及以上版本\n\n通过配置 `columns` 来支持只导出部分列，其中是需要导出的列 `name` 数组\n\n\n\n> 1.8.0 及以上版本\n\n`columns` 支持变量，可以从上下文取数组\n\n\n\n#### 自定义导出列\n\n> 1.8.0 及以上版本\n\n除了简单隐藏某些列，还可以通过 `exportColumns` 完全控制导出列，比如新增某些列，它的配置项和 `columns` 一致\n\n\n\n#### 通过 api 导出 Excel\n\n> 1.1.6 以上版本支持\n\n除了前面的用法，还可以配置 api 来通过数据请求来导出 Excel，实现类似全量导出的功能\n\n\n\n#### 自定义导出 Excel 的文件名\n\n> 1.1.7 以上版本支持\n\n通过 filename 自定义导出文件名（支持模板变量）\n\n\n\n### 显隐显示查询条件表单\n\n在`headerToolbar`或者`footerToolbar`数组中添加`filter-toggler`字符串，并且在 crud 中配置`\"filterTogglable\": true`后，可以渲染一个可以切换显示查询表单的功能按钮\n\n\n\n### 刷新按钮\n\n> 1.5.0 及以上版本\n\n可以通过 `reload` 来展现刷新按钮\n\n\n\n它其实是个简化的 `button` 组件，可以参考 `button` 组件的文档做调整。`reload`支持两种触发方式：\n\n- `\"type\": \"reload\"`，CRUD 内置的方法\n- `{\"actionType\": \"reload\", \"target\": \"targetName\"}`，动作触发\n\n\n\n## 总结行\n\n如果是默认的表格模式，还支持增加总结行，具体请参考 的文档。\n\n## 弹框与数据链\n\n一般 CRUD 中会有弹框，然后进行数据展示或进行二次编辑的需求，通过在列中配置按钮，然后配置弹框，弹框内配置相应的组件即可。\n\n现在问题是，如何获取到当前操作行的数据呢？\n\n实际上，你操作当前行数据，会成为弹框这层节点的父级节点，因此你可以通过 ，获取到上层，也就是点击的行的数据，具体获取方法和普通组件获取数据域中数据的方法相同，\n\n\n\n例如上例中 Tpl 用 `${browser}` 获取 `browser` 变量，Form 中配置`\"name\": \"engine\"` 映射 `engine` 变量。\n\n> 遇到数据字段冲突时，可以在 解决。\n\n## 拖拽排序\n\n通过配置`\"draggable\": true`和保存排序接口`saveOrderApi`，可以实现拖拽排序功能，\n\n\n\n同样的，前端是不会处理排序结果，需要后端调用接口`saveOrderApi`来保存新的顺序\n\n发送方式默认为`POST`，会包含以下信息。\n\n- `ids` 字符串如： `2,3,1,4,5,6` 用 id 来记录新的顺序。 前提是你的列表接口返回了 id 字段。另外如果你的 primaryField 不是 `id`，则需要配置如： `primaryField: \"order_id\"`。注意：无论你配置成什么 primayField，这个字段名始终是 ids。\n- `rows` `Array<Item>` 数组格式，新的顺序，数组里面包含所有原始信息。\n- `insertAfter` 或者 `insertBefore` 这是 amis 生成的 diff 信息，对象格式，key 为目标成员的 primaryField 值，即 id，value 为数组，数组中存放成员 primaryField 值。如：\n\n \n\n 表示：成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。\n\n你可以通过，在`api`中获取这些参数。\n\n如下:\n\n\n\n这样就只会发送 ids 了。\n\n### 列排序\n\n通过配置`headerToolbar` 中 `columns-toggler` 的 `\"draggable\": true`可以实现设置显示列和列排序功能。\n\n\n\n## 单条操作\n\n当操作对象是单条数据时这类操作叫单条操作，比如：编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成（其他模式参考 table 模式）。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮，将数据通过 api 发送给后端完成。\n\nCRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去，如果你的按钮行为是弹出时，还会包含一下信息：\n\n- `hasNext` `boolean` 当按钮行为是弹框时，还会携带这个数据可以用来判断当前页中是否有下一条数据。\n- `hasPrev` `boolean` 当按钮行为是弹框时，还会携带这个数据可以判断用来当前页中是否有上一条数据。\n- `index` `number` 当按钮行为是弹框时，还会携带这个数据可以用来获取当前行数据在这一页中的位置。\n- `prevIndex` `number`\n- `nextIndex` `number`\n\n你可以通过，在`api`中获取这些参数。\n\n如果你的按钮类型是 ajax，你也可以限定只发送部分数据比如。\n\n\n\n上面这个例子就会发送 id 字段了，如果想要全部发送过去同时还想添加点别的字段就这样：\n\n\n\n> **注意：** 如果使用`feedback`弹窗，如果不想关闭弹窗时触发`crud`再次拉取数据，需要设置`button`的`\"reload\":\"none\"`\n\n## 过滤条件参数同步地址栏\n\n默认 CRUD 会将过滤条件参数同步至浏览器地址栏中，比如搜索条件、当前页数，这也做的目的是刷新页面的时候还能进入之前的分页。\n\n但也会导致地址栏中的参数数据合并到顶层的数据链中，例如：自动给同名的表单项设置默认值。如果不希望这个功能，可以设置 `syncLocation: false` 来关闭。\n\n> 本文中的例子为了不相互影响都关闭了这个功能。\n> 另外如果需要使用接口联动，需要设置`syncLocation: false`\n\n## 前端一次性加载\n\n如果你的数据并不是很大，而且后端不方便做分页和条件过滤操作，那么通过配置`loadDataOnce`实现前端一次性加载并支持分页和条件过滤操作\n\n\n\n配置一次性加载后，基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索，需要用到功能：\n\n\n\n上例使用了数据映射中的`filter`过滤器，在前端实现了`engine`列的搜索功能。\n\n> **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能\n\n## 动态列\n\n> since 1.1.6\n\n在 1.1.6 之前的版本，只能通过 service + schemaApi 让后端返回 schema 配置来实现，1.1.6 版本之后可以直接通过 crud 的数据接口返回了。\n用这种方式可以简化动态列的实现，与 items 并列返回 columns 数组即即可。\n\n\n\n## 使用数据链中的数据\n\n可以通过 `source` 属性来自定义去返回数据的字段，或者取数据域中的数据，比如\n\n\n\n## 自定义点击行的行为\n\n> 1.4.0 及以上版本\n\n配置 `itemAction` 可以实现点击某一行后进行自定义操作，支持 里的所有配置，比如弹框、刷新其它组件等。\n\n\n\n注意这个属性和 `checkOnItemClick` 冲突，因为都是定义行的点击行为，开启 `itemAction` 后 `checkOnItemClick` 将会失效。\n\n> 1.4.2 及以上版本\n\nitemAction 里的 onClick 还能通过 `data` 参数拿到当前行的数据，方便进行下一步操作\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------------------- | ------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | | `type` 指定为 CRUD 渲染器 |\n| mode | `string` | `\"table\"` | `\"table\" 、 \"cards\" 或者 \"list\"` |\n| title | `string` | `\"\"` | 可设置成空，当设置成空时，没有标题栏 |\n| className | `string` | | 表格外层 Dom 的类名 |\n| api | | | CRUD 用来获取列表数据的 api。 |\n| loadDataOnce | `boolean` | | 是否一次性加载所有数据（前端分页） |\n| loadDataOnceFetchOnFilter | `boolean` | `true` | 在开启 loadDataOnce 时，filter 时是否去重新请求 api |\n| source | `string` | | 数据映射接口返回某字段的值，不设置会默认使用接口返回的`${items}`或者`${rows}`，也可以设置成上层数据源的内容 |\n| filter | | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 |\n| filterTogglable | `boolean` | `false` | 是否可显隐过滤器 |\n| filterDefaultVisible | `boolean` | `true` | 设置过滤器默认是否可见。 |\n| initFetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 |\n| interval | `number` | `3000` | 刷新时间(最低 1000) |\n| silentPolling | `boolean` | `false` | 配置刷新时是否隐藏加载动画 |\n| stopAutoRefreshWhen | `string` | `\"\"` | 通过来配置停止刷新的条件 |\n| stopAutoRefreshWhenModalIsOpen | `boolean` | `false` | 当有弹框时关闭自动刷新，关闭弹框又恢复 |\n| syncLocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 |\n| draggable | `boolean` | `false` | 是否可通过拖拽排序 |\n| resizable | `boolean` | `true` | 是否可以调整列宽度 |\n| itemDraggableOn | `boolean` | | 用来配置是否可拖拽排序 |\n| | | 保存排序的 api。 |\n| | | 快速编辑后用来批量保存的 API。 |\n| | | 快速编辑配置成及时保存时使用的 API。 |\n| bulkActions | Array<> | | 批量操作列表，配置后，表格可进行选中操作。 |\n| messages | `Object` | | 覆盖消息提示，如果不指定，将采用 api 返回的 message |\n| messages.fetchFailed | `string` | | 获取失败时提示 |\n| messages.saveOrderFailed | `string` | | 保存顺序失败提示 |\n| messages.saveOrderSuccess | `string` | | 保存顺序成功提示 |\n| messages.quickSaveFailed | `string` | | 快速保存失败提示 |\n| messages.quickSaveSuccess | `string` | | 快速保存成功提示 |\n| primaryField | `string` | `\"id\"` | 设置 ID 字段名。 |\n| perPage | `number` | 10 | 设置一页显示多少条数据。 |\n| orderBy | `string` | | 默认排序字段，这个是传给后端，需要后端接口实现 |\n| orderDir | `asc` \\| `desc` | | 排序方向 |\n| defaultParams | `Object` | | 设置默认 filter 默认参数，会在查询的时候一起发给后端 |\n| pageField | `string` | `\"page\"` | 设置分页页码字段名。 |\n| perPageField | `string` | `\"perPage\"` | 设置分页一页显示的多少条数据的字段名。注意：最好与 defaultParams 一起使用，请看下面例子。 |\n| perPageAvailable | `Array<number>` | `[5, 10, 20, 50, 100]` | 设置一页显示多少条数据下拉框可选条数。 |\n| orderField | `string` | | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 |\n| hideQuickSaveBtn | `boolean` | `false` | 隐藏顶部快速保存提示 |\n| autoJumpToTopOnPagerChange | `boolean` | `false` | 当切分页的时候，是否自动跳顶部。 |\n| syncResponse2Query | `boolean` | `true` | 将返回数据同步到过滤器上。 |\n| keepItemSelectionOnPageChange | `boolean` | `true` | 保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。 |\n| labelTpl | `string` | | 单条描述模板，`keepItemSelectionOnPageChange`设置为`true`后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 |\n| headerToolbar | Array | `['bulkActions', 'pagination']` | 顶部工具栏配置 |\n| footerToolbar | Array | `['statistics', 'pagination']` | 底部工具栏配置 |\n| alwaysShowPagination | `boolean` | `false` | 是否总是显示分页 |\n| affixHeader | `boolean` | `true` | 是否固定表头(table 下) |\n| autoGenerateFilter | `boolean` | `false` | 是否开启查询区域，开启后会根据列元素的 `searchable` 属性值，自动生成查询条件表单 |\n| resetPageAfterAjaxItemAction | `boolean` | `false` | 单条数据 ajax 操作后是否重置页码为第一页 |\n| autoFillHeight | `boolean` 丨 `{height: number}` | | 内容区域自适应高度 |\n\n注意除了上面这些属性，CRUD 在不同模式下的属性需要参考各自的文档，比如\n\n- 默认。\n- 模式。\n- 模式。\n\n### 列配置属性表\n\n除了 Table 组件默认支持的列配置，CRUD 的列配置还额外支持以下属性：\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- |\n| sortable | `boolean` | `false` | 是否可排序 |\n| searchable | `boolean` \\| `Schema` | `false` | 是否可快速搜索，开启`autoGenerateFilter`后，`searchable`支持配置`Schema` |\n| filterable | `boolean` \\| | `false` | 是否可快速搜索，`options`属性为静态选项，支持设置`source`属性从接口获取选项 |\n| quickEdit | `boolean` \\| | - | 快速编辑，一般需要配合`quickSaveApi`接口使用 |\n\n#### QuickFilterConfig\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ---------- | ----------------------------- | ------- | -------------------------------------------------------- | ------- |\n| options | `Array<any>` | - | 静态选项 | |\n| multiple | `boolean` | `false` | 是否支持多选 | |\n| source | | - | 选项 API 接口 | |\n| strictMode | `string` | `false` | 严格模式，开启严格模式后，会采用 JavaScript 严格想等比较 | `2.3.0` |\n\n#### QuickEditConfig\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------ | ------------------------- | ----------- | ------------------------------------------------------------------------------------------------------- | ---- |\n| type | `SchemaType` | - | 表单项组件类型 | |\n| body | `SchemaCollection` | - | 组件容器，支持多个表单项组件 | |\n| mode | `'inline' \\| 'popOver'` | `'popOver'` | 编辑模式，inline 为行内编辑，popOver 为浮层编辑 | |\n| saveImmediately | `boolean` 或 `{api: Api}` | `false` | 是否修改后即时保存，一般需要配合`quickSaveItemApi`接口使用，也可以直接配置 | |\n| quickEditEnabledOn | `SchemaExpression` | - | 开启快速编辑条件 | |\n\n### columns-toggler 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ------------------------------ | --------- | -------------------------------------- |\n| label | `string` | | 按钮文字 |\n| tooltip | `string` | | 按钮提示文字 |\n| disabledTip | `string` | | 按钮禁用状态下的提示 |\n| align | `\"left\" \\| \"right\"` | `\"left\"` | 点击内容是否关闭 |\n| size | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\"` | | 按钮大小，参考 |\n| footerBtnSize | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\"` | | 弹窗底部按钮大小，参考 |\n| level | `string` | `default` | 按钮样式，参考 |\n| draggable | `boolean` | `false` | 是否可通过拖拽排序 |\n| defaultIsOpened | `boolean` | `false` | 默认是否展开 |\n| hideExpandIcon | `boolean` | `true` | 是否隐藏展开的图标 |\n| overlay | `boolean` | `false` | 是否显示遮罩层 |\n| closeOnOutside | `boolean` | | 点击外部是否关闭 |\n| closeOnClick | `boolean` | | 点击内容是否关闭 |\n| iconOnly | `boolean` | `false` | 是否只显示图标。 |\n| icon | `string` | | 按钮的图标 |\n| className | `string` | | 外层 CSS 类名 |\n| btnClassName | `string` | | 按钮的 CSS 类名 |\n","path":"/zh-CN/components/crud"},{"title":"Custom 自定义组件","body":"\n用于实现自定义组件，它解决了之前 JS SDK 和可视化编辑器中难以支持自定义组件的问题。\n\n## 基本用法\n\n设置 type 类型为 custom\n\n### onMount\n\n这是节点在初始化的时候执行的函数，它接收三个参数：\n\n- dom，组件加载之后的 dom 节点\n- data，组件初始值，需要设置 name\n- onChange，修改这个组件对应 name 的值\n- props，后面会单独介绍\n\n比如在这样的 form 组件中：\n\n\n\n点击按钮之后，执行 `onChange` 函数，就会将 `myName` 这个参数的值改成 `new`，点击表单提交的时候，就会有一个 `myName=new` 的表单数据。\n\n### onUpdate\n\nonUpdate 是在数据变更的时候调用，注意这个数据变更会包含表单内的所有其他组件。\n\n\n\n这个例子中，无论是邮箱还是用户名修改，都会触发 onUpdata 函数，其中 `data` 是当前值，`prevData` 是之前的值：\n\n1. 如果修改 email，则 data 将会是 `{email: 'xxx'}`，prevData 是 `{}`\n2. 如果再次修改 email，则 data 将会是 `{email: 'xxx1'}`，prevData 是 `{email: 'xxx '}`\n3. 如果修改 username，则 data 将会是 `{email: 'xxx1', username: 'yyy'}`，prevData 是 `{email: 'xxx1'}`\n\n### onUnmount\n\nonUnmount 是在组件销毁的时候执行，可以在这里做资源清理，这个函数只有一个 props 参数。\n\n### Vue.js\n\n因为 onMount 拿到的 dom 就是标准的 dom，所以可以执行任意 JavaScript 代码，包括 jQuery 等，下面的例子演示了如何使用 vue 实现自定义组件：\n\n```javascript\n{\n type: 'page',\n title: '表单页面',\n body: {\n type: 'form',\n title: 'custom 组件',\n body: [\n {\n type: 'custom',\n name: 'my-custom',\n html: `\n <ol>\n <li v-for=\"todo in todos\">\n {{ todo.text }}\n </li>\n </ol>\n `,\n label: '自定义组件',\n onMount: (dom, data, onChange, props) => {\n const app = new Vue({\n el: dom,\n data: {\n todos: [\n { text: 'hello' },\n { text: 'world' },\n { text: 'vue' }\n ]\n }\n })\n }\n }\n ]\n }\n}\njavascript\nonMount: (dom, data, onChange, props) => {\n const button = document.createElement('button');\n button.innerText = '点击修改姓名';\n button.onclick = event => {\n onChange('new name', 'name');\n props.onAction(\n event,\n {\n type: 'action',\n label: '弹个框',\n actionType: 'dialog',\n dialog: {\n title: '弹框',\n body: 'Hello World!'\n }\n },\n {} // 这是 data\n );\n event.preventDefault();\n };\n dom.appendChild(button);\n};\n```\n\n或者执行 `props.env.notify('success', '执行成功')` 来在右上角弹出提示等。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------- | -------- | --------------------------------------------- |\n| type | 'custom' | | |\n| id | `string` | | 节点 id |\n| name | `string` | | 节点 名称 |\n| className | `string` | | 节点 class |\n| inline | `boolean` | false | 默认使用 div 标签，如果 true 就使用 span 标签 |\n| html | `string` | | 初始化节点 html |\n| onMount | `string` | Function | 节点初始化之后调的用函数 |\n| onUpdate | `string` | Function | 数据有更新的时候调用的函数 |\n| onUnmount | `string` | Function | 节点销毁的时候调用的函数 |\n","path":"/zh-CN/components/custom"},{"title":"Date 日期时间","body":"\n用于展示日期\n\n## 基本使用\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 配置展示格式\n\n例如你想将某一个时间值，以 `xxxx年xx月xx日 xx时xx分xx秒` 这样的格式输出，那么查找 可知配置格式应为 `YYYY年MM月DD日 HH时mm分ss秒`，即：\n\n\n\n## 配置数据格式\n\n如果你的数据值默认不是`X`格式（时间戳秒格式），那么需要配置 `valueFormat` 参数用于解析当前时间值，比如毫秒是配置 `\"valueFormat\": \"x\"`。\n\n除此之外还支持各种自定义日期格式，例如下面`value`值为：`\"2020/4/14 19:59:50\"`，查阅 可知，需要配置数据格式为 `\"YYYY/MM/DD HH:mm:ss\"`，然后我们配置输出格式`format`，输出指定格式日期：\n\n\n\n## 转成相对当前时间的描述\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"date\"`；在 Form 中用作静态展示，为`\"static-date\"` |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 显示的日期数值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n| placeholder | `string` | `-` | 占位内容 |\n| format | `string` | `YYYY-MM-DD` | 展示格式, 更多格式类型请参考 |\n| valueFormat | `string` | `X` | 数据格式，默认为时间戳。更多格式类型请参考 |\n| fromNow | `boolean` | `false` | 是否显示相对当前的时间描述，比如: 11 小时前、3 天前、1 年前等，fromNow 为 true 时，format 不生效。 |\n| updateFrequency | `number` | `60000` | 更新频率， 默认为 1 分钟 |\n","path":"/zh-CN/components/date"},{"title":"Dialog 对话框","body":"\nDialog 弹框 主要由 触发，主要展示一个对话框以供用户操作。\n\n## 基本用法\n\n\n\n## 配置尺寸\n\n\n\n## 弹框与数据映射\n\n默认弹框内由于数据链的存在，会自动映射父级同名变量，例如下例：\n\n\n\n上例弹框中的表单项 `Engine` 会自动映射到父级数据中的 `engine` 变量，如果想调整当前特性，如你想调整父级映射变量的字段，可以利用，例如：\n\n\n\n上例给 `dialog` 中配置 `data` 属性，可以将上层的 `engine` 变量映射为 `engine2`。请注意点击“新增”按钮后 dialog 内 form 的数据域会直接继承 CRUD 所在的数据域，如果 CRUD 过滤器中查询字段和 dialog 表单中的字段相同时，会错误的将外部数据映射到表单数据域内，需要配置数据映射将相关字段绑定的数据删除`{\"&\": \"$$\", \"status\": \"__undefined\"}`\n\n## 多级弹框\n\n\n\n## 行为后关闭弹框\n\n在弹框中配置行为按钮，可以在按钮上配置`\"close\": true`，在行为完成后，关闭当前弹框。\n\n\n\n## 配置弹窗的按钮\n\n可以通过设置 `actions` 来控制弹窗中的按钮。\n\n\n\n## 弹框中配置表单\n\n### 基本使用\n\n\n\n### 提交表单 或 ajax 请求\n\n弹框中通过配置`form`或`ajax`行为按钮，可以实现`form`提交和`ajax`请求操作。\n\n\n\n### 提交表单 或 ajax 请求后不关闭弹框\n\n默认情况下，当弹框中配置了 form 并进行了**提交表单操作（confirm）**或进行了**`ajax`请求**，请求成功后，会自动关闭当前弹框，你可以通过手动设置`\"close\": false` 来禁止该默认特性。\n\n\n\n## feedback 反馈弹框\n\nfeedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，进行反馈操作\n\n### feedback 基本使用\n\n\n\n### 弹框中配置 feedback\n\n#### 关闭 feedback 弹框时，同时关闭上层弹框\n\n当你在弹框中配置了 feedback，操作之后，你希望关闭当前 feedback 弹框同时，关闭上层的弹框，具体有两种方式\n\n##### 1. 不请求接口，直接关闭\n\n`feedback`的`actions`中配置 `\"actionType\": \"close\"` 的按钮\n\n\n\n##### 2. 请求接口，请求成功后，关闭所有弹框\n\n需要在 feedback 的 `body` 中添加 Form 组件，并配置`\"actionType\": \"confirm\"`，\n\n\n\n> 注意上面的例子：如果你的触发`feedback`的按钮`actionType`为`ajax`时，为需要额外在按钮上配置`\"close\": true`\n\n#### 取消 feedback 弹框时，不同时关闭上层弹框\n\n改场景只适用于**不请求接口关闭弹框**的场景，需要在 feedback 层添加`\"skipRestOnCancel\": true`\n\n\n\n#### 确认 feedback 弹框时，不同时关闭上层弹框\n\n如果想让 feedback 弹框确认后，让之前触发这个 feedback 的按钮中断，那么需要配置 `skipRestOnConfirm`，这就意味着之前触发这个 feedback 的按钮必须重新提交一次。\n\n### 根据条件显示 feedback\n\n可以根据条件弹出，例如下面这个例子，只有当接口返回的时间戳可以整除 2 时才显示弹框。\n\n\n\n## 配置 Esc 键和点击外部关闭弹框\n\n可以通过配置 `closeOnEsc` 和 `closeOnOutside` 支持用 esc 键和点击其它区域关闭弹框。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------ |\n| type | `string` | | `\"dialog\"` 指定为 Dialog 渲染器 |\n| title | | | 弹出层标题 |\n| body | | | 往 Dialog 内容区加内容 |\n| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg`、`xl`、`full` |\n| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |\n| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |\n| showCloseButton | `boolean` | `true` | 是否显示右上角的关闭按钮 |\n| showErrorMsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 |\n| showLoading | `boolean` | `true` | 是否在弹框左下角显示 loading 动画 |\n| disabled | `boolean` | `false` | 如果设置此属性，则该 Dialog 只读没有提交操作。 |\n| actions | Array<> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` |\n| data | `object` | | 支持，如果不设定将默认将触发按钮的上下文中继承数据。 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看。\n\n> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------------------------ | ------------------ |\n| confirm | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |\n| cancel | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击取消时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ------------ |\n| confirm | - | 确认（提交） |\n| cancel | - | 取消（关闭） |\n| setValue | `value: object` 更新的数据 | 更新数据 |\n","path":"/zh-CN/components/dialog"},{"title":"Divider 分割线","body":"\n## 基本用法\n\n\n\n## 不同样式\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ---------- | ----------------------------------- |\n| type | `string` | | `\"divider\"` 指定为 分割线 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| lineStyle | `string` | `\"dashed\"` | 分割线的样式，支持`dashed`和`solid` |\n","path":"/zh-CN/components/divider"},{"title":"Drawer 抽屉","body":"\n## 基本用法\n\n\n\n## 抽屉尺寸\n\n\n\n## 自定义抽屉尺寸\n\n值如果是数字类型单位默认使用`px`, 如果是字符串类型可以使用自定义 css 宽度变量，如：`%`、`vw`、`px`等\n\n\n\n## 指定弹出方向\n\n\n\n## 可拖拽抽屉大小\n\n配置`\"resizable\": true`，可以拖拽调整`drawer`大小\n\n\n\n## 是否展示关闭按钮\n\n配置`\"showCloseButton\": false`，可以隐藏关闭按钮\n\n\n\n## 不显示蒙层\n\n\n\n## 点击抽屉外自动关闭\n\n配置`\"closeOnOutside\":true`\n\n### 显示蒙层\n\n\n\n### 不显示蒙层\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------- |\n| type | `string` | | `\"drawer\"` 指定为 Drawer 渲染器 |\n| title | | | 弹出层标题 |\n| body | | | 往 Drawer 内容区加内容 |\n| size | `string` | | 指定 Drawer 大小，支持: `xs`、`sm`、`md`、`lg`、`xl` |\n| position | `string` | | 指定 Drawer 方向，支持: `left`、`right`、`top`、`bottom` |\n| className | `string` | `` | Drawer 最外层容器的样式类名 |\n| headerClassName | `string` | | Drawer 头部 区域的样式类名 |\n| bodyClassName | `string` | `modal-body` | Drawer body 区域的样式类名 |\n| footerClassName | `string` | | Drawer 页脚 区域的样式类名 |\n| showCloseButton | `boolean` | `true` | 是否展示关闭按钮，当值为 false 时，默认开启 closeOnOutside |\n| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Drawer |\n| closeOnOutside | `boolean` | `false` | 点击内容区外是否关闭 Drawer |\n| overlay | `boolean` | `true` | 是否显示蒙层 |\n| resizable | `boolean` | `false` | 是否可通过拖拽改变 Drawer 大小 |\n| width | `string \\| number` | `500px` | 容器的宽度，在 position 为 `left` 或 `right` 时生效 |\n| height | `string \\| number` | `500px` | 容器的高度，在 position 为 `top` 或 `bottom` 时生效 |\n| actions | Array<> | 【确认】和【取消】 | 可以不设置，默认只有两个按钮。 |\n| data | `object` | | 支持 ，如果不设定将默认将触发按钮的上下文中继承数据。 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------------------------ | ------------------ |\n| confirm | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |\n| cancel | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击取消时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ------------ |\n| confirm | - | 确认（提交） |\n| cancel | - | 取消（关闭） |\n| setValue | `value: object` 更新的数据 | 更新数据 |\n","path":"/zh-CN/components/drawer"},{"title":"DropDownButton","body":"\n## 基本用法\n\n\n\n## 分组展示模式\n\n配置`children`可以实现分组展示，分组标题支持配置`icon`。\n\n> 1.5.7 及以上版本\n\n\n\n## 关闭下拉菜单\n\n配置`\"closeOnClick\": true`可以实现点击按钮后自动关闭下拉菜单。\n\n\n\n## 触发方式\n\n> 1.4.0 及以上版本\n\n默认是点击鼠标触发，可以通过 `\"trigger\": \"hover\"` 配置为鼠标移上去后触发\n\n\n\n## 设置图标\n\n通过 `icon` 可以设置左侧图标\n\n\n\n## 只显示图标\n\n可以设置 `level` 及 `hideCaret` 来只显示图标，并配合 `tooltip` 来显示提示文字\n\n\n\n## 设置右侧图标\n\n> 1.5.0 及以上版本\n\n通过 `rightIcon` 设置右侧图标，同时通过 `hideCaret` 隐藏右侧下拉图标\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------- | ----------------- | ----------------------------------------- |\n| type | `string` | `dropdown-button` | 类型 |\n| label | `string` | | 按钮文本 |\n| className | `string` | | 外层 CSS 类名 |\n| btnClassName | `string` | | 按钮 CSS 类名 |\n| menuClassName | `string` | | 下拉菜单 CSS 类名 |\n| block | `boolean` | | 块状样式 |\n| size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` |\n| align | `string` | | 位置，可选`'left'`或`'right'` |\n| buttons | `Array<DropdownButton>` | | 配置下拉按钮 |\n| iconOnly | `boolean` | | 只显示 icon |\n| defaultIsOpened | `boolean` | | 默认是否打开 |\n| closeOnOutside | `boolean` | `true` | 点击外侧区域是否收起 |\n| closeOnClick | `boolean` | `false` | 点击按钮后自动关闭下拉菜单 |\n| trigger | `click` 或 `hover` | `click` | 触发方式 |\n| hideCaret | `boolean` | false | 隐藏下拉图标 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | ---------------------------- | --------------------------------------- |\n| mouseenter | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移入时触发 |\n| mouseleave | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移出时触发 |\n\n## 动作表\n\n暂无\n","path":"/zh-CN/components/dropdown-button"},{"title":"Each 循环渲染器","body":"\n## 基本用法\n\n\n\n### 如果是对象数组\n\n如果数组中的数据是对象，可以直接使用 data.xxx 来获取，另外能用 data.index 来获取数组索引，但如果对象本身也有名字为 index 的字段就会覆盖到，获取不到索引了。\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量，然后用可以通过 `item` 变量获取单项值\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 使用数据映射\n\n\n\n`name` 的优先级会比 `source` 更高\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | -------- | -------------------------------------------------------------------- |\n| type | `string` | `\"each\"` | 指定为 Each 组件 |\n| value | `array` | `[]` | 用于循环的值 |\n| name | `string` | | 获取数据域中变量 |\n| source | `string` | | 获取数据域中变量， 支持 |\n| items | `object` | | 使用`value`中的数据，循环输出渲染器。 |\n| placeholder | `string` | | 当 `value` 值不存在或为空数组时的占位文本 |\n","path":"/zh-CN/components/each"},{"title":"Flex 布局","body":"\nFlex 布局是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用，并且默认使用水平垂直居中的对齐。\n\n## 基本用法\n\n\n\n其中 `items` 里的每一个都可以是其他 amis 类型。\n\n## 子节点水平分布\n\n> 严格来说并不一定是水平，因为还能通过 direction 修改方向，不过这里为了简化就这么称呼了\n\n可以通过 justify 控制水平分布方式，默认是 `center` 居中，其他几种的示例如下：\n\n\n\n## 垂直方向位置\n\n可以通过设置 `alignItems` 改变在子节点在垂直方向的位置，默认是 `center` 居中，其他几个常见设置请参考：\n\n\n\n## 布局方向\n\n默认是行的方式，可以通过 \"direction\": \"column\" 改成列的方式。\n\n\n\n## 移动端支持\n\n有时候希望在移动端有不同展现，比如将 `direction` 改成 `column`：\n\n\n\n其他关于移动端定制的细节请参考。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------------------------------------- | ------ | --------------------------------------------------------------------------------------------------- |\n| type | `string` | `flex` | 指定为 Flex 渲染器 |\n| className | `string` | | css 类名 |\n| justify | `string` | | \"start\", \"flex-start\", \"center\", \"end\", \"flex-end\", \"space-around\", \"space-between\", \"space-evenly\" |\n| alignItems | `string` | | \"stretch\", \"start\", \"flex-start\", \"flex-end\", \"end\", \"center\", \"baseline\" |\n| style | `object` | | 自定义样式 |\n| items | |\n","path":"/zh-CN/components/flex"},{"title":"Button-Group-Select 按钮点选","body":"\n## 基本用法\n\n按钮集合当 select 点选用。\n\n\n\n## 垂直模式\n\n配置`\"vertical\": true`，实现垂直模式\n\n\n\n## 平铺模式\n\n配置 `\"tiled\": true` 实现平铺模式\n\n\n\n## 按钮主题样式\n\n配置 `btnLevel` 统一设置按钮主题样式，注意 `buttons ` 或 `options` 中的`level`属性优先级高于`btnLevel`。配置 `btnActiveLevel` 为按钮设置激活态时的主题样式。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | ------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------- |\n| type | `string` | `\"button-group-select\"` | 指定为 button-group-select 渲染器 |\n| vertical | `boolean` | `false` | 是否使用垂直模式 |\n| tiled | `boolean` | `false` | 是否使用平铺模式 |\n| btnLevel | `'link' \\| 'primary' \\| 'secondary' \\| 'info'\\|'success' \\| 'warning' \\| 'danger' \\| 'light'\\| 'dark' \\| 'default'` | `\"default\"` | 按钮样式 |\n| btnActiveLevel | `'link' \\| 'primary' \\| 'secondary' \\| 'info'\\|'success' \\| 'warning' \\| 'danger' \\| 'light'\\| 'dark' \\| 'default'` | `\"default\"` | 选中按钮样式 |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| multiple | `boolean` | `false` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ---------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/button-group-select"},{"title":"Button-Toolbar 按钮工具栏","body":"\n默认按钮会独占一行，如果想让多个按钮并排方式，可以使用 `button-toolbar` 组件包裹起来，另外还有能用 来在展现上更紧凑。\n\n## 基本使用\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------- | --------------------------- | ------------------ | ------------------------- |\n| type | `string` | `\"button-toolbar\"` | 指定为 ButtonToolbar 组件 |\n| buttons | Array<> | | 按钮组 |\n","path":"/zh-CN/components/form/button-toolbar"},{"title":"Chained-Select 链式下拉框","body":"\n## 基本用法\n\n用于实现无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 API 拉取数据，只要 API 有返回结果，就能一直无限级别下拉。\n\n\n\n> `source`接口中配置的参数`waitSeconds=1`和`maxLevel=4`是测试接口所需参数，实际使用自己接口时不需要添加这两个参数\n\n## 暴露参数\n\n为了帮助后端接口获取当前选择器状态，chained-select 会默认给 source 接口的数据域中，添加若干个参数：\n\n- `value`: 选中的表单项值；\n- `level`: 当前拉取数据时的层级,\n- `parentId`: 上一级选项的值，数据格式基于配置的`joinValues`和`extractValue`属性\n- `parent`: 上一级选项的完整的数据格式\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| autoComplete | `string`或 |\n| delimiter | `string` | `,` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ---------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据，多个值用`,`分隔 |\n","path":"/zh-CN/components/form/chain-select"},{"title":"ChartRadios 图表单选框","body":"\n图表点选功能，用来做多个图表联动。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 ## 二级标题 |\n| ---------------------- | --------- | --------- | -------------------------- |\n| config | `object` | | echart 图表配置 |\n| showTooltipOnHighlight | `boolean` | `false` | 高亮的时候是否显示 tooltip |\n| chartValueField | `string` | `\"value\"` | 图表数值字段名 |\n","path":"/zh-CN/components/form/chart-radios"},{"title":"Checkbox 勾选框","body":"\n用于实现勾选，功能和 类似，只是展现上不同。\n\n## 基本用法\n\n\n\n## 配置真假值\n\n默认情况：\n\n- 勾选框勾选时，表单项值为：true\n- 勾选框取消勾选时，表单项值为：false\n\n\n\n如果你想调整这个值，可以配置`trueValue`和`falseValue`\n\n\n\n勾选上例中的勾选框，观察数据域变化，会发现勾选后值为`1`，而取消勾选后为`0`\n\n## 按钮模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ------------------------- | --------- | ---------------- |\n| option | `string` | | 选项说明 |\n| trueValue | `string｜number｜boolean` | `true` | 标识真值 |\n| falseValue | `string｜number｜boolean` | `false` | 标识假值 |\n| optionType | `default｜button` | `default` | 设置 option 类型 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------- | ------------------ |\n| change | `[name]: boolean` 组件的值 | 选中状态变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string \\|number \\|boolean` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/checkbox"},{"title":"Checkboxes 复选框","body":"\n用于实现多选。\n\n## 基本用法\n\n\n\n## 结果是数组模式\n\n默认是拼接成字符串，如果希望结果是数组，可以设置 `\"joinValues\": false`\n\n\n\n如果只想提取 value，需要加上 `\"extractValue\": true`\n\n\n\n## 显示全选\n\n通过 `checkAll` 属性配置全选\n\n\n\n## 按钮模式\n\n\n\n## 按列显示\n\n设置 `\"inline\": false`\n\n\n\n## 展示多行\n\n可以配置`columnsCount`属性调整展示列的个数\n\n\n\n> 1.8.0 及以上版本\n\n`columnsCount` 还有一种数组形式，可以手动控制每行显示的列数\n\n\n\n## 分组显示\n\n`\"inline\": false` 下，选项中配置 `children` 字段可以实现分组展示效果。\n\n\n\n## 自定义选项渲染\n\n> 2.0.0 及以上版本\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| delimiter | `string` | `,` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |\n| menuTpl | `string` | | 支持自定义选项渲染 |\n| checkAll | `boolean` | `false` | 是否支持全选 |\n| inline | `boolean` | `true` | 是否显示为一行 |\n| defaultCheckAll | `boolean` | `false` | 默认是否全选 |\n| creatable | `boolean` | `false` | |\n| createBtnLabel | `string` | `\"新增选项\"` | |\n| addControls | Array< |\n| addApi | |\n| editable | `boolean` | `false` | |\n| editControls | Array< |\n| editApi | |\n| removable | `boolean` | `false` | |\n| deleteApi | |\n| optionType | `default` \\| `button` | `default` | 按钮模式 |\n| itemClassName | `string` | | 选项样式类名 |\n| labelClassName | `string` | | 选项标签样式类名 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ----------------------- | ---------------- |\n| change | `[name]: string` 选中值 | 选中值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据，多个值用`,`分隔 |\n","path":"/zh-CN/components/form/checkboxes"},{"title":"Combo 组合","body":"\n用于将多个表单项组合到一起，实现深层结构的数据编辑。\n\n比如想提交 `user.name` 这样的数据结构，有两种方法：一种是将表单项的 name 设置为`user.name`，另一种就是使用 combo。\n\n## 基本使用\n\n配置`items`属性，组合多个表单项\n\n\n\n## 多行展示模式\n\n默认，combo 内表单项是横着展示一排，如果想换行展示，可以配置`\"multiLine\": true`\n\n\n\n## 多选模式\n\n默认，combo 为单选模式，可以配置`\"multiple\": true`实现多选模式。\n\n这时提交的将会是对象数组。\n\n\n\n## 限制个数\n\n多选模式下，可以配置`minLength`和`maxLength`配置该 Combo 可添加的条数\n\n\n\n## 值格式\n\n观察下例中表单数据域值的变化，可以发现：\n\n- 单选模式时，**数据格式为对象**；\n- 多选模式时，**数据格式为数组，数组成员是对象**\n\n\n\n### 打平值\n\n默认多选模式下，数据格式是对象数组的形式，当你配置的组合中只有一个表单项时，可以配置`\"flat\": true`，将值进行打平处理。\n\n\n\n查看上例表单数据域，可以看到打平后数据格式如下：\n\n\n\n## 增加层级\n\ncombo 还有一个作用是增加层级，比如返回的数据是一个深层对象\n\n\n\n如果要用文本框显示，name 必须是 `a.b`，但使用 combo 创建层级后，name 就可以只是 `b`：\n\n\n\n这样就能结合 实现无限层级结构。\n\n## 唯一验证\n\n可以在配置的`body`项上，配置`\"unique\": true`，指定当前表单项不可重复\n\n\n\n上例中，`text`和`select`都配置了`\"unique\": true`，新增多条 combo，在任意两个`text`输入框的值相同时，提交时都会报错`\"当前值不唯一\"`，而`select`选择框也不可选择重复的选项\n\n> 暂不支持 `Nested-Select` 组件\n\n## 拖拽排序\n\n多选模式下，可以配置`\"draggable\": true`实现拖拽调整排序\n\n\n\n## 条件分支\n\n默认 Combo 渲染的成员是固定表单项的，成员的类型时一致，如果不一致怎么办？这里可以设置条件分支来给不同的成员设置不同的表单项。\n\n如下面的例子，定义了两种类型：文本和数字，用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。\n\n\n\n- `conditions` Array<Condition> 数组，每个成员是一种类型\n- `conditions[x].label` 类型名称\n- `conditions[x].test` 表达式，目标成员数据是否属于这个类型？\n- `conditions[x].scaffold` 初始数据，当新增的时候直接使用此数据。\n- `conditions[x].items` 该类型的表单设置。\n- `typeSwitchable` 类型是否允许切换，如果设置成 true 会多一个类型切换的按钮。\n\n## Tabs 模式\n\n默认成员是一个一个排列的，如果数据比较多有点让人眼花缭乱。所以 Combo 支持了 tabs 的排列方式。\n\n\n\n- `tabsMode` boolean 用来开启此模式\n- `tabsStyle` string 样式，可选：`line`、`card` 或者 `radio`.\n- `tabsLabelTpl` 用来生成标题的模板，默认为：`成员 ${index|plus}`\n\n注意：这是新引入的功能，目前还不支持拖拽组合使用。且此模式只有多选时才能生效。\n\n## 获取父级数据\n\n默认情况下，Combo 内表达项无法获取父级数据域的数据，如下，我们添加 Combo 表单项时，尽管 Combo 内的文本框的`name`与父级数据域中的`super_text`变量同名，但是没有自动映射值。\n\n\n\n可以配置`\"canAccessSuperData\": true`开启此特性，如下，配置了该配置项后，添加 Combo 的`text`表单项会自动映射父级数据域的同名变量\n\n\n\n## 同步更新内部表单项\n\n配置`canAccessSuperData`可以获取父级数据域值，但是为了效率，在父级数据域变化的时候，默认 combo 内部是不会进行同步的\n\n如下，添加一组 combo，然后可以看到默认会映射父级变量值`123`，但是当你在更改父级数据域`super_text`文本框值后，combo 内部文本框并没有同步更新\n\n\n\n如果想实现内部同步更新，需要如下配置：\n\n- 配置`\"strictMode\": false`\n- 配置`syncFields`字符串数组，数组项是需要同步的变量名\n\n以上面为例，我们在 combo 上配置`\"strictMode\": false`和`\"syncFields\": [\"super_text\"]`，即可实现同步\n\n\n\n## 设置序号\n\n默认 Combo 数据域中，每一项会有一个隐藏变量`index`，可以利用 Tpl 组件，显示当前项序号\n\n\n\n## 自定义删除按钮\n\n默认删除单项按钮为\"x\"，可以通过配置 deleteBtn 属性自定义删除单项按钮，目前 deleteBtn 支持的属性有\n`string`和类型\n\n如下，当 deleteBtn 为`string`时，对应的值会被渲染成文本\n\n\n\n如果想要赋予删除按钮更多能力，则需要将 deleteBtn 配置成类型\n\n\n\n## 自定义新增按钮\n\n可以通过配置 `addBtn` 属性自定义新增按钮，在非 Tabs 模式下生效。目前 `addBtn` 支持属性 类型\n\n如果仅想更改新增按钮文本请使用 `addButtonText`, 仅想增添样式请使用 `addButtonClassName`\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------ | ---------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| formClassName | `string` | | 单组表单项的类名 |\n| items | Array<> | | 组合展示的表单项 |\n| items[x].columnClassName | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 |\n| items[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 |\n| noBorder | `boolean` | `false` | 单组表单项是否显示边框 |\n| scaffold | `object` | `{}` | 单组表单项初始值 |\n| multiple | `boolean` | `false` | 是否多选 |\n| multiLine | `boolean` | `false` | 默认是横着展示一排，设置以后竖着展示 |\n| minLength | `number` | | 最少添加的条数 |\n| maxLength | `number` | | 最多添加的条数 |\n| flat | `boolean` | `false` | 是否将结果扁平化(去掉 name),只有当 items 的 length 为 1 且 multiple 为 true 的时候才有效。 |\n| joinValues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 |\n| delimiter | `string` | `false` | 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。 |\n| addable | `boolean` | `false` | 是否可新增 |\n| addattop | `boolean` | `false` | 在顶部添加 |\n| removable | `boolean` | `false` | 是否可删除 |\n| deleteApi | | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 |\n| deleteConfirmText | `string` | `\"确认要删除？\"` | 当配置 `deleteApi` 才生效！删除时用来做用户确认 |\n| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 |\n| draggableTip | `string` | `\"可通过拖动每行中的【交换】按钮进行顺序调整\"` | 可拖拽的提示文字 |\n| subFormMode | `string` | `\"normal\"` | 可选`normal`、`horizontal`、`inline` |\n| placeholder | `string` | `` | 没有成员时显示。 |\n| canAccessSuperData | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 |\n| conditions | `object` | | 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`items`为符合该条件后渲染的`schema` |\n| typeSwitchable | `boolean` | `false` | 是否可切换条件，配合`conditions`使用 |\n| strictMode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 |\n| syncFields | `Array<string>` | `[]` | 配置同步字段。只有 `strictMode` 为 `false` 时有效。如果 Combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`[\"os\"]` |\n| nullable | `boolean` | `false` | 允许为空，如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。 |\n| itemClassName | `string` | | 单组 CSS 类 |\n| itemsWrapperClassName | `string` | | 组合区域 CSS 类 |\n| deleteBtn | or `string` | 自定义删除按钮 | 只有当`removable`为 `true` 时有效; 如果为`string`则为按钮的文本；如果为`Button`则根据配置渲染删除按钮。 |\n| addBtn | | 自定义新增按钮 | 可新增自定义配置渲染新增按钮，在`tabsMode: true`下不生效。 |\n| addButtonClassName | `string` | | 新增按钮 CSS 类名 |\n| addButtonText | `string` | `\"新增\"` | 新增按钮文字 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------- |\n| add | `[name]: object \\| object[]` 组件的值 | 添加组合项时触发 |\n| delete | `key: number` 移除项的索引<br />`item: object` 移除项<br />`[name]: object \\| object[]` 组件的值 | 删除组合项时触发 |\n| tabsChange | `key: number` 选项卡索引<br />`item: object` 激活项<br />`[name]: object \\| object[]` 组件的值 | 当设置 tabsMode 为 true 时，切换选项卡时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: object \\| Array<object>` 更新的值<br/>`index?: number` 指定更新的数据索引， 1.10.1 及以上版本引入 | 更新数据，对象数组针对开启`multiple`模式, `multiple`模式下可以通过指定`index`来更新指定索引的数据 |\n\n## 动作示例\n\n### 复制数值\n\n> 1.10.1 及以上版本\n\n此示例主要用来演示如何通过已有数据快速填充 combo 某条数据。点击 copy 按钮会弹出一个 crud 列表，点击对应行上的复制按钮，将选中数据填充到外层的 combo.\n\n注意事项：\n\n1. 需要给 combo 设置个 id 属性，用来给事件动作指定目标用。\n2. 弹窗按钮配置了数据映射 `{comboIndex: \"${index}\"}` 因为 crud 的行数据上也有 index 变量，派送动作时获取 index 变量是 crud 所在行的序号。所以弹出弹窗的时候，先把 combo 的序号赋值给 comboIndex\n3. crud 操作栏里面添加了个按钮，close: true 设置是让动作完成后关闭弹窗。\n4. 按钮里面添加了 onEvent 配置，click 时做 `setValue` 动作，并设置参数 index 为 '${comboIndex}' 值为 `${&}`。其中 `${&}` 是特殊语法，用来取整个上下数据。\n\n\n","path":"/zh-CN/components/form/combo"},{"title":"组合条件","body":"\n## 基本用法\n\n用于设置复杂组合条件，支持添加条件，添加分组，设置组合方式，拖拽排序等功能。\n\n\n\n## 值格式说明\n\n\n\n## 字段选项\n\n字段选项为这个组件主要配置部分，通过 `fields` 字段来配置，有哪些字段，并且字段的类型是什么，支持哪些比较操作符。\n\n`fields` 为数组类型，每个成员表示一个可选字段，支持多个层，配置示例\n\n\n\n## 支持的字段类型\n\n这里面能用的字段类型和表单项中的字段类型不一样，还没支持那么多，基本上只有一些基础的类型，其他复杂类型还需后续扩充，目前基本上支持以下这些类型。\n\n### 文本\n\n- `type` 字段配置中配置成 `\"text\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'equal', 'not_equal', 'is_empty', 'is_not_empty', 'like', 'not_like', 'starts_with', 'ends_with' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp` 默认为 `\"equal\"`\n\n\n\n### 数字\n\n- `type` 字段配置中配置成 `\"number\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'equal', 'not_equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal', 'between', 'not_between', 'is_empty', 'is_not_empty' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp` 默认为 `\"equal\"`\n- `minimum` 最小值\n- `maximum` 最大值\n- `step` 步长\n\n\n\n### 日期\n\n- `type` 字段配置中配置成 `\"date\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'equal', 'not_equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal', 'between', 'not_between', 'is_empty', 'is_not_empty' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp` 默认为 `\"equal\"`\n- `defaultValue` 默认值\n- `format` 默认 `\"YYYY-MM-DD\"` 值格式\n- `inputFormat` 默认 `\"YYYY-MM-DD\"` 显示的日期格式。\n\n\n\n### 日期时间\n\n- `type` 字段配置中配置成 `\"datetime\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'equal', 'not_equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal', 'between', 'not_between', 'is_empty', 'is_not_empty' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp` 默认为 `\"equal\"`\n- `defaultValue` 默认值\n- `format` 默认 `\"\"` 值格式\n- `inputFormat` 默认 `\"YYYY-MM-DD HH:mm\"` 显示的日期格式。\n- `timeFormat` 默认 `\"HH:mm\"` 时间格式，决定输入框有哪些。\n\n\n\n### 时间\n\n- `type` 字段配置中配置成 `\"time\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'equal', 'not_equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal', 'between', 'not_between', 'is_empty', 'is_not_empty' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp` 默认为 `\"equal\"`\n- `defaultValue` 默认值\n- `format` 默认 `\"HH:mm\"` 值格式\n- `inputFormat` 默认 `\"HH:mm\"` 显示的日期格式。\n\n\n\n### 下拉选择\n\n- `type` 字段配置中配置成 `\"select\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'select_equals', 'select_not_equals', 'select_any_in', 'select_not_any_in' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp`\n- `options` 选项列表，`Array<{label: string, value: any}>`\n- `source` 动态选项，请配置 api。\n- `searchable` 是否可以搜索\n- `autoComplete` 自动提示补全，每次输入新内容后，将调用接口，根据接口返回更新选项。\n\n\n\n配置`autoComplete`属性后，每次输入新内容后会自动调用接口加载新的选项，用数据映射，获取变量 term，为当前输入的关键字。\n\n\n\n### 自定义\n\n- `type` 字段配置中配置成 `\"custom\"`\n- `label` 字段名称\n- `placeholder` 占位符\n- `operators` 默认为空，需配置自定义判断条件，支持字符串或 key-value 格式\n- `value` 字段配置右边值需要渲染的组件，支持 amis 输入类组件或自定义输入类组件\n\n\n\n其中`operators`通过配置 values 还支持右边多个组件的渲染，`right`值格式为对象，`key`为组件的`name`\n\n\n\n## 字段选项远程拉取\n\n- 方式 1 配置 `source` 接口返回的数据对象 `data` 中存在 fields 变量即可。\n- 方式 2 关联上下文变量如 `source: \"${xxxxField}\"`\n\n\n\n## 字段选项类型\n\n> 2.3.0 及以上版本\n\n通过 selectMode 配置组合条件左侧选项类型，可配置项为`list`、`tree`，默认为`list`。两者数据格式相同，只是下拉框展示方式不同，当存在多层 children 嵌套时，建议使用`tree`。\n\nselectMode 为`list`时\n\n\n\nselectMode 为`tree`时\n\n\n\n## 简易模式\n\n通过 builderMode 配置为简易模式，在这个模式下将不开启树形分组功能，输出结果只有一层，方便后端实现简单的 SQL 生成。\n\n\n\n在这个模式下还可以通过 `showANDOR` 来显示顶部的条件类型切换\n\n\n\n## 非内嵌模式\n\n当表单区域较窄时，可以使用非内嵌模式，弹窗设置具体信息\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | ------------------ | -------- | ------------------------------ |\n| className | `string` | | 外层 dom 类名 |\n| fieldClassName | `string` | | 输入字段的类名 |\n| source | `string` | | 通过远程拉取配置项 |\n| embed | `boolean` | true | 内嵌展示 |\n| title | `string` | | 弹窗配置的顶部标题 |\n| fields | | | 字段配置 |\n| showANDOR | `boolean` | | 用于 simple 模式下显示切换按钮 |\n| showNot | `boolean` | | 是否显示「非」按钮 |\n| searchable | `boolean` | | 字段是否可搜索 |\n| selectMode | `'list'`、`'tree'` | `'list'` | 组合条件左侧选项类型 |\n","path":"/zh-CN/components/form/condition-builder"},{"title":"DiffEditor 对比编辑器","body":"\n## 基本使用\n\n\n\n## 禁用编辑器\n\n左侧编辑器始终不可编辑，右侧编辑器可以通过设置`disabled`或`disabledOn`，控制是否禁用\n\n\n\n## diff 数据域中的两个变量\n\n如下例，左侧编辑器中的值，通过`\"diffValue\": \"${value1}\"`获取，右侧编辑器的值，通过设置`\"name\": \"value2\"`，自动映射数据域中`value2`的值\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ------------- | ------------ | ------------------------------------------------------------------------------------------- |\n| language | `string` | `javascript` | 编辑器高亮的语言，可选 |\n| diffValue | | | 左侧值 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ------------------------ |\n| change | `[name]: string` 组件的值 | 代码变化时触发 |\n| focus | `[name]: string` 组件的值 | 右侧输入框获取焦点时触发 |\n| blur | `[name]: string` 组件的值 | 右侧输入框失去焦点时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| focus | - | 获取焦点，焦点落在右侧编辑面板 |\n| setValue | `value: string` 更新的右侧编辑面板中的值 | 更新数据 |\n","path":"/zh-CN/components/form/diff-editor"},{"title":"Editor 编辑器","body":"\n用于实现代码编辑，如果要实现富文本编辑请使用 。\n\n## 基本用法\n\n\n\n## 支持的语言\n\n可以设置`language`配置高亮的语言，支持的语言有：\n\n`bat`、 `c`、 `coffeescript`、 `cpp`、 `csharp`、 `css`、 `dockerfile`、 `fsharp`、 `go`、 `handlebars`、 `html`、 `ini`、 `java`、 `javascript`、 `json`、 `less`、 `lua`、 `markdown`、 `msdax`、 `objective-c`、 `php`、 `plaintext`、 `postiats`、 `powershell`、 `pug`、 `python`、 `r`、 `razor`、 `ruby`、 `sb`、 `scss`、`shell`、 `sol`、 `sql`、 `swift`、 `typescript`、 `vb`、 `xml`、 `yaml`\n\n\n\n> 因为性能原因，上面的例子不支持实时修改 language 生效\n\n当然你也可以使用`xxx-editor`这种形式，例如`\"type\": \"json-editor\"`\n\n\n\n## 只读模式\n\n使用 `disabled: true`。\n\n\n\n## 全屏模式\n\n设置`allowFullscreen`属性为`true`，显示编辑器的全屏模式开关，开关开启后编辑器进入全屏模式。\n\n\n\n## 编辑器展现控制\n\n通过 `options` 来控制编辑器展现，比如下面的配置可以关闭行号\n\n\n\n## 编辑器自定义开发\n\namis 的编辑器是基于 monaco 开发的，如果想进行深度定制，比如自动完成功能，可以通过自定义 `editorDidMount` 属性来获取到 monaco 实例，它有两种写法，一种是在 JS 中直接用函数，示例如下：\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| language | `string` | `javascript` | 编辑器高亮的语言，支持通过 `${xxx}` 变量获取 |\n| size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` |\n| allowFullscreen | `boolean` | `false` | 是否显示全屏模式开关 |\n| options | `object` | | monaco 编辑器的其它配置，比如是否显示行号等，请参考，不过无法设置 readOnly，只读模式需要使用 `disabled: true` |\n| placeholder | `string` | | 占位描述，没有值的时候展示 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------- |\n| change | `[name]: string` 组件的值 | 代码变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| focus | - | 获取焦点 |\n| setValue | `value: string` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/editor"},{"title":"FieldSet 表单项集合","body":"\nFieldSet 是用于分组展示表单项的一种容器型组件，可以折叠。\n\n## 基本用法\n\n可以通过配置标题`title`和表单项数组`body`，实现多个表单项分组展示\n\n\n\n## 展示模式\n\n可以通过设置`mode`调整展示模式，用法同 \n\n下面`group`我们配置了`\"mode\": \"horizontal\"`，观察显示情况\n\n\n\n## 可折叠\n\n配置`\"collapsable\": true`可以实现点击标题折叠显隐表单项。\n\n\n\n### 默认是否折叠\n\n默认是展开的，如果想默认折叠，那么配置`\"collapsed\": true`默认折叠。\n\n\n\n## 标题放底部\n\nfieldSet 的另一种标题展现样式，不同的是展开的时候收起文本是在下方的，如果组件比较多的时候更容易收起。\n\n设置 `\"titlePosition\": \"bottom\"`。\n\n\n\n## 嵌套使用\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------- |\n| className | `string` | | CSS 类名 |\n| headingClassName | `string` | | 标题 CSS 类名 |\n| bodyClassName | `string` | | 内容区域 CSS 类名 |\n| title | | | 标题 |\n| body | Array<> | | 表单项集合 |\n| mode | `string` | | 展示默认，同 中的模式 |\n| collapsable | `boolean` | `false` | 是否可折叠 |\n| collapsed | `booelan` | `false` | 默认是否折叠 |\n| collapseTitle | | `收起` | 收起的标题 |\n| size | string | `` | 大小，支持 xs、sm、base、lg、xl |\n","path":"/zh-CN/components/form/fieldset"},{"title":"FormItem 普通表单项","body":"\n**表单项** 是组成一个表单的基本单位，它具有的一些特性会帮助我们更好地实现表单操作。\n\n> 所有派生自`FormItem`的组件，都具有`FormItem`的特性。\n\n## 基本用法\n\n最基本的表单项配置像这样：\n\n\n\n- `name`: **必填属性**，标识表单数据域中，当前表单项值的`key`，这个 name 可以是深层结构，比如 `aa.bb`\n- `type`: **必填属性**，标识表单项类型\n- `label`: 标识表单项的标签\n\n> 所有表单项都只可以配置在`form`组件中，即`form`的`body`属性中。\n\n## 表单项展示\n\n### 内联模式\n\n通过配置`\"mode\": \"inline\"`，标识当前表单项使用内联模式。\n\n\n\n### 表单项尺寸\n\n可以配置`size`，来调整表单项的尺寸，支持`'xs' | 'sm' | 'md' | 'lg' | 'full'`，如下：\n\n\n\n> 不同组件的`size`效果可能会有所不同，具体请参考对应的组件文档。\n\n### 表单项标签\n\n设置`label`属性来配置表单项标签。\n\n当表单为水平布局时，左边即便是不设置`label`为了保持对齐也会留空，如果想要去掉空白，请设置成`false`。\n\n\n\n### 表单项标签提示\n\n配置`labelRemark`可以实现标签描述提示\n\n\n\n其它配置请参考 。\n\n### 配置禁用\n\n##### 静态配置\n\n通过配置`\"disabled\": true`来禁用表单项\n\n\n\n##### 通过条件配置是否禁用\n\n你也通过配置`disabledOn`，来实现在某个条件下禁用当前表单项.\n\n\n\n### 配置显隐\n\n##### 静态配置\n\n通过配置`\"hidden\": true`或者`\"visible\": false`来禁用表单项\n\n\n\n上例中的`text2`被隐藏了。\n\n##### 通过条件配置显隐\n\n你也通过配置`hiddenOn`，来实现在某个条件下禁用当前表单项.\n\n\n\n> `visible`和`hidden`，`visibleOn`和`hiddenOn`除了判断逻辑相反以外，没有任何区别\n\n### 配置静态展示\n\n> 2.4.0 及以上版本\n\n##### 静态配置\n\n通过配置`\"static\": true`来将表单项以静态形式展示 \n可以在查看支持静态展示的表单项的展示方式\n\n\n\n##### 通过条件配置静态/输入态\n\n也可以通过配置`staticOn`，来实现在某个条件下将当前表单项状态的的自动切换.\n\n\n\n##### 自定义展示态的展示方式\n\n通过配置`staticSchema`，可以自定义静态展示时的展示方式\n\n\n\n##### 限制选择器类组件的展示数量\n\n下拉选择器、多选框等组件，当选项过多静态展示时，若全部展示会占用页面很多空间，所以默认进行了限制（10个） \n可以通过配置`staticSchema.limit`，可以自定义静态展示时的数量\n\n\n\n##### 通过事件动作切换表单项状态\n\n也支持使用 事件动作 切换表单项的 输入态和展示态（静态），也可以使用动作对整个表单进行状态切换\n\n\n\n##### 表单项静态展示优先级\n\n1. 表单项配置为`static: true` 时，始终保持静态展示；\n\n\n\n2. 表单项配置为`static: false` 或 `不配置` 时，跟随父表单的状态；\n\n\n\n3. 使用 `事件动作` 切换表单项 的 静态/展示态，优先级最高，将无视 `schema` 配置\n\n\n\n## 表单项值\n\n表单项值，即表单项通过用户交互发生变化后，更新表单数据域中同`name`变量值.\n\n\n\n如上例，更改姓名表单项值，可以改变表单数据域中`name`变量的值。\n\n也支持链式配置 `name`属性，例如：`aaa.bbb`\n\n\n\n观察上例，这样更改表单项值，会改变数据域中`person.name`的值\n\n\n\n## 配置默认值\n\n通过配置`value`属性，可以设置表单项的默认值。\n\n\n\n> 1.10.0 及之后版本（备注：可通过 1.9.1-beta.12 及之后版本提前试用）\n\n`value`支持表达式，也就是说可以直接配置类似于这样的语法：`${xxx}`，如果想要获取当前数据域中的某个变量，可以设置该表单项`value`为`${name1}`，如下：\n\n\n\n`value`也支持表达式运算，可以配置类似于这样的语法：`${num1 + 2}`，如下：\n\n\n\n`value`表达式支持，可以配置类似于这样的语法：`${window:document.title}`，意思是从全局变量中取页面的标题。如下：\n\n\n\n**tip：** value 表达式（`${xxx}`）支持 模板字符串、链式取值、过滤器，详细用法参考。\n\n我们也可以不设置 value 表达式，通过 name 来映射当前数据域中某个字段。比如我们表单数据域中有变量`\"text1\": \"hello world!\"`，然后我们设置表达项`\"name\": \"text1\"`，这样就可以自动映射值了。如下：\n\n\n\n关于优先级问题，当我们同时设置了 value 表达式`${xxx}`和`name`值映射，会优先使用 value 表达式`${xxx}`。只有当 value 为普通字符串`非${xxx}`时，才会使用`name`值映射。如下：\n\n\n\n**tip：** 默认在解析表达式时，遇到`$`字符会尝试去解析该变量并替换成对应变量，如果你想输出纯文本`\"${xxx}\"`，那么需要在`$`前加转义字符`\"\\\\\"`，即`\"\\\\${xxx}\"`，如下所示：\n\n\n\n## 隐藏时删除表单项值\n\n默认情况下，在通过 `hiddenOn` 或 `visibleOn` 配置显隐交互时，被隐藏的表单项值，不会在当前表单数据域中删除，例如：\n\n\n\n观察上例，在调整 `number` 数量大于 1 时，`文本` 表单项会隐藏，但是对应的表单数据域中的 `text` 变量值仍存在。\n\n如果想要实现隐藏表单项后，在当前表单数据域中删除该表单项对应的值，那么可以在当前表单项上配置 `\"clearValueOnHidden\": true`。\n\n\n\n再次观察上例，当 `文本` 表单项隐藏时，对应的 `text` 变量也会被删除掉。\n\n> 注意: 如果有其他同 name 的表达项的存在，即使其他表单项值没有隐藏，也会在数据域中删掉该值。\n\n## 表单项必填\n\n### 静态配置\n\n通过配置`\"required\": true`来标识该表单项为必填。\n\n\n\n### 满足条件校验必填\n\n你也通过配置`requiredOn`，来实现在某个条件下使当前表单项必填。\n\n\n\n## 格式校验\n\n可以配置`validations`属性，指定校验当前表单项值的格式\n\n可以通过对象形式配置\n\n\n\n同样也可以配置多个格式校验\n\n\n\n### 字符串形式（不推荐）\n\n也可以配置字符串形式来指定，如下例，输入不合法的值，点击提交会报错并显示报错信息。（注意日期时间类的校验规则不支持字符串形式）\n\n\n\n也可以指定多个格式校验，中间用`逗号`分隔。\n\n\n\n如果需要配置参数，例如显示最大值或最小值，则在格式标识符后`:`和参数\n\n### 自定义校验信息\n\namis 会有默认的报错信息，如果你想自定义校验信息，配置`validationErrors`属性\n\n\n\n如果需要获取当前格式校验配置的参数，可以使用`$1`\n\n\n\n默认的校验信息如下，可以直接配置文字，也可用多语言中的 key。参考：https://github.com/baidu/amis/blob/master/packages/amis-ui/src/locale/zh-CN.ts#L250\n\n\n\n### 表单项值发生变化即校验\n\n默认校验是当进行行为操作时，对表单项进行校验，如果你想每次表单项的值发生变化的时候就校验，请配置`\"validateOnChange\": true`\n\n### 支持的格式校验\n\n| 规则名称 | 说明 | 定义 | 版本 |\n| ------------------------ | ---------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------- |\n| `isEmail` | 必须是 Email。 | `(value: any) => boolean` | |\n| `isUrl` | 必须是 Url。 | `(value: any) => boolean` | |\n| `isNumeric` | 必须是 数值。 | `(value: any) => boolean` | |\n| `isAlpha` | 必须是 字母。 | `(value: any) => boolean` | |\n| `isAlphanumeric` | 必须是 字母或者数字。 | `(value: any) => boolean` | |\n| `isInt` | 必须是 整形。 | `(value: any) => boolean` | |\n| `isFloat` | 必须是 浮点形。 | `(value: any) => boolean` | |\n| `isLength:length` | 是否长度正好等于设定值。 | `(value: any) => boolean` | |\n| `minLength:length` | 最小长度。 | `(value: any, length: number) => boolean` | |\n| `maxLength:length` | 最大长度。 | `(value: any, length: number) => boolean` | |\n| `maximum:number` | 最大值。 | `(value: any, maximum: number) => boolean` | |\n| `minimum:number` | 最小值。 | `(value: any, minimum:number) => boolean` | |\n| `equals:xxx` | 当前值必须完全等于 xxx。 | `(value: any, targetValue: any) => boolean` | |\n| `equalsField:xxx` | 当前值必须与 xxx 变量值一致。 | `(value: any, field: string) => boolean` | |\n| `isJson` | 是否是合法的 Json 字符串。 | `(value: any) => boolean` | |\n| `isUrlPath` | 是 url 路径。 | `(value: any) => boolean` | |\n| `isPhoneNumber` | 是否为合法的手机号码 | `(value: any) => boolean` | |\n| `isTelNumber` | 是否为合法的电话号码 | `(value: any) => boolean` | |\n| `isZipcode` | 是否为邮编号码 | `(value: any) => boolean` | |\n| `isId` | 是否为身份证号码，没做校验 | `(value: any) => boolean` | |\n| `matchRegexp:/foo/` | 必须命中某个正则。 | `(value: any, regexp: string \\| RegExp) => boolean` | |\n| `matchRegexp1:/foo/` | 必须命中某个正则。 | `(value: any, regexp: string \\| RegExp) => boolean` | |\n| `matchRegexp2:/foo/` | 必须命中某个正则。 | `(value: any, regexp: string \\| RegExp) => boolean` | |\n| `matchRegexp3:/foo/` | 必须命中某个正则。 | `(value: any, regexp: string \\| RegExp) => boolean` | |\n| `matchRegexp4:/foo/` | 必须命中某个正则。 | `(value: any, regexp: string \\| RegExp) => boolean` | |\n| `isDateTimeSame` | 日期和目标日期相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetDate: any, granularity?: string) => boolean` | `2.2.0` |\n| `isDateTimeBefore` | 日期早于目标日期，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetDate: any, granularity?: string) => boolean` | `2.2.0` |\n| `isDateTimeAfter` | 日期晚于目标日期，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetDate: any, granularity?: string) => boolean` | `2.2.0` |\n| `isDateTimeSameOrBefore` | 日期早于目标日期或和目标日期相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetDate: any, granularity?: string) => boolean` | `2.2.0` |\n| `isDateTimeSameOrAfter` | 日期晚于目标日期或和目标日期相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetDate: any, granularity?: string) => boolean` | `2.2.0` |\n| `isDateTimeBetween` | 日期处于目标日期范围，支持指定粒度和区间的开闭形式，默认到毫秒 `millisecond`，左右开区间`'()'` | `(value: any, lhs: any, rhs: any, granularity?: string, inclusivity?: '()' \\| '[)' \\| '(]' \\| '[]') => boolean` | `2.2.0` |\n| `isTimeSame` | 时间和目标时间相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetTime: any, granularity?: string) => boolean` | `2.2.0` |\n| `isTimeBefore` | 时间早于目标时间，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetTime: any, granularity?: string) => boolean` | `2.2.0` |\n| `isTimeAfter` | 时间晚于目标时间，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetTime: any, granularity?: string) => boolean` | `2.2.0` |\n| `isTimeSameOrBefore` | 时间早于目标时间或和目标时间相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetTime: any, granularity?: string) => boolean` | `2.2.0` |\n| `isTimeSameOrAfter` | 时间晚于目标时间或和目标时间相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetTime: any, granularity?: string) => boolean` | `2.2.0` |\n| `isTimeBetween` | 时间处于目标时间范围，支持指定粒度和区间的开闭形式，默认到毫秒 `millisecond`，左右开区间`'()'` | `(value: any, lhs: any, rhs: any, granularity?: string, inclusivity?: '()' \\| '[)' \\| '(]' \\| '[]') => boolean` | `2.2.0` |\n\n#### 验证只允许 http 协议的 url 地址\n\n> 1.4.0 及以上版本\n\nisUrl 可以配置如下参数\n\n- schemes 协议，默认是为： `['http', 'https', 'ftp', 'sftp']`\n- allowLocal 是否允许填写本地地址\n- allowDataUrl 是否允许 dataUrl\n\n\n\n### 自定义校验函数\n\n可以自己写代码扩展表单验证，请参考 \n\n## 服务端校验\n\n### 通过表单提交接口\n\n也可以通过表单提交接口返回错误信息，实现服务端校验\n\n\n\n点击提交，api 接口返回中，需要在 errors 变量中，返回某个表单项的报错信息，`key`值为该表单项的`name`值。\n\n如上，接口返回的格式如下，提交后，`test2`表达项会显示报错信息\n\n\n\n#### Combo 校验\n\nCombo 类型的表单项，要实现服务端校验，可以使用 `路径key` 来定位要显示报错信息的表单项，例如 `a[0].b` 定位到 a combo 的第一项中 b 表单项。\n\n例如有如下表单，点击提交，查看效果：\n\n\n\n接口返回如下\n\n\n\n#### Table 校验\n\nTable 类型的表单项，要实现服务端校验，可以使用 `路径key` 来定位要显示报错信息的表单项，例如 `a[0].b` 定位到 a table 的第一项中 b 表单项。\n\n例如有如下表单，点击提交，查看效果：\n\n\n\n接口返回如下\n\n\n\n### 通过表单项校验接口\n\n可以在表单项上，配置校验接口 `validateApi`，实现单个表单项后端校验。\n\n\n\n校验接口显示校验信息返回格式如下：\n\n\n\n- `status`: 返回 `0` 表示校验成功，`422` 表示校验失败;\n- `errors`: 返回 `status` 为 `422` 时，显示的校验失败信息;\n\n### 配置自动填充\n\n通过配置 \"autoFill.api\" 为自动填充数据源接口地址；amis 可以将返回数据自动填充到表单中，例如如下配置；\n\n\n\n自动填充接口返回格式如下：\n注意：amis 仅处理接口返回结果仅有一项的数据，默认自动填充相关字段\n\n\n\n或者是\n\n\n\n### 配置参照录入\n\n设置 autoFill.showSuggestion 为 true；同时在 autoFill 中配置如下示例参数，可以进行数据的参照录入「当前表单项聚焦或者值变化时弹出 dialog/drawer/popOver 供用户操作」例如如下配置\n\nfillMapping 配置 支持变量取值和表达式；\n如下配置中，如果想一次选中多条数据并映射可如下配置表达式，其中 items 默认为选中的 1 至 N 条数据：\n仅挑选 platform,version 字段追加数据并去重：combo：'${UNIQ(CONCAT(combo, ARRAYMAP(items, item => {platform: item.platform, version: item.version})))}'\n数据替换并去重：combo：'${UNIQ(ARRAYMAP(items, item => {platform: item.platform, version: item.version}))}'\n数据替换：combo: ${items}\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------------- | -------------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------- |\n| type | `string` | | 指定表单项类型 |\n| className | `string` | | 表单最外层类名 |\n| inputClassName | `string` | | 表单控制器类名 |\n| labelClassName | `string` | | label 的类名 |\n| name | `string` | | 字段名，指定该表单项提交时的 key |\n| value | `string` | | 表单默认值 |\n| label | 或 `false` | | 表单项标签 |\n| labelAlign | `\"right\" \\| \"left\"` | `\"right\"` | 表单项标签对齐方式，默认右对齐，仅在 `mode`为`horizontal` 时生效 |\n| labelRemark | | | 表单项标签描述 |\n| description | | | 表单项描述 |\n| placeholder | `string` | | 表单项描述 |\n| inline | `boolean` | | 是否为 内联 模式 |\n| submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 |\n| disabled | `boolean` | | 当前表单项是否是禁用状态 |\n| disabledOn | | | 当前表单项是否禁用的条件 |\n| visible | | | 当前表单项是否禁用的条件 |\n| visibleOn | | | 当前表单项是否禁用的条件 |\n| required | `boolean` | | 是否为必填。 |\n| requiredOn | 来配置当前表单项是否为必填。 |\n| validations | | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 |\n| validateApi | | | 表单校验接口 |\n| autoFill | | | 数据录入配置，自动填充或者参照录入 |\n| autoFill.showSuggestion | `boolean` | | true 为参照录入，false 自动填充 |\n| autoFill.api | | | 自动填充接口/参照录入筛选 CRUD 请求配置 |\n| autoFill.silent | `boolean` | | 是否展示数据格式错误提示，默认为 true |\n| autoFill.fillMappinng | | | 自动填充/参照录入数据映射配置，键值对形式，值支持变量获取及表达式 |\n| autoFill.trigger | `string` | | showSuggestion 为 true 时，参照录入支持的触发方式，目前支持 change「值变化」｜ focus 「表单项聚焦」 |\n| autoFill.mode | `string` | | showSuggestion 为 true 时，参照弹出方式 dialog, drawer, popOver |\n| autoFill.labelField | `string` | | showSuggestion 为 true 时，设置弹出 dialog,drawer,popOver 中 picker 的 labelField |\n| autoFill.position | `string` | | showSuggestion 为 true 时，参照录入 mode 为 popOver 时，可配置弹出位置 |\n| autoFill.size | `string` | | showSuggestion 为 true 时，参照录入 mode 为 dialog 时，可设置大小 |\n| autoFill.columns | `Array<Column>` | | showSuggestion 为 true 时，数据展示列配置 |\n| autoFill.filter | | | showSuggestion 为 true 时，数据查询过滤条件 |\n| static | `boolean` | | `2.4.0` 当前表单项是否是静态展示，目前支持静 |\n| staticClassName | `string` | | `2.4.0` 静态展示时的类名 |\n| staticLabelClassName | `string` | | `2.4.0` 静态展示时的Label的类名 |\n| staticInputClassName | `string` | | `2.4.0` 静态展示时的value的类名 |\n| staticSchema | `string`|`Array`| | | `2.4.0` 自定义静态展示方式 |\n| staticSchema.limit | `number` | 10 | `2.4.0` select、checkboxes等选择类组件多选时展示态展示的数量 |\n\n## 支持静态展示的表单项 \n\n可以在查看支持静态展示的表单项的展示方式\n\n- form 表单\n- button-group-select 按钮点选\n- chained-select 链式下拉框\n- chart-radios 图表单选框\n- checkbox 勾选框\n- checkboxes 复选框\n- combo 组合\n- input-kv 键值对\n- input-array 数组输入框\n- input-city 城市选择器\n- input-color 颜色选择器\n- input-date 日期选择器\n- input-date-range 日期范围选择器\n- input-datetime-range 日期时间选择器\n- input-time-range 时间范围选择器\n- input-group 输入框组合\n- input-month-range 月份范围\n- input-number 数字输入\n- input-quarter-range 季度范围\n- input-range 滑块\n- input-rating 评分\n- input-tag 标签选择器\n- input-text 输入框\n- input-password 密码输入框\n- input-email 邮箱输入框\n- input-url url输入框\n- native-date native日期选择器\n- native-time native时间选择器\n- native-number native数字输入\n- input-tree 树形选择器\n- input-year-range 年份范围\n- list-select 列表选择器\n- location-picker 地理位置\n- matrix-checkboxes 矩阵勾选\n- nested-select 级联选择器\n- radios 单选框\n- select 下拉框\n- multi-select 多选下拉框\n- switch 开关\n- tabs-transfer 组合穿梭器\n- tabs-transfer-picker 组合穿梭选择器\n- textarea 多行输入框\n- transfer 穿梭器\n- transfer-picker 穿梭选择器\n- tree-select 属性选择器\n","path":"/zh-CN/components/form/formitem"},{"title":"Formula 公式","body":"\n可以设置公式，将公式结果设置到指定表单项上。\n\n> 该表单项是隐藏的\n\n## 基本用法\n\n\n\n## 自动应用\n\n\n\n## 手动应用\n\n配置`\"autoSet\": false`，然后按钮上配置`target`，配置值为`formula`的`id`值，就可以实现手动触发公式应用\n\n\n\n> 为什么设置`id`而不是设置`name`?\n>\n> 因为`name`值已经用来设置目标变量名了，这个表单项肯定已经存在了，所以不是唯一了，不能够被按钮指定。\n\n## 条件应用\n\n可以配置`condition`用来指定作用条件，有两种写法：\n\n- 用 tpl 语法，把关联的字段写上如： `${xxx} ${yyy}` 意思是当 xxx 和 yyy 的取值结果变化了就再应用一次公式结果。\n- 自己写判断如: `this.xxx == \"a\" && this.xxx !== this.__prev.xxx` 当 xxx 变化了，且新的值是字符 \"a\" 时应用，可以写更加复杂的判断。\n\n\n\n## 使用新表达式语法\n\n> 1.5.0 及以上版本\n\n通过新的语法，可以调用其中的函数，比如\n\n\n\n这种写法默认会解决浮点数计算问题（需要更新到 amis 1.6.4 及以上版本），比如\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------- |\n| name | `string` | | 需要应用的表单项`name`值，公式结果将作用到此处指定的变量中去。 |\n| formula | | | 应用的公式 |\n| condition | | | 公式作用条件 |\n| initSet | `boolean` | `true` | 初始化时是否设置 |\n| autoSet | `boolean` | `true` | 观察公式结果，如果计算结果有变化，则自动应用到变量上 |\n| id | `boolean` | `true` | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoSet` 为 false 时用来手动触发 |\n","path":"/zh-CN/components/form/formula"},{"title":"Group 表单项组","body":"\n表单项，默认都是一行显示一个，Group 组件用于在一行展示多个表单项，会自动根据表单项数量均分宽度。\n\n## 基本用法\n\n\n\n## 展示\n\n可以给`group`组件设置`mode`调整展示模式，用法同 \n\n下面`group`我们配置了`\"mode\": \"horizontal\"`，观察显示情况\n\n\n\n当表单在水平模式下时，如果`group`内表单项设置`\"label\": false`，会导致布局错乱，如下\n\n\n\n这时可以给`group`配置`label`属性，保持和其他表单项布局统一\n\n\n\n## 宽度占比\n\n在表单项内部可以通过 `columnRatio` 来控制宽度，整体是 12 等分\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- |\n| className | `string` | | CSS 类名 |\n| label | `string` | | group 的标签 |\n| body | Array<> | | 表单项集合 |\n| mode | `string` | | 展示默认，同 中的模式 |\n| gap | `string` | | 表单项之间的间距，可选：`xs`、`sm`、`normal` |\n| direction | `string` | `\"horizontal\"` | 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal` |\n","path":"/zh-CN/components/form/group"},{"title":"Hidden 隐藏字段","body":"\n## 基本用法\n\n默认表单提交，在没有 的情况下，只会发送 `body` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件\n\n\n","path":"/zh-CN/components/form/hidden"},{"title":"Form 表单","body":"\n表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据。\n\n## 基本用法\n\n最基本的用法是配置 和 提交接口`api`。\n\n如下我们配置姓名和邮箱表单项，并可以填写数据并提交给接口`/api/mock2/form/saveForm`。\n\n\n\n## 表单展示\n\n### 默认模式\n\n默认展示模式为文字表单项分行显示\n\n\n\n### 水平模式\n\n水平模式，左右摆放，左右比率分配。\n\n\n\n可以配置`horizontal`属性，调整偏移量，格式如下：\n\n\n\n\n\n通过上面的配置可以看出来水平布局其实按比率分配的。实际上有时候固定左侧宽度更好看点。\n\n\n\n也可以直接配置 'xs' | 'sm' | 'md' | 'lg' 来定义左侧 label 的宽度。\n\n\n\n#### 两端对齐\n\n有时表单内容需要两端对齐，可在 horizontal 中增加 justify 配置，注意只对内联控件生效\n\n\n\n#### label 对齐模式\n\n水平模式下 `labelAlign` 可以设置标签文本的对齐方式，支持`right`和`left`，默认为`right`。该属性的优先级：表单项 > 表单。\n\n\n\n### 内联模式\n\n使用内联模式展现表单项\n\n\n\n### 自定义 label 宽度\n\n水平模式下 `labelWidth` 可以设置标签文本的自定义宽度，默认单位为`px`。该属性的优先级：表单项 > 表单。\n\n\n\n### 实现一行展示多个表单项\n\n有两种方法，一个是通过 `columnCount` 来控制表单显示几列\n\n\n\n另一个方法是使用 group，它能实现每行显示不同列数，以及不同列的宽度分配情况，可以实现更灵活的控制\n\n\n\n### 底部按钮栏\n\n#### 隐藏默认提交按钮\n\nForm 默认会在底部渲染一个提交按钮，用于执行表单的提交行为。你可以通过两种方式去掉这个默认的提交按钮：\n\n1. 配置：`\"submitText\": \"\"`\n2. 配置：`\"actions\": []`\n\n\n\n#### 配置若干自定义按钮\n\n同样，你可以通过 actions 属性，配置任意你想要的行为按钮。\n\n\n\n请记住，如果想触发表单提交行为，请配置`\"actionType\": \"submit\"`或`\"type\": \"submit\"`按钮\n\n### 去掉表单边框\n\n通过配置`\"wrapWithPanel\": false`，可以去掉默认表单边框（包括标题，按钮栏以及边距样式等）。\n\n\n\n**注意！配置该属性后，`title`和`actions`属性将失效并无法渲染，请在表单内自行配置。**\n\n### 固定底部栏\n\n如果表单项较多导致表单过长，而不方便操作底部的按钮栏，可以配置`\"affixFooter\": true`属性，将底部按钮栏固定在浏览器底部\n\n## 表单静态展示\n\n> 2.4.0 及以上版本\n\n在一些场景，表单提交后需要将填写的内容静态展示\n\n### 设置初始状态\n\n通过配置`static: true`将整个表单设置为静态展示，单个表单项也支持此配置\n\n\n\n### 切换输入态和展示态\n\n也支持使用切换表单的 输入态和展示态（静态），也可以使用动作对单个表单项进行状态切换 \n可以在查看表单项的静态展示方式\n\n\n\n## 表单项数据初始化\n\n表单可以通过配置`initApi`，实现表单初始化时请求接口，用于展示数据或初始化表单项。\n\n\n\n比如以上这个例子接口返回为\n\n\n\n第一个表单项的 name 配置为 `name`，所以这个表单初始化完毕后展示 `Amis Renderer`。\n\n> 表单项的 value 是不支持表达式，所以不要尝试用 `value: \"${xxx}\"` 来关联数据。\n\n### 轮询初始化请求\n\nForm 支持轮询初始化接口，步骤如下：\n\n1. 配置`initApi`\n2. 配置 `interval`：单位为毫秒，最小 `1000`\n\n\n\n如果希望在满足某个条件的情况下停止轮询，配置`stopAutoRefreshWhen`表达式。\n\n\n\n### 静态初始化数据域\n\n我们也可以手动设置 form 的数据域来初始化多个表单项值\n\n\n\n注意这里的 `data` 会进行数据映射，如果想不映射，需要进行转义，比如下面的例子\n\n\n\n### 数据格式一致性问题\n\n当表单来初始化表单项值时，需要保持数据格式的一致性。\n\n如果表单初始化的值与表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，也许会导致不一致性的问题，我们看一个例子：\n\n\n\n上例中， `select` 我们配置了`\"multiple\": true`，预期中，我们希望选中 `A` 和 `C` 项时，表单项的数据格式为：`\"a,c\"`，但是我们表单数据域中，`select`默认值为`\"value\": [\"a\", \"c\"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题：\n\n1. 有可能不会默认选中 `A` 和 `C` 选项；\n2. 当不操作该表单项，直接提交时，预期是：`\"a,c\"`，但提交给后端的数据为：`[\"a\", \"c\"]`，导致了不一致性的问题。\n\n> 通过 `initApi` 配置默认值同理，不再赘述\n\n因此一定确保默认值与选择器表单项数据格式配置相匹配。\n\n## 表单提交\n\n配置`api`属性，当表单执行提交行为时，会默认将当前表单数据域中的数据使用`post`方式发送给所配置`api`\n\n\n\n点击提交按钮，会看到发送表单请求，请求数据体为：\n\n\n\n发送请求默认为 `POST` 方式，会将所有表单项整理成一个对象发送过过去。除此之外你可以主动获取以下信息。\n\n- `diff` 只会包含 `diff` 结果\n- `prinstine` 原始数据\n 如:\n\n\n\n> 如果 返回了 `data` 对象，且是对象，会把结果 merge 到表单数据里面。\n\n当你需要配置特定的请求方式，请求体，`header`时，使用对象类型 api 配置，并使用 数据映射 进行数据配置。\n\n下面示例我们更改了请求方法为`PUT`，并在原提交数据的基础上添加一个字段`\"_from\"`。更多用法查看 文档\n\n\n\n触发表单提交行为有下面几种方式：\n\n1. 默认的`提交按钮`\n2. 为行为按钮配置`\"actionType\": \"submit\"`\n3. 配置`\"type\": \"submit\"`的按钮\n\n### 轮询提交请求\n\n通过设置`asyncApi`，当表单提交发送保存接口后，还会继续轮询请求该接口，默认间隔为`3秒`，直到返回 `finished` 属性为 `true` 才 结束。\n\n\n\n如果决定结束轮询的标识字段名不是 `finished`，请设置`finishedField`属性，比如：`\"finishedField\": \"is_success\"`\n\n## 表单校验\n\n一般可以通过在中，配置校验规则完成校验，但是有时候，我们需要组合多个表单项实现一些校验，这时可以通过配置 `rules` 来实现组合校验。\n\n例如下例，我们想校验 `a` 和 `b` 表单项不可以同时有值，否则就报错，则可以进行如下配置：\n\n\n\n> `rule` 编写使用 \n\n### 组合校验高亮表单项\n\n> 1.6.5 及以上版本\n\n默认组合校验的错误信息显示在表单的底部，如果希望可以定位到表单项自己，则可以通过配置 `name` 来高亮错误。\n\n\n\n## 重置表单\n\n配置`\"type\": \"reset\"`或者`\"actionType\": \"reset\"`的按钮，可以实现点击重置表单项值。\n\n\n\n> **请注意：**这里的重置是将表单数据域重置到**初始状态**，**而不是清空**，如果你配置了初始化接口，那么重置操作是会**将表单项重置至初始化表单项值**\n\n## 表单数据域调试\n\n配置`debug:true`可以查看当前表单的数据域数据详情，方便数据映射、表达式等功能调试，如下，你可以修改表单项查看数据域变化。`debugConfig`可以额外配置 debug 区域的相关配置，具体配置请参考。\n\n> 2.2.0 及以上版本支持`debugConfig`\n\n\n\n> 该配置不会展示完整的数据链，只会展示当前表单的数据域\n\n## 禁用数据链\n\n默认表单是可以获取到完整数据链中的数据的，但是该默认行为不适用于所有场景，例如：\n\n在 CRUD 的列表项中配置弹框，弹框中有一个表单，则该表单项中所有的同`name`表单项都会根据上层`crud`的行数据进行初始化，如果你是实现编辑的功能那并没有是什么问题，但是如果你是新建功能，那么这将不符合你的预期，你可以手动设置`\"canAccessSuperData\": false`来关闭该行为\n\n## 提交后行为\n\n表单提交成功后，可以执行一些行为。\n\n### 重置表单\n\n如果想提交表单成功后，重置当前表单至初始状态，可以配置`\"resetAfterSubmit\": true`。\n\n\n\n编辑表单项，点击提交，成功后会发现表单项的值会重置到初始状态，即空\n\n> 注意，如果表单项有默认值，则会将该表单项的值重置至该默认值。\n\n### 跳转页面\n\n配置`redirect`属性，可以指定表单提交成功后要跳转至的页面\n\n\n\n### 刷新目标组件\n\n配置`reload`属性为其他组件`name`值，可以在表单提交成功之后，刷新指定组件。\n\n\n\n上例中`form`提交成功后，会触发`name`为`my_service`的`Service`组件重新请求初始化接口\n\n上面示例是一种\n\n### 显示提交的返回结果\n\n默认情况下表单提交返回结果会写入当前表单的数据域，如果要显示在当前表单，可以直接使用 `static` 类型，比如下面的例子\n\n\n\n### 将提交返回内容发送到其它组件\n\n还可以将返回结果发送到其它组件，首先设置另一个表单的 `name`，然后通过 `reload` 配置参数来提交\n\n\n\n### 将数据域发送给目标组件\n\n配置`target`属性为目标组件`name`值，可以在触发提交行为后，将当前表单的数据域发送给目标组件。\n\n\n\n第一个表单在提交时，会将它的表单数据域数据发送给`detailForm`表单，触发`detailForm`的初始化接口联动，重新请求接口更新数据域，并更新关键字表单项。\n\n上面示例组合使用了 \n\n## 持久化保存表单项数据\n\n表单默认在重置之后（切换页面、弹框中表单关闭表单），会自动清空掉表单中的所有数据，如果你想持久化保留当前表单项的数据而不清空它，那么通过 Form 配置 `persistData: \"xxx\"`，指定一个 `key` ，来实现数据持久化保存\n\n> 注意，如果使用在 CRUD 列表中的编辑框内的 Form 中，可以利用数据映射语法，`persistData: \"xxx:${id}\"`，来为 form 指定一个唯一的 key\n\n如果想提交成功后，清空该缓存，则配置`\"clearPersistDataAfterSubmit\": true`\n\n### 限制只存储某些 key\n\n> 2.3.0 及以上版本\n\n如果只想存储部分 key，可以配置 `\"persistDataKeys\": [\"key1\", \"key2\"]`，这样就只有 name 为 key1 和 key2 的表单项数据会持久化\n\n## 禁用回车提交\n\n表单默认情况下回车就会提交，如果想阻止这个行为，可以加上 `preventEnterSubmit` 配置项。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| type | `string` | | `\"form\"` 指定为 Form 渲染器 |\n| name | `string` | | 设置一个名字后，方便其他组件与其通信 |\n| mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` |\n| horizontal | `Object` | `{\"left\":\"col-sm-2\", \"right\":\"col-sm-10\", \"offset\":\"col-sm-offset-2\"}` | 当 mode 为 `horizontal` 时有用，用来控制 label |\n| labelAlign | `\"right\" \\| \"left\"` | `\"right\"` | 表单项标签对齐方式，默认右对齐，仅在 `mode`为`horizontal` 时生效 |\n| labelWidth | `number \\| string` | | 表单项标签自定义宽度 |\n| title | `string` | `\"表单\"` | Form 的标题 |\n| submitText | `String` | `\"提交\"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 |\n| className | `string` | | 外层 Dom 的类名 |\n| body | Array< > | | Form 表单项集合 |\n| actions | Array<> | | Form 提交按钮，成员为 Action |\n| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 |\n| messages.fetchSuccess | `string` | | 获取成功时提示 |\n| messages.fetchFailed | `string` | | 获取失败时提示 |\n| messages.saveSuccess | `string` | | 保存成功时提示 |\n| messages.saveFailed | `string` | | 保存失败时提示 |\n| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 |\n| panelClassName | `string` | | 外层 panel 的类名 |\n| api | | | Form 用来保存数据的 api。 |\n| initApi | | | Form 用来获取初始数据的 api。 |\n| rules | Array<{rule:string;message:string;name?: string[]}> | | 表单组合校验规则 |\n| interval | `number` | `3000` | 刷新时间(最低 3000) |\n| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |\n| stopAutoRefreshWhen | `string` | `\"\"` | 通过 来配置停止刷新的条件 |\n| initAsyncApi | | | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮询请求该接口，直到返回 finished 属性为 true 才 结束。 |\n| initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 |\n| initFetchOn | `string` | | 用表达式来配置 |\n| initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 |\n| initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后，默认拉取的时间间隔 |\n| asyncApi | | | 设置此属性后，表单提交发送保存接口后，还会继续轮询请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 |\n| checkInterval | `number` | 3000 | 轮询请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效 |\n| finishedField | `string` | `\"finished\"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` |\n| submitOnChange | `boolean` | `false` | 表单修改即提交 |\n| submitOnInit | `boolean` | `false` | 初始就提交一次 |\n| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 |\n| primaryField | `string` | `\"id\"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 |\n| target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 |\n| redirect | `string` | | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 |\n| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |\n| autoFocus | `boolean` | `false` | 是否自动聚焦。 |\n| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 |\n| persistData | `string` | `\"\"` | 指定一个唯一的 key，来配置当前表单是否开启本地缓存 |\n| persistDataKeys | `string[]` | `\"\"` | 指指定只有哪些 key 缓存 |\n| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 |\n| preventEnterSubmit | `boolean` | `false` | 禁用回车提交表单 |\n| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 |\n| promptPageLeave | `boolean` | `false` | form 还没保存，即将离开页面前是否弹框确认。 |\n| columnCount | `number` | 0 | 表单项显示为几列 |\n| inheritData | `boolean` | `true` | 默认表单是采用数据链的形式创建个自己的数据域，表单提交的时候只会发送自己这个数据域的数据，如果希望共用上层数据域可以设置这个属性为 false，这样上层数据域的数据不需要在表单中用隐藏域或者显式映射才能发送了。 |\n| static | `boolean` | | `2.4.0` 整个表单静态方式展示，详情请查看 |\n| staticClassName | `string` | | `2.4.0` 表单静态展示时使用的类名 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| --------------------- | ------------------------------------------------------------ | ---------------------------- |\n| inited | `event.data: object` initApi 远程请求返回的初始化数据 | 远程初始化接口请求成功时触发 |\n| change | `event.data: object` 当前表单数据 | 表单值变化时触发 |\n| formItemValidateSucc | `event.data: object` 当前表单数据 | 表单项校验成功时触发 |\n| formItemValidateError | `event.data: object` 当前表单数据 | 表单项校验失败时触发 |\n| validateSucc | `event.data: object` 当前表单数据 | 表单校验成功时触发 |\n| validateError | `event.data: object` 当前表单数据 | 表单校验失败时触发 |\n| submitSucc | `event.data.result: object` api 远程请求成功后返回的结果数据 | 提交成功时触发 |\n| submitFail | `event.data.error: object` api 远程请求失败后返回的错误信息 | 提交失败时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------ | -------------------------- |\n| submit | - | 提交表单 |\n| reset | - | 重置表单 |\n| clear | - | 清空表单 |\n| validate | - | 校验表单 |\n| reload | - | 刷新（重新加载） |\n| setValue | `value: object` 更新的表单数据 | 更新数据，对数据进行 merge |\n| static | - | 表单切换为静态展示 |\n| nonstatic | - | 表单切换为普通输入态 |\n","path":"/zh-CN/components/form/index"},{"title":"InputArray 数组输入框","body":"\nInputArray 是一种简化的 ，提交的时将以数组的形式提交。\n\n## 基本用法\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------ |\n| type | `string` | `\"array\"` | 指明为`array`组件 |\n| items | `string`或 | | 配置单项表单类型 |\n| addable | `boolean` | | 是否可新增。 |\n| removable | `boolean` | | 是否可删除 |\n| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 |\n| draggableTip | `string` | | 可拖拽的提示文字，默认为：`\"可通过拖动每行中的【交换】按钮进行顺序调整\"` |\n| addButtonText | `string` | `\"新增\"` | 新增按钮文字 |\n| minLength | `number` | | 限制最小长度 |\n| maxLength | `number` | | 限制最大长度 |\n","path":"/zh-CN/components/form/input-array"},{"title":"InputCity 城市选择器","body":"\n城市选择器，方便输入城市，可以理解为自动配置了国内城市选项的 Select，支持到县级别。\n\n## 基本用法\n\n\n\n观察数据域中表单项的值，存储的是位置邮编。\n\n## 配置选择级别\n\n可以通过设置 `allowDistrict` 和 `allowCity` 设置用户选择级别，例如只选择省份：\n\n\n\n## 获取更多选项信息\n\n表单项值默认格式是编码（即 `code`），如果你想要详细点的信息，可以把 `extractValue` 设置成 `false`。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------- |\n| allowCity | `boolean` | `true` | 允许选择城市 |\n| allowDistrict | `boolean` | `true` | 允许选择区域 |\n| searchable | `boolean` | `false` | 是否出搜索框 |\n| extractValue | `boolean` | `true` | 默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ----------------------------------- | ---------------- |\n| change | `[name]: number \\| string` 组件的值 | 选中值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string \\| number` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/input-city"},{"title":"InputColor 颜色选择器","body":"\n## 基本用法\n\n\n\n## 选择器预设颜色值\n\n颜色选择器底部预设有会写可选的颜色值，默认为：\n\n\n\n你可以配置`presetColors`数组进行自定义。颜色支持两种格式`string` 和 `{color: string; title: string}`，并支持两种格式混合使用。`string`格式支持所有合法的 CSS 颜色码，`object`类型下的`color`属性为 CSS 颜色码，`title`属性为颜色名称，鼠标悬浮于色块时会显示对应颜色名称。\n\n\n\n## rgba\n\n将 `format` 设置为 rgba 就能改变颜色透明度。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |\n| format | `string` | `hex` | 请选择 `hex`、`hls`、`rgb`或者`rgba`。 |\n| presetColors | `Array<string>` | | 选择器底部的默认颜色，数组内为空则不显示默认颜色 |\n| allowCustomColor | `boolean` | `true` | 为`false`时只能选择颜色，使用 `presetColors` 设定颜色选择范围 |\n| clearable | `boolean` | `\"label\"` | 是否显示清除按钮 |\n| resetValue | `string` | `\"\"` | 清除后，表单项值调整成该值 |\n","path":"/zh-CN/components/form/input-color"},{"title":"InputDateRange 日期范围","body":"\n## 基本用法\n\n\n\n## 默认值\n\n通过 value 设置默认值，除了实际值，比如\n\n\n\n还可以是相对值，比如最近一周内\n\n\n\n支持的相对值关键字有：\n\n- today: 当前日期\n- day 或 days: 天\n- week 或 weeks: 周\n- month 或 months: 月\n- year 或 years: 年\n\n## 快捷键\n\n`ranges`属性支持自定义快捷选择日期范围快捷键\n\n\n\n支持的快捷键有\n\n- `today`: 今天\n- `yesterday`: 昨天\n- `tomorrow`: 明天\n- `prevweek`: 上周\n- `thisweek`: 这个周\n- `thismonth`: 本月\n- `prevmonth`: 上个月\n- `prevquarter`: 上个季度\n- `thisquarter`: 这个季度\n- `thisyear`: 今年\n- `lastYear`: 去年\n- `{n}daysago` : 最近 n 天，例如：`7daysago`，下面用法相同\n- `{n}dayslater`: n 天以内\n- `{n}weeksago`: 最近 n 周\n- `{n}weekslater`: n 周以内\n- `{n}monthsago`: 最近 n 月\n- `{n}monthslater`: n 月以内\n- `{n}quartersago`: 最近 n 季度\n- `{n}quarterslater`: n 季度以内\n- `{n}yearsago`: 最近 n 年\n- `{n}yearslater`: n 年以内\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ----------- | ------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------- | ------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-MM-DD` | |\n| placeholder | `string` | `\"请选择日期范围\"` | 占位文本 |\n| ranges | `Array<string> 或 string` | `\"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter\"` | 日期范围快捷键 |\n| minDate | `string` | | 限制最小日期，用法同 |\n| maxDate | `string` | | 限制最大日期，用法同 |\n| minDuration | `string` | | 限制最小跨度，如： 2days |\n| maxDuration | `string` | | 限制最大跨度，如：1year |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | ----------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，，依赖格式`format`，例如：'1650556800,1652889599' |\n","path":"/zh-CN/components/form/input-date-range"},{"title":"InputDate 日期","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中任意日期，可以看到默认显示日期的格式是像`2020-04-14`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`2020年04月14日`这样的格式，查找 可知配置格式应为 `YYYY年MM月DD日`，即：\n\n\n\n选中任意日期，观察显示格式\n\n## 值格式\n\n选中任意日期，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。\n\n\n\n如果你想要其他格式的日期值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`2020-04-14`这样的格式，查找 可知配置格式应为 `YYYY-MM-DD`，即：\n\n\n\n选中任意日期，观察数据域中表单项值的变化\n\n## 默认值\n\n可以设置`value`属性，设置日期选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1days\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1days\"`，默认就会选中明天。\n\n支持的相对值关键字有：\n\n- `today`: 当前日期\n- `day`或`days`: 天\n- `week`或`weeks`: 周\n- `month`或`months`: 月\n- `year`或`years`: 年\n\n### 通过公式配置默认值\n\n> 1.7.0 及以上版本\n\n可以通过日期公式来动态计算。\n\n\n\n## 限制范围\n\n可以通过配置`maxDate`和`minDate`显示可选范围\n\n### 固定时间值\n\n\n\n### 支持相对值\n\n范围限制也支持设置 。\n\n\n\n### 支持模板\n\n也支持通过，设置自定义值。\n\n来一个常见例子，配置两个选择`开始时间`和`结束时间`的时间选择器，需要满足：`开始时间`不能大于`结束时间`，`结束时间`也不能小于`开始时间`。\n\n\n\n## 快捷键\n\n你也可以配置`shortcuts`属性支持快捷选择日期\n注：移动端 picker 的形式不支持快捷键\n\n\n\n上例中我们配置了`\"shortcuts\": [\"yesterday\" ,\"today\", \"tomorrow\"]`，选择器顶部有将会显示快捷键`昨天`，`今天`和`明天`\n\n支持的快捷键有\n\n- `today`: 今天\n- `yesterday`: 昨天\n- `thisweek`: 本周一\n- `thismonth`: 本月初\n- `prevmonth`: 上个月初\n- `prevquarter`: 上个季节初\n- `thisquarter`: 本季度初\n- `tomorrow`: 明天\n- `endofthisweek`: 本周日\n- `endofthismonth`:本月底\n- `endoflastmonth`:上月底\n- `{n}daysago` : n 天前，例如：`2daysago`，下面用法相同\n- `{n}dayslater`: n 天后\n- `{n}weeksago`: n 周前\n- `{n}weekslater`: n 周后\n- `{n}monthsago`: n 月前\n- `{n}monthslater`: n 月后\n- `{n}quartersago`: n 季度前\n- `{n}quarterslater`: n 季度后\n\n## UTC\n\n\n\n## 内嵌模式\n\n\n\n## 原生日期组件\n\n原生数字日期将直接使用浏览器的实现，最终展现效果和浏览器有关，而且只支持 `min`、`max`、`step` 这几个属性设置。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | --------- | -------------- | ----------------------------------------------------------------------------------------------------------- |\n| value | `string` | | |\n| format | `string` | `X` | 日期选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `YYYY-MM-DD` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 |\n| placeholder | `string` | `\"请选择日期\"` | 占位文本 |\n| shortcuts | `string` | | 日期快捷键 |\n| minDate | `string` | | 限制最小日期 |\n| maxDate | `string` | | 限制最大日期 |\n| utc | `boolean` | `false` | 保存 utc 值 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1650556800' |\n","path":"/zh-CN/components/form/input-date"},{"title":"InputDatetimeRange 日期时间范围","body":"\n## 基本用法\n\n\n\n## 时间显示到秒\n\n通过 `\"timeFormat\": \"HH:mm:ss\"` 设置时间输入框显示秒\n\n\n\n## 快捷键\n\n`ranges`属性支持自定义日期时间范围快捷键\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ----------- | ------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-MM-DD` | |\n| placeholder | `string` | `\"请选择日期范围\"` | 占位文本 |\n| ranges | `Array<string> 或 string` | `\"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter\"` | 日期范围快捷键 |\n| minDate | `string` | | 限制最小日期时间，用法同 |\n| maxDate | `string` | | 限制最大日期时间，用法同 |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，依赖格式`format`，例如 '1650556800,1652889599' |\n","path":"/zh-CN/components/form/input-datetime-range"},{"title":"InputDatetime 日期时间","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中任意日期时间，可以看到默认显示日期的格式是像`2020-04-14 12:20:10`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`2020年04月14日 12时20分10秒`这样的格式，查找 可知配置格式应为 `YYYY年MM月DD日 HH时mm分ss秒`，即：\n\n\n\n选中任意日期时间，观察显示格式\n\n## 值格式\n\n选中任意日期时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。\n\n\n\n如果你想要其他格式的日期值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`2020-04-14 12:20:10`这样的格式，查找 可知配置格式应为 `YYYY-MM-DD HH:mm:ss`，即：\n\n\n\n选中任意日期时间，观察数据域中表单项值的变化\n\n## 默认值\n\n可以设置`value`属性，设置日期选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后的时间。\n\n支持的相对值关键字除了 中的以外，还支持：\n\n- `now`: 当前时间\n- `minute`或`minutes`或`min`或`mins`: 分钟\n- `hour`或`hours`: 小时\n\n## 限制范围\n\n### 控制时间范围\n\n通过 `timeConstraints` 属性可以控制时间输入范围\n\n\n\n可以通过配置`maxDate`和`minDate`显示可选范围\n\n### 固定时间值\n\n\n\n### 支持相对值\n\n范围限制也支持设置 。\n\n\n\n### 支持模板\n\n也支持通过，设置自定义值。\n\n来一个常见例子，配置两个选择`开始时间`和`结束时间`的时间选择器，需要满足：`开始时间`不能小于`结束时间`，`结束时间`也不能大于`开始时间`。\n\n\n\n## 快捷键\n\n你也可以配置`shortcuts`属性支持快捷选择日期\n\n\n\n上例中我们配置了`\"shortcuts\": [\"yesterday\" ,\"today\", \"tomorrow\"]`，选择器顶部有将会显示快捷键`昨天`，`今天`和`明天`\n\n除了支持 的快捷键有\n\n支持的快捷键除了 中的以外，还支持：\n\n- `now`: 现在\n- `{n}hoursago` : n 小时前，例如：`2hoursago`，下面用法相同\n- `{n}hourslater` : n 小时前，例如：`2hourslater`，下面用法相同\n\n## UTC\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------------------------------- |\n| value | `string` | | |\n| format | `string` | `X` | 日期时间选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `YYYY-MM-DD HH:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| placeholder | `string` | `\"请选择日期以及时间\"` | 占位文本 |\n| shortcuts | `string` | | 日期时间快捷键 |\n| minDate | `string` | | 限制最小日期时间 |\n| maxDate | `string` | | 限制最大日期时间 |\n| utc | `boolean` | `false` | 保存 utc 值 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联 |\n| timeConstraints | `object` | `true` | 请参考 里的说明 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1650556800' |\n","path":"/zh-CN/components/form/input-datetime"},{"title":"InputExcel 解析 Excel","body":"\n这个组件是通过前端对 Excel 进行解析，将结果作为表单项，使用它有两个好处：\n\n1. 节省后端开发成本，无需再次解析 Excel\n2. 可以前端实时预览效果，比如配合 input-table 组件进行二次修改\n\n## 基本使用\n\n默认情况下只解析第一个 sheet 的内容，下面的例子中，选择上传文件后，就能知道最终会解析成什么数据\n\n\n\n默认模式是解析成对象数组，将第一行作为对象里的键，可以上传一个类似这样的 Excel 内容试试\n\n\n\n解析后的的数据格式将会是\n\n\n\n可以配合 `input-table` 来实现上传后二次编辑\n\n\n\n需要保证 `input-table` 的 `name` 和 `input-excel` 一致，同时 `columns` 中的 `name` 也需要和 Excel 的列名一致。\n\n## 二维数组模式\n\n除了默认配置的对象数组格式，还可以使用二维数组方式，方法是设置 `\"parseMode\": \"array\"`\n\n\n\n如果是前面的例子，解析结果将会是\n\n\n\n## 解析多个 sheet\n\n默认配置只解析第一个 sheet，如果要解析多个 sheet，可以通过 `\"allSheets\": true` 开启多个 sheet 的读取，这时的数据会增加一个层级。\n\n\n\n如果按之前的例子，结果将会是\n\n\n\n## 富文本模式\n\n默认情况下 Excel 内容将会解析为纯文本，如果要使用富文本格式，可以通过 `plainText` 属性控制\n\n\n\n开启这个模式后，对于富文本的内容会解析成对象的形式，有以下几种\n\n- 富文本，内容放在 richText 属性下\n\n \n\n- 出错\n\n \n\n- 公式\n\n \n\n- 超链接\n\n \n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------- | -------- | ------------------ |\n| allSheets | `boolean` | false | 是否解析所有 sheet |\n| parseMode | `'array'` 或 `'object'` | 'object' | 解析模式 |\n| includeEmpty | `boolean` | true | 是否包含空值 |\n| plainText | `boolean` | true | 是否解析为纯文本 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------ | ------------------------ |\n| change | `[name]: Array<object>` 组件的值（excel 解析后的数据） | excel 上传解析完成后触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: Array<object>` 更新的 excel 解析后数据 | 更新数据 |\n","path":"/zh-CN/components/form/input-excel"},{"title":"InputFile 文件上传","body":"\n## 基本用法\n\n用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了。\n\n> 如果希望文件内容伴随表单一起提交，可以配置 `asBlob` 或者 `asBase64`。\n\n\n\n### 接口说明\n\n这是单文件上传模式，通过配置 `receiver` 来接管文件上传。\n\n接口发送方式是 POST, 数据体为 form-data 格式。对应的文件字段名为 `file`。这个可以通过 `fileField` 来配置。要求返回的数据格式如下。\n\n\n\n- value：必须返回该字段用作回显，一般是文件资源地址\n\n> 注意这只是单文件上传部分，如果允许上传的文件比较大，建议用分块上传，请阅读下面的分块上传部分。\n\n## 限制文件类型\n\n可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`\n\n\n\n想要限制多个类型，则用逗号分隔，例如：`.csv,.md`\n\n## 限制文件大小\n\n可以配置`maxSize`来限制文件大小\n\n\n\n## 手动上传\n\n如果不希望 File 组件上传，可以配置 `asBlob` 或者 `asBase64`，采用这种方式后，组件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。\n\n\n\n上例中，选择任意文件，然后观察数据域变化；点击提交，amis 自动会调整接口数据格式为`FormData`\n\n## 分块上传\n\n如果文件过大，则可能需要使用分块上传，默认大于 5M（chunkSize 配置决定） 的文件是会自动开启，可以通过 `useChunk` 配置成 false 关闭。\n\n分块上传需要配置三个接口来完成分别是:\n\n- `startChunkApi` 用来做分块前的准备工作\n- `chunkApi` 用来接收每个分块上传\n- `finishChunkApi` 用来收尾分块上传\n\n还可以通过 `concurrency` 控制并行数量，默认是 3\n\n### startChunkApi\n\n用来做分块前的准备工作，一个文件只会调用一次。如果出错了，后续的分块上传就会中断。\n\n发送说明：默认是 post，发送的数据中会包含 `filename` 字段，记录文件名，默认的数据体格式为 json。可以额外配置参数，请参考 API 的配置说明。\n\n要求返回的数据中必须包含：\n\n- `uploadId` 这次上传的唯一 ID。\n- `key` 有点类似 `uploadId`，可有可无，爱速搭中用来记录后端文件存储路径。\n\n其他属性返回目前是没有任何作用的。\n\n如：\n\n\n\n### chunkApi\n\n用来接收每个分块上传，大文件会根据 chunkSize 分割成多块，然后每块上传都会调用这个接口。\n\n发送说明：默认为 post，发送体格式为 form-data。包含以下信息：\n\n- `uploadId` startChunkApi 返回的\n- `key` startChunkApi 返回的\n- `partNumber` 分块序号，从 1 开始。\n- `partSize` 分块大小\n- `file` 文件体\n\n要求返回的数据中必须包含:\n\n- `eTag` 通常为文件的内容戳。\n\n如：\n\n\n\n### finishChunkApi\n\n等所有分块上传完后，将上传文件收集到的 `eTag` 信息合并一起，再次请求后端完成文件上传。\n\n发送说明：默认为 post，数据体默认为 json，包含以下信息\n\n- `filename` 文件名\n- `key` startChunkApi 返回的\n- `uploadId` startChunkApi 返回的\n- `partList` 数组，每个成员为 `{partNumber: xxx, eTag: \"xxxxx\"}` 即分块编号和分块 `eTag` 信息。\n\n数据返回，类似单文件上传一样，必须有 `value` 属性，可选返回 `url` 用来决定文件的下载地址。如：\n\n\n\n## 自动填充\n\n上传成功后，可以通过配置 `autoFill` 将上传接口返回的值填充到某个表单项中（在非表单下暂不支持）：\n\n\n\n上例中，file 组件上传后，接口返回格式例如如下：\n\n\n\n然后 file 上配置：\n\n\n\n这样上传成功后，会把接口中的 `url` 变量，赋值给 `myUrl` 变量\n\n**多选模式**\n\n当表单项为多选模式时，不能再直接取选项中的值了，而是通过 `items` 变量来取，通过它可以获取当前选中的选项集合。\n\n\n\n## 拖拽上传\n\n把文件拖入指定区域，完成上传，同样支持点击上传。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| receiver | | | 上传文件接口 |\n| accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` |\n| asBase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 |\n| asBlob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 |\n| maxSize | `number` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`B` |\n| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 |\n| multiple | `boolean` | `false` | 是否多选。 |\n| drag | `boolean` | `false` | 是否为拖拽上传 |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| delimiter | `string` | `,` | |\n| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |\n| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |\n| stateTextMap | object | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 |\n| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 |\n| nameField | `string` | `name` | 接口返回哪个字段用来标识文件名 |\n| valueField | `string` | `value` | 文件的值用那个字段来标识。 |\n| urlField | `string` | `url` | 文件下载地址的字段名。 |\n| btnLabel | `string` | | 上传按钮的文字 |\n| downloadUrl | `boolean`或`string` | `\"\"` 1.1.6 版本开始支持 `post:http://xxx.com/${value}` 这种写法 | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 |\n| useChunk | `boolean`或`\"auto\"` | `\"auto\"` | amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 |\n| chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 |\n| startChunkApi | | | startChunkApi |\n| chunkApi | | | chunkApi |\n| finishChunkApi | | | finishChunkApi |\n| concurrency | `number` | | 分块上传时并行个数 |\n| documentation | `string` | | 文档内容 |\n| documentLink | `string` | | 文档链接 |\n| initAutoFill | `boolean` | `true` | 初表单反显时是否执行 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`file`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |\n| change | `[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 上传文件值变化时触发(上传失败同样会触发) |\n| remove | `item: FileValue` 被移除的文件<br/>`[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 移除文件时触发 |\n| success | `item: FileValue` 远程上传请求成功后返回的结果数据<br/>`[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 上传成功时触发 |\n| fail | `item: FileValue` 上传的文件 <br /> `error: object` 远程上传请求失败后返回的错误信息<br/>`[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 上传文件失败时触发 |\n\n### FileValue 属性表\n\n| 属性名 | 类型 | 说明 |\n| ------ | -------- | -------------------------------------------------- |\n| name | `string` | 文件名称 |\n| value | `string` | 上传成功后返回的 url |\n| state | `string` | 文件当前状态,值可为 `pending` `uploaded` `invalid` |\n| error | `string` | 错误信息 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------- | ---- |\n| clear | - | 清空 |\n","path":"/zh-CN/components/form/input-file"},{"title":"InputFormula 公式编辑器","body":"\n## 基本用法\n\n用来输入公式。还是 beta 版本，整体待优化。\n\n\n\n## 展示模式\n\n设置`\"inputMode\": \"button\"`可以切换编辑器的展示模式为按钮模式。\n\n\n\n设置`\"inputMode\": \"input-group\"`可以切换编辑器的展示模式为输入框组合模式，1.10.0 及以上版本。\n\n\n\n## 变量展示模式\n\n设置不同`variableMode`字段切换变量展示模式，树形结构：\n\n\n\nTab 结构：\n\n\n\n## 高亮文本\n\n通过配置`allowInput`为`false`可以高亮文本内容，但是只能在编辑器中编辑\n\n\n\n## 模板模式\n\n当配置 `evalMode` 为 false 时则为模板模式，意思是说默认不当做表达式，只有 `${`和`}`包裹的部分才是表达式。\n\n\n\n## 混合模式\n\n混合模式的意思是支持输入文本和输入公式两种格式的值，当输入公式时值会自动用 `${` 和 `}` 包裹，如果不是这种格式则认为是输入普通的字符串。通过 `mixedMode` 为 true 启用这种模式\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | ------------------------------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------ |\n| title | `string` | `'公式编辑器'` | 弹框标题 |\n| header | `string` | - | 编辑器 header 标题，如果不设置，默认使用表单项`label`字段 |\n| evalMode | `boolean` | `true` | 表达式模式 或者 模板模式，模板模式则需要将表达式写在 `${` 和 `}` 中间。 |\n| variables | `{label: string; value: string; children?: any[]; tag?: string}[]` | `[]` | 可用变量 |\n| variableMode | `string` | `list` | 可配置成 `tabs` 或者 `tree` 默认为列表，支持分组。 |\n| functions | `Object[]` | - | 可以不设置，默认就是 amis-formula 里面定义的函数，如果扩充了新的函数则需要指定 |\n| inputMode | `'button' \\| 'input-button' \\| 'input-group'` | - | 控件的展示模式 |\n| icon | `string` | - | 按钮图标，例如`fa fa-list` |\n| btnLabel | `string` | `'公示编辑'` | 按钮文本，`inputMode`为`button`时生效 |\n| level | `'info' \\| 'success' \\| 'warning' \\| 'danger' \\| 'link' \\| 'primary' \\| 'dark' \\| 'light'` | `default` | 按钮样式 |\n| allowInput | `boolean` | - | 输入框是否可输入 |\n| btnSize | `'xs' \\| 'sm' \\| 'md' \\| 'lg'` | - | 按钮大小 |\n| borderMode | `'full' \\| 'half' \\| 'none'` | - | 输入框边框模式 |\n| placeholder | `string` | `'暂无数据'` | 输入框占位符 |\n| className | `string` | - | 控件外层 CSS 样式类名 |\n| variableClassName | `string` | - | 变量面板 CSS 样式类名 |\n| functionClassName | `string` | - | 函数面板 CSS 样式类名 |\n","path":"/zh-CN/components/form/input-formula"},{"title":"Input-Group 输入框组合","body":"\n**输入框组合选择器** 可用于输入框与其他组件进行组合。\n\n## 基本用法\n\n\n\n## 校验\n\ninput-group 配置校验方法较为特殊，需要配置下面步骤：\n\n1. input-group 上配置任意`name`值\n2. input-group 的 body 内配置的表单项上配置校验规则\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------------------------- | ------ | ---------- |\n| className | `string` | | CSS 类名 |\n| body | Array<> | | 表单项集合 |\n","path":"/zh-CN/components/form/input-group"},{"title":"InputImage 图片","body":"\n图片格式输入，需要实现接收器，提交时将以 url 的方式提交，如果需要以表单方式提交请使用 。\n\n## 基本用法\n\n\n\n默认情况下，选中文件后，就会自动调用 `receiver` 配置里的接口进行上传，比如 node 版本的示例如下：\n\n\n\n这个接口需要返回图片地址，比如下面的格式\n\n\n\n点击表单提交的时候，实际提交的就是这个返回的图片地址，比如上面的例子是 `image`，则会提交\n\n\n\n## 限制文件类型\n\n可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`\n\n\n\n想要限制多个类型，则用逗号分隔，例如：`.jpg,.png`\n\n## 限制文件大小\n\n配置 `limit`，更多属性请参考后面的属性说明。\n\n\n\n## 支持裁剪\n\n\n\n设置裁剪比例等配置，具体细节可以参考。\n\n\n\n默认情况下裁剪结果是 `png` 格式，如果要支持其它格式，请设置 `cropFormat`，比如下面设置为 `jpeg` 格式，同时设置质量为 `0.9`\n\n> 1.4.0 及以上版本\n\n\n\n如果浏览器支持，还能设置为 `image/webp`\n\n## 自动填充\n\n上传成功后，可以通过配置 `autoFill` 将上传接口返回的值填充到某个表单项中：\n\n\n\n上例中，image 组件上传后，接口返回格式例如如下：\n\n\n\n然后 image 上配置：\n\n\n\n这样上传成功后，会把接口中的 `url` 变量，赋值给 `myUrl` 变量，这个里支持表达式，比如在前面加上域名\n\n\n\n### 多选模式\n\n当表单项为多选模式时，不能再直接取选项中的值了，而是通过 `items` 变量来取，通过它可以获取当前选中的选项集合。\n\n\n\n### 其他表单项填充\n\n\n\n### initAutoFill 初始化时自动同步\n\n当表单反显时，可通过`initAutoFill`控制`autoFill`在数据反显时是否执行。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | ------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| receiver | | | 上传文件接口 |\n| accept | `string` | `.jpeg,.jpg,.png,.gif` | 支持的图片类型格式，请配置此属性为图片后缀，例如`.jpg,.png` |\n| maxSize | `number` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`B` |\n| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 |\n| multiple | `boolean` | `false` | 是否多选。 |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| delimiter | `string` | `,` | |\n| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |\n| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |\n| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 |\n| crop | `boolean`或`{\"aspectRatio\":\"\"}` | | 用来设置是否支持裁剪。 |\n| crop.aspectRatio | `number` | | 裁剪比例。浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。。 |\n| crop.rotatable | `boolean` | `false` | 裁剪时是否可旋转 |\n| crop.scalable | `boolean` | `false` | 裁剪时是否可缩放 |\n| crop.viewMode | `number` | `1` | 裁剪时的查看模式，0 是无限制 |\n| cropFormat | `string` | `image/png` | 裁剪文件格式 |\n| cropQuality | `number` | `1` | 裁剪文件格式的质量，用于 jpeg/webp，取值在 0 和 1 之间 |\n| limit | Limit | | 限制图片大小，超出不让上传。 |\n| frameImage | `string` | | 默认占位图地址 |\n| fixedSize | `boolean` | | 是否开启固定尺寸,若开启，需同时设置 fixedSizeClassName |\n| fixedSizeClassName | `string` | | 开启固定尺寸时，根据此值控制展示尺寸。例如`h-30`,即图片框高为 h-30,AMIS 将自动缩放比率设置默认图所占位置的宽度，最终上传图片根据此尺寸对应缩放。 |\n| initAutoFill | `boolean` | `false` | 表单反显时是否执行 autoFill |\n| dropCrop | `boolean` | `true` | 图片上传后是否进入裁剪模式 |\n| initCrop | `boolean` | `false` | 图片选择器初始化后是否立即进入裁剪模式 |\n\n### Limit 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| width | `number` | | 限制图片宽度。 |\n| height | `number` | | 限制图片高度。 |\n| minWidth | `number` | | 限制图片最小宽度。 |\n| minHeight | `number` | | 限制图片最小高度。 |\n| maxWidth | `number` | | 限制图片最大宽度。 |\n| maxHeight | `number` | | 限制图片最大高度。 |\n| aspectRatio | `number` | | 限制图片宽高比，格式为浮点型数字，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率，请设置空字符串。 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`file`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |\n| change | `[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 上传文件值变化时触发(上传失败同样会触发) |\n| remove | `item: FileValue` 被移除的文件<br/>`[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 移除文件时触发 |\n| success | `item: FileValue` 远程上传请求成功后返回的结果数据<br />`id: string` id<br />`[name]: FileValue` 组件的值 | 上传成功时触发 |\n| fail | `item: FileValue` 上传的文件 <br /> `error: object` 远程上传请求失败后返回的错误信息<br/>`[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 上传文件失败时触发 |\n\n### FileValue 属性表\n\n| 属性名 | 类型 | 说明 |\n| ------ | -------- | -------------------------------------------------- |\n| name | `string` | 图片名称 |\n| value | `string` | 上传成功后返回的 url |\n| state | `string` | 文件当前状态,值可为 `pending` `uploaded` `invalid` |\n| error | `string` | 错误信息 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------- | ---- |\n| clear | - | 清空 |\n","path":"/zh-CN/components/form/input-image"},{"title":"InputKV 键值对","body":"\n## 基本用法\n\n`input-kv` 是用来支持对象形式的数据编辑，比如类似这样的数据：\n\n\n\n`css` 中的 key 是不确定的，没法用 combo 来实现，这时可以使用 `input-kv`\n\n\n\n最终发送的数据将会是\n\n## 自定义 value 的格式\n\nkey 只能是字符串，因此输入格式是 `input-text`，但 value 格式可通过 `valueType` 自定义。\n\n\n\n## 自定义 value 的默认值\n\n通过 `defaultValue` 设置默认值\n\n\n\n## 关闭可拖拽排序\n\n\n\n## 自定义提示信息\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------- | -------------- | ------------------ |\n| valueType | `type` | `\"input-text\"` | 值类型 |\n| keyPlaceholder | `string` | | key 的提示信息的 |\n| valuePlaceholder | `string` | | value 的提示信息的 |\n| draggable | `boolean` | true | 是否可拖拽排序 |\n| defaultValue | | `''` | 默认值 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------------------------------------ | ---------------- |\n| add | `[name]: string \\| string[]` 组件的值 | 添加组合项时触发 |\n| delete | `key: number` 移除项的索引<br />`item: string` 移除项<br />`[name]: object` 组件的值 | 删除组合项时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: object` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/input-kv"},{"title":"InputKVS 键值对象","body":"\n> 2.1.0 及以上版本\n\n这个组件的功能和 `input-kv` 类似，`input-kv` 的 value 值只支持一个对象，`input-kvs` 的最大不同就是 value 支持对象和数组，可以用来支持深层结构编辑\n\n## 基本用法\n\n\n\n其中 `keyItem` 可以用来修改 key 值控件，比如可以改成下拉框\n\n\n\n而 `valueItems` 是用来控制值的控件，这里的配置和 combo 的 items 一样，唯一限制是不允许有 `\"name\": \"_key\"` 值的情况，因为这个值被当成对象 key 了。\n\n## 水平模式\n\n通过 `\"mode\": \"horizontal\"` 设置，需要分别在 `keyItem` 和 `valueItems` 里设置\n\n\n\n## 嵌套的场景\n\n`valueItems` 可以进一步嵌套，比如里面又嵌一个 `input-kvs` 实现深层结构编辑\n\n\n\n前面的嵌套会多一个层级，如果想去掉这个层级 `column`，可以将 `\"name\": \"column\"` 改成 `\"name\": \"_value\"`，这时值就会直接放入\n\n\n\n除了前面的对象，值也可以是数组，需要配置一下 `valueIsArray`\n\n\n","path":"/zh-CN/components/form/input-kvs"},{"title":"InputMonthRange 月份范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ----------- | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-DD` | |\n| placeholder | `string` | `\"请选择月份范围\"` | 占位文本 |\n| minDate | `string` | | 限制最小日期，用法同 |\n| maxDate | `string` | | 限制最大日期，用法同 |\n| minDuration | `string` | | 限制最小跨度，如： 2days |\n| maxDuration | `string` | | 限制最大跨度，如：1year |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，依赖格式`format`，例如 '1646064000,1651334399' |\n","path":"/zh-CN/components/form/input-month-range"},{"title":"InputMonth 月份","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中月份，可以看到默认显示月份的格式是像`01`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`01月`这样的格式，查找 moment 文档可知配置格式应为 `MM月`，即：\n\n\n\n调整月份，观察显示格式\n\n## 值格式\n\n选中任意月份，可以看到默认表单项的值格式是像`1582992000`这样的时间戳格式。\n\n\n\n如果你想要其他格式的月份值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`01`这样的格式，查找 moment 文档可知配置格式应为 `MM`，即：\n\n\n\n调整月份，观察数据域中表单项值的变化\n\n## 默认值\n\n可以设置`value`属性，设置月份选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1month\"`，默认就会选中一个月后。\n\n支持的相对值关键字有：\n\n- `now`: 当前时间\n- `hour`或`hours`: 时\n- `minute`或`minutes`: 分\n- `second`或`seconds`: 秒\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | -------------- | ----------------------------------------------------------------------------------- |\n| value | `string` | | |\n| format | `string` | `X` | 月份选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `YYYY-MM` | 月份选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| placeholder | `string` | `\"请选择月份\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1646064000' |\n","path":"/zh-CN/components/form/input-month"},{"title":"InputNumber 数字输入框","body":"\n## 基本用法\n\n\n\n## 设置精度\n\n`precision` 设置数字的显示精度，一般需要配合`step`属性使用，以实现细粒度调整。注意带有单位的输入不支持配置精度属性。若设置了`step`值，则会基于`step` 和`precision`的值，选择更高的精度。若输入的内容不满足精度要求，组件会按照精度自动处理，遵循四舍五入规则。\n\n\n\n## 重置值\n\n清空/重置组件输入后，组件绑定的值将被设置为`resetValue`，默认为`\"\"`。若`resetValue`为合法数字时，会根据`min`、`max`和`precision`属性，将组件值设置为满足条件的值。若`resetValue`为非数字，则组件清空/重置后设置为该值。\n\n\n\n## 前后缀、千分分隔\n\n\n\n## 带单位数字\n\n> 1.4.0 及以上版本\n\n可以通过 `unitOptions` 设置数字的单位选项，和前面的前后缀不同，它的输出结果也将会是字符串，包含单位，默认取选项的第一个。\n\n\n\n## 加强版输入框\n\n\n\n## 是否是大数\n\n> 2.3.0 及以上版本\n\n默认情况下使用 JavaScript 原生数字类型，但如果要支持输入超过 JavaScript 支持范围的整数或浮点数，可以通过 `\"big\": true` 开启大数支持，开启之后输入输出都将是字符串\n\n\n\n## 原生数字组件\n\n原生数字组件将直接使用浏览器的实现，最终展现效果和浏览器有关，而且只支持 `min`、`max`、`step` 这几个属性设置。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------------------------------- | ------ | ------------------------------------------ |\n| min | | | 最小值 |\n| max | | | 最大值 |\n| step | `number` | | 步长 |\n| precision | `number` | | 精度，即小数点后几位，支持 0 和正整数 |\n| showSteps | `boolean` | | 是否显示上下点击按钮 |\n| prefix | `string` | | 前缀 |\n| suffix | `string` | | 后缀 |\n| kilobitSeparator | `boolean` | | 千分分隔 |\n| keyboard | `boolean` | | 键盘事件（方向上下） |\n| big | `boolean` | | 是否使用大数 |\n| displayMode | `string` | | 样式类型 |\n| resetValue | `any` | `\"\"` | 清空输入内容时，组件值将设置为`resetValue` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ---------------- |\n| change | `[name]: number` 组件的值 | 输入值变化时触发 |\n| blur | `[name]: number` 组件的值 | - |\n| focus | `[name]: number` 组件的值 | - |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: number` 更新的数值 | 更新数据 |\n","path":"/zh-CN/components/form/input-number"},{"title":"InputPassword 密码输入框","body":"\n## 基本用法\n\n\n\n## 配置密码显/隐藏\n\n`revealPassword`属性可以设置是否展示密码显/隐按钮，默认为`true`。\n\n\n\n## 属性表\n\n请参考\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | --------- | ------ | --------------------- |\n| revealPassword | `boolean` | `true` | 是否展示密码显/隐按钮 |\n\n## 事件表\n\n请参考\n\n## 动作表\n\n请参考\n","path":"/zh-CN/components/form/input-password"},{"title":"InputQuarterRange 季度范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ----------- | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-DD` | |\n| placeholder | `string` | `\"请选择季度范围\"` | 占位文本 |\n| minDate | `string` | | 限制最小日期，用法同 |\n| maxDate | `string` | | 限制最大日期，用法同 |\n| minDuration | `string` | | 限制最小跨度，如： 2quarter |\n| maxDuration | `string` | | 限制最大跨度，如：4quarter |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，依赖格式`format`，例如 '1640966400,1664553600' |\n","path":"/zh-CN/components/form/input-quarter-range"},{"title":"InputQuarter 季度","body":"\n## 基本用法\n\n\n\n更多用法和配置可以参考 ，quarter 就是 date 的特定配置，所以 date 的所有配置都能使用。\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1640966400' |\n","path":"/zh-CN/components/form/input-quarter"},{"title":"InputRange 滑块","body":"\n可以用于选择单个数值或数值范围。\n\n## 基本用法\n\n默认是单个数值，结果是个整数。\n\n\n\n## 选择范围\n\n对于范围的渲染，结果将是个字符串，两个数值通过分隔符来隔开。\n\n\n\n## 控制调整的粒度\n\n使用 `step` 可以控制调整粒度，默认是 1。\n\n\n\n## 禁用\n\n使用`disabled`禁用滑块。\n\n\n\n## 显示步长\n\n开启`showSteps`可显示每个`step`长度\n\n\n\n## 分割块数\n\n通过`parts`可对整个滑动条平均分为`parts`块。\n\n\n\n## 刻度标记\n\n通过`marks`可对刻度进行自定义。\n\n\n\n## 输入框\n\n通过开启`showInput`会展示输入框，输入框数据于滑块数据同步。\n\n\n\n\n\n## 清除输入\n\n在打开`showInput`输入框的前提下，开启`clearable`可对数据进行清除。\n\n\n\n## 显示标签\n\n标签默认在 hover 和拖拽过程中展示，通过`tooltipVisible`或者`tipFormatter`可指定标签是否展示。标签默认展示在滑块上方，通过`tooltipPlacement`可指定标签展示的位置。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | | css 类名 |\n| value | `number` or `string` or `{min: number, max: number}` or `[number, number]` | | |\n| min | `number` | `0` | 最小值 |\n| max | `number` | `100` | 最大值 |\n| disabled | `boolean` | `false` | 是否禁用 |\n| step | `number` | `1` | 步长 |\n| showSteps | `boolean` | `false` | 是否显示步长 |\n| parts | `number` or `number[]` | `1` | 分割的块数<br/>主持数组传入分块的节点 |\n| marks | <code>{ [number &#124; string]: ReactNode }</code> or <code>{ [number &#124; string]: { style: CSSProperties, label: ReactNode } }</code> | | 刻度标记<br/>- 支持自定义样式<br/>- 设置百分比 |\n| tooltipVisible | `boolean` | `false` | 是否显示滑块标签 |\n| tooltipPlacement | `auto` or `bottom` or `left` or `right` | `top` | 滑块标签的位置，默认`auto`，方向自适应<br/>前置条件：tooltipVisible 不为 false 时有效 |\n| tipFormatter | `function` | | 控制滑块标签显隐函数<br/>前置条件：tooltipVisible 不为 false 时有效 |\n| multiple | `boolean` | `false` | 支持选择范围 |\n| joinValues | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交<br/>前置条件：开启`multiple`时有效 |\n| delimiter | `string` | `,` | 分隔符 |\n| unit | `string` | | 单位 |\n| clearable | `boolean` | `false` | 是否可清除<br/>前置条件：开启`showInput`时有效 |\n| showInput | `boolean` | `false` | 是否显示输入框 |\n| onChange | `function` | | 当 组件 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 |\n| onAfterChange | `function` | | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ---------------------------------------------------------------- | ------------------------------------------------- |\n| change | `[name]: number \\| string \\|{min: number, max: number}` 组件的值 | 当值变化时触发的事件 |\n| blur | `[name]: number \\| string \\|{min: number, max: number}` 组件的值 | 当设置 showInput 为 true 时，输入框失去焦点时触发 |\n| focus | `[name]: number \\| string \\|{min: number, max: number}` 组件的值 | 当设置 showInput 为 true 时，输入框获取焦点时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------------------------------------------- | ---------------------------------------------------------- |\n| clear | - | 清除输入框<br />前置条件：showInput 和 clearable 都为 true |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: number \\| string \\| {min: number, max: number}` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/input-range"},{"title":"InputRating 评分","body":"\n## 基本用法\n\n默认颜色\n\n\n\n自定义颜色。支持各种颜色形式，如 CSS 预定义颜色，十六进制颜色，RGB 颜色，HSL 颜色。\n\n\n\n## 半星\n\n\n\n## 带有文字\n\n\n\n## 自定义字符\n\n\n\n## 只读\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ------------------- | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |\n| value | `number` | - | 当前值 |\n| half | `boolean` | `false` | 是否使用半星选择 |\n| count | `number` | `5` | 总星数 |\n| readOnly | `boolean` | `false` | 只读 |\n| allowClear | `boolean` | `true` | 是否允许再次点击后清除 |\n| colors | `string` / `object` | `{'2': '#abadb1', '3': '#787b81', '5': '#ffa900' }` | 星星被选中的颜色。 若传入字符串，则只有一种颜色。若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名 |\n| inactiveColor | `string` | `#e7e7e8` | 未被选中的星星的颜色 |\n| texts | `object` | - | 星星被选中时的提示文字。可自定义分段，键名为分段的界限值，键值为对应的类名 |\n| textPosition | `right` / `left` | `right` | 文字的位置 |\n| char | `string` | `★` | 自定义字符 |\n| className | `string` | - | 自定义样式类名 |\n| charClassName | `string` | - | 自定义字符类名 |\n| textClassName | `string` | - | 自定义文字类名 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------- |\n| change | `[name]: number` 组件的值 | 分值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: number` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/input-rating"},{"title":"InputRepeat 重复频率选择器","body":"\n## 基本用法\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ----------------------------- | ------------------------------------------------------------------------ |\n| options | `string` | `hourly,daily,weekly,monthly` | 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly` |\n| placeholder | `string` | `不重复` | 当不指定值时的说明。 |\n","path":"/zh-CN/components/form/input-repeat"},{"title":"InputRichText 富文本编辑器","body":"\n目前富文本编辑器基于两个库：，默认使用 tinymce。\n\n## 基本用法\n\n\n\n## 图片上传\n\n通过设置 `receiver` 来支持文件上传，如果是 tinymce，它会将图片放在 `file` 字段中\n\n> 1.6.1 及以上版本可以通过 fileField 字段修改\n\n它的返回值类似如下：\n\n\n\n也可以是\n\n\n\n下面是个示例，但不会真正上传，每次都返回同一张图片\n\n\n\n## tinymce 自定义配置\n\n可以设置 options 属性来自定义编辑器的展现，详细配置项请参考。\n\n> amis 2.1.0 版本升级到了 tinymce 6，导致 plugins 的写法有变化\n\n注意在下面的编辑器里修改 JSON 配置后不会实时生效。\n\n\n\n## 关于 tinymce 粘贴 word 的问题\n\n因为 amis 中使用的是开源版本 tinymce，没有商业版本功能，导致比如从 Word 中粘贴表格会看不到边框，解决方法是自己\n\n\n\n比如下面的示例\n\n\n\n但最终页面渲染的时候，这个 class 没有了，得改成 table\n\n\n\n## 使用 froala 编辑器\n\n只需要加一行 `\"vendor\": \"froala\"` 配置就行，froala 是付费产品，需要设置 才能去掉水印。\n\n\n\n### froala buttons 配置项\n\nfroala 可以通过设置 buttons 参数来控制显示哪些按钮，默认是这些：\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| saveAsUbb | `boolean` | | 是否保存为 ubb 格式 |\n| receiver | | | 默认的图片保存 API |\n| videoReceiver | | | 默认的视频保存 API |\n| fileField | string | | 上传文件时的字段名 |\n| size | `string` | | 框的大小，可设置为 `md` 或者 `lg` |\n| options | `object` | | 需要参考 的文档 |\n| buttons | `Array<string>` | | froala 专用，配置显示的按钮，tinymce 可以通过前面的 options 设置 字符串 |\n","path":"/zh-CN/components/form/input-rich-text"},{"title":"InputSubForm 子表单","body":"\n## 基本用法\n\n\n\n## 多选模式\n\n可以配置`\"multiple\": true`，实现多选模式\n\n\n\n## 设置按钮名称\n\n\n\n## 支持拖拽\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | --------------- | -------- | ------------------------------------------------------ |\n| multiple | `boolean` | `false` | 是否为多选模式 |\n| labelField | `string` | | 当值中存在这个字段，则按钮名称将使用此字段的值来展示。 |\n| btnLabel | `string` | `\"设置\"` | 按钮默认名称 |\n| minLength | `number` | `0` | 限制最小个数。 |\n| maxLength | `number` | `0` | 限制最大个数。 |\n| draggable | `boolean` | | 是否可拖拽排序 |\n| addable | `boolean` | | 是否可新增 |\n| removable | `boolean` | | 是否可删除 |\n| addButtonClassName | `string` | `` | 新增按钮 CSS 类名 |\n| itemClassName | `string` | `` | 值元素 CSS 类名 |\n| itemsClassName | `string` | `` | 值包裹元素 CSS 类名 |\n| form | |\n| addButtonText | `string` | `` | 自定义新增一项的文本 |\n| showErrorMsg | `boolean` | `true` | 是否在左下角显示报错信息 |\n","path":"/zh-CN/components/form/input-sub-form"},{"title":"InputTable 表格","body":"\n## 基本用法\n\n可以用来展示数组类型的数据。配置`columns` 数组，来定义列信息。\n\n\n\n我们为表单数据域设置了`table`变量，配置`table`表单项可以展示该数据\n\n## 显示序号\n\n\n\n## 可新增行\n\n可以配置`addable`和`editable`指定可以新增且编辑行数据\n\n\n\n## 可复制新增行\n\n> 1.4.0 及以上版本\n\n还能通过 `copyable` 来增加一个复制按钮来复制当前行\n\n\n\n## 配置按钮为文字\n\n可以通过对应的 `BtnLabel` 及 `BtnIcon` 来改成显示文字而不是图标\n\n\n\n## 按钮触发新增行\n\n按钮上配置`\"actionType\": \"add\"`和`target`指定表格`name`，可以实现点击按钮添加一行的效果。\n\n\n\n当表格上配置了`addApi`时，会请求该 `api`，并将返回数据添加到目标表格。\n\n另外还可以配置`payload`，直接将数据添加到目标表格。\n\n\n\n## 可编辑内容\n\n> 这是 1.2.3 新增的合并写法，1.2.2 之前请用后面提到的 quickEdit\n\n每一列的都可以通过 type 来将其改造成可编辑的列，比如下面的例子（建议配合 `\"needConfirm\": false` 来改成非确认模式）\n\n\n\n除了上面的例子，还可以在列上配置`quickEdit`实现编辑配置，实现展现和编辑分离，更多配置参考 \n\n\n\n## 显示分页\n\n\n\n## 可拖拽\n\n配置`\"draggable\": true`，实现可拖拽调整顺序\n\n\n\n## 非确认模式\n\n配置`\"needConfirm\": false`，不需要确认，那么就是一直就是处于编辑形态。\n\n\n\n## 获取父级数据\n\n默认情况下，Table 内表达项无法获取父级数据域的数据，如下，我们添加 Table 表单项时，尽管 Table 内的文本框的`name`与父级数据域中的`super_text`变量同名，但是没有自动映射值。\n\n\n\n可以配置`\"canAccessSuperData\": true` 同时配置 `\"strictMode\": false` 开启此特性，如下，配置了该配置项后，添加 Table 的`text`表单项会初始会自动映射父级数据域的同名变量。需要注意的是，这里只会初始会映射，一旦修改过就是当前行数据为主了。也就是说，表单项类型的，只会起到初始值的作用。如果为非表单项则会同步更新，比如这个例子的第二列。同时非表单项字段可以用在表单项字段中做联动。\n\n\n\n## 高亮行\n\n> 1.8.0 及以上版本\n\n通过 `rowClassNameExpr` 来添加类，比如下面的例子中，如果输入的内容是 `a` 则背景色为绿色`\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------------- | ------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"table\"` | 指定为 Table 渲染器 |\n| addable | `boolean` | `false` | 是否可增加一行 |\n| editable | `boolean` | `false` | 是否可编辑 |\n| removable | `boolean` | `false` | 是否可删除 |\n| showAddBtn | `boolean` | `true` | 是否显示添加按钮 |\n| addApi | | - | 新增时提交的 API |\n| updateApi | | - | 修改时提交的 API |\n| deleteApi | | - | 删除时提交的 API |\n| addBtnLabel | `string` | | 增加按钮名称 |\n| addBtnIcon | `string` | `\"plus\"` | 增加按钮图标 |\n| copyBtnLabel | `string` | | 复制按钮文字 |\n| copyBtnIcon | `string` | `\"copy\"` | 复制按钮图标 |\n| editBtnLabel | `string` | `\"\"` | 编辑按钮名称 |\n| editBtnIcon | `string` | `\"pencil\"` | 编辑按钮图标 |\n| deleteBtnLabel | `string` | `\"\"` | 删除按钮名称 |\n| deleteBtnIcon | `string` | `\"minus\"` | 删除按钮图标 |\n| confirmBtnLabel | `string` | `\"\"` | 确认编辑按钮名称 |\n| confirmBtnIcon | `string` | `\"check\"` | 确认编辑按钮图标 |\n| cancelBtnLabel | `string` | `\"\"` | 取消编辑按钮名称 |\n| cancelBtnIcon | `string` | `\"times\"` | 取消编辑按钮图标 |\n| needConfirm | `boolean` | `true` | 是否需要确认操作，，可用来控控制表格的操作交互 |\n| canAccessSuperData | `boolean` | `false` | 是否可以访问父级数据，也就是表单中的同级数据，通常需要跟 strictMode 搭配使用 |\n| strictMode | `boolean` | `true` | 为了性能，默认其他表单项项值变化不会让当前表格更新，有时候为了同步获取其他表单项字段，需要开启这个。 |\n| columns | `array` | [] | 列信息 |\n| columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 |\n| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |\n","path":"/zh-CN/components/form/input-table"},{"title":"InputTag 标签选择器","body":"\n## 基本使用\n\n\n\n## 限制标签最大展示数量\n\n> 1.10.0 及以上版本\n\n`maxTagCount`可以限制标签的最大展示数量，超出数量的部分会收纳到 Popover 中，可以通过`overflowTagPopover`配置 Popover 相关的，注意该属性仅在多选模式开启后生效。\n\n\n\n## 批量输入\n\n> 2.0.0 及以上版本\n\n可以设置`\"enableBatchAdd\": true`开启批量输入模式，默认的分隔符为`\"-\"`，可以使用`\"separator\"`属性自定义分隔符，注意避免和`\"delimiter\"`属性冲突。\n\n\n\n## 数量&文本长度限制\n\n> 2.0.0 及以上版本\n\n可以设置`max`限制输入的标签数量，设置`maxTagLength`限制单个标签的最大文本长度。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | ----------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| optionsTip | `Array<object>`或`Array<string>` | `\"最近您使用的标签\"` | 选项提示 |\n| source | `string`或 |\n| delimiter | `string` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 |\n| resetValue | `string` | `\"\"` | 删除后设置此配置项给定的值。 |\n| max | `number` | | 允许添加的标签的最大数量 |\n| maxTagLength | `number` | | 单个标签的最大文本长度 |\n| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |\n| overflowTagPopover | `TooltipObject` | `{\"placement\": \"top\", \"trigger\": \"hover\", \"showArrow\": false, \"offset\": |\n| enableBatchAdd | `boolean` | `false` | 是否开启批量添加模式 |\n| separator | `string` | `\"-\"` | 开启批量添加后，输入多个标签的分隔符，支持传入多个符号，默认为\"-\" |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------- | -------------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n| blur | `[name]: string` 组件的值<br/>`items: object` \\| `object[]` 所有选项 | 输入框失去焦点时触发 |\n| focus | `[name]: string` 组件的值<br/>`items: object` \\| `object[]` 所有选项 | 输入框获取焦点时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据，多个值用`,`分隔 |\n","path":"/zh-CN/components/form/input-tag"},{"title":"InputText 输入框","body":"\n## 基本使用\n\n\n\n## 不同边框风格\n\n\n\n## 不同类型\n\n配置`type`可以支持不同格式的文本输入框\n\n\n\n## 附加组件\n\n可以配置`addOn`，附带附加组件，比如 button，还能设置 icon。\n\n\n\n## 可清除\n\n通过 `\"clearable\": true` 可以设置文本可清除\n\n\n\n## 选择器模式\n\n配置`options`即可支持选择器模式。\n\n\n\n选择器模式下，支持部分选择器组件支持的配置项，具体请查看下面的属性表。如：source 和 autoComplete 都支持\n\n## 限制只能选择预设\n\n配置 options 并且配置 creatable: false\n\n\n\n## 多选模式\n\n配置 multiple: true\n\n\n\n## 前缀和后缀\n\n`prefix` 和 `suffix` 属性支持数据映射。\n\n\n\n## 显示计数器\n\n配置`\"showCounter\": true`后输入框将显示计数器，一般会配合`maxLength`属性以限制输入长度，如果不设置`maxLength`，则仅展示计数器，并不会限制用户的输入长度。\n\n\n\n## 自动转换值\n\n可以配置 transform，来自动转换值，支持转小写或大写。\n\n> 注意下面第一个示例，只有输入的内容才会触发 transform，下拉框选中的值是不会处理的。\n\n\n\n## 文本内容为空时去掉这个值\n\n> 2.4.0 及以上版本\n\n如果设置了 `\"clearValueOnEmpty\": true`，当输入框的值清空时，提交的表单项里就不会有这个值\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| autoComplete | `string`或 |\n| multiple | `boolean` | | |\n| delimiter | `string` | `,` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| addOn | `addOn` | | 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。 |\n| addOn.type | `string` | | 请选择 `text` 、`button` 或者 `submit`。 |\n| addOn.label | `string` | | 文字说明 |\n| addOn.position | `'left' \\| 'right'` | `'right'` | addOn 位置 |\n| addOn.xxx | `string` | | 其他参数请参考按钮文档 |\n| trimContents | `boolean` | | 是否去除首尾空白文本。 |\n| clearValueOnEmpty | `boolean` | | 文本内容为空时去掉这个值 |\n| creatable | `boolean` | | 是否可以创建，默认为可以，除非设置为 false 即只能选择选项中的值 |\n| clearable | `boolean` | | 是否可清除 |\n| resetValue | `string` | `\"\"` | 清除后设置此配置项给定的值。 |\n| prefix | `string` | `\"\"` | 前缀 |\n| suffix | `string` | `\"\"` | 后缀 |\n| showCounter | `boolean` | | 是否显示计数器 |\n| minLength | `number` | | 限制最小字数 |\n| maxLength | `number` | | 限制最大字数 |\n| transform | `object` | | 自动转换值，可选 `transform: { lowerCase: true, upperCase: true }` |\n| borderMode | `\"full\"\\| \"half\" \\| \"none\"` | `\"full\"` | 输入框边框模式，全边框，还是半边框，或者没边框。 |\n| inputControlClassName | `string` | | control 节点的 CSS 类名 |\n| nativeInputClassName | `string` | | 原生 input 标签的 CSS 类名 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ---------------------------------------------- |\n| click | `[name]: string` 组件的值 | 点击输入框时触发，只针对选择器模式的输入框有效 |\n| enter | `[name]: string` 组件的值 | 回车时触发，只针对选择器模式的输入框有效 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |\n| change | `[name]: string` 组件的值 | 值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | -------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 重置 |\n| focus | - | 获取焦点 |\n| reload | - | 刷新（重新加载），只针对配置了`source`的输入框有效 |\n| setValue | `value: string` 更新的值 | 更新数据，开启`multiple`多选时用`,`分隔 |\n","path":"/zh-CN/components/form/input-text"},{"title":"InputTimeRange 时间范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 显示秒\n\n默认显示的是时和分，要显示秒请参考以下配置\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ----------- | --------- | ------------------ | --------------------------------------------------------------------- | ------- |\n| timeFormat | `string` | `HH:mm` | |\n| format | `string` | `HH:mm` | |\n| inputFormat | `string` | `HH:mm` | |\n| placeholder | `string` | `\"请选择时间范围\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，依赖格式`format`，例如 '1617206400,1743436800' |\n","path":"/zh-CN/components/form/input-time-range"},{"title":"InputTime 时间","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中任意时间，可以看到默认显示时间的格式是像`01:01`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`01时01分`这样的格式，查找 moment 文档可知配置格式应为 `HH时mm分`，即：\n\n\n\n调整时间，观察显示格式\n\n## 值格式\n\n选中任意时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。\n\n\n\n如果你想要其他格式的日期值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`01:11`这样的格式，查找 moment 文档可知配置格式应为 `HH:mm`，即：\n\n\n\n调整时间，观察数据域中表单项值的变化\n\n## 显示秒\n\n默认显示的是时和分，要显示秒请参考以下配置\n\n\n\n## 默认值\n\n可以设置`value`属性，设置日期选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后。\n\n支持的相对值关键字有：\n\n- `now`: 当前时间\n- `hour`或`hours`: 时\n- `minute`或`minutes`: 分\n- `second`或`seconds`: 秒\n\n## 控制输入范围\n\n通过 `timeConstraints` 属性可以控制输入范围\n\n默认值是\n\n\n\n可以只修改其中的部分值，比如下面的示例将分钟每次加减改成了 15，小时的范围限制在 9 到 17\n\n\n\n## 原生时间组件\n\n原生时间组件将直接使用浏览器的实现，最终展现效果和浏览器有关，而且只支持 `min`、`max`、`step` 这几个属性设置。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- |\n| value | `string` | | |\n| timeFormat | `string` | `HH:mm` | 时间选择器值格式，更多格式类型请参考 |\n| format | `string` | `X` | 时间选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `HH:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| placeholder | `string` | `\"请选择时间\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| timeConstraints | `object` | `true` | |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1648746120' |\n","path":"/zh-CN/components/form/input-time"},{"title":"InputTree 树形选择框","body":"\n## 基本使用\n\n配置的`options`中，可以通过`children`字段进行嵌套展示，实现树形选择器\n\n\n\n## 选择器样式\n\n配置`\"type\": \"tree-select\"`可以实现选择器样式\n\n\n\n## 是否显示展开线\n\n> 1.1.6 版本\n\n通过 `showOutline` 来控制是否显示展开线。\n\n\n\n## 选中父节点是否自动选中子节点\n\n> since 1.9.0\n\n`autoCheckChildren`默认为 true，选中父节点会自动选中子节点，可以设置`\"autoCheckChildren\": false`，不自动选中子节点\n\n\n\n## 选中父节点自动选中子节点，数据是否包含父子节点的值\n\n`cascade`默认为 false，子节点禁止反选，值不包含子节点值，配置`\"cascade\": true`，子节点可以反选，值包含父子节点值（1.9.0 之前的版本 cascade 配置为 true 的效果为：选中父节点不默认选中子节点）\n\n\n\n`withChildren`默认为 false，子节点禁止反选，值包含父子节点值，配置`withChildren\": true`，子节点禁止反选，值包含父子节点值\n\n\n\n也可以设置`onlyChildren`，实现只包含子节点的值\n\n\n\n## 只允许选择叶子节点\n\n> 1.10.0 及以上版本\n\n在单选时，可通过 `onlyLeaf` 可以配置只允许选择叶子节点\n\n\n\n## 默认展开\n\n默认是展开所有子节点的，如果不想默认展开，则配置`\"initiallyOpen\": false`\n\n\n\n如果层级较多，也可以配置`unfoldedLevel`指定展开的层级数，默认展开第 1 层\n\n下例中设置`\"unfoldedLevel\": 2`，表示展开第 2 层\n\n\n\n## 可编辑\n\n配置 `creatable`、`removable` 和 `editable` 可以实现树可编辑。\n\n\n\n## 控制哪些项可编辑\n\n配置 `creatable`、`removable` 和 `editable` 可以实现树可编辑，同时如果需要关闭部分节点的编辑权限，可以在节点上配置`creatable`、`removable` 和 `editable`。\n\n`rootCreatable` 可以用来关闭顶层是否可以创建。如果想要控制顶层可编辑，请配置 `hideRoot`，用节点来控制。\n\n\n\n## 控制添加/编辑的表单\n\n配置 `addControls` 可以控制添加时需要填写哪些信息，同样还有 `editControls` 来配置编辑节点的表单\n\n\n\n## 懒加载\n\n> since 1.1.6\n\n需要懒加载的选项请配置 `defer` 为 true，然后配置 `deferApi` 即可完成懒加载。如果不配置 `deferApi` 会使用 `source` 接口。\n`deferApi` 中可以用到当前选项中的任何字段，比如以下这个例子是把 label 传给了 defer 接口\n\n\n\n## 节点路径模式\n\n> since 1.2.4\n\n配置`enableNodePath: true`后, 可以将`value`格式转换成节点路径模式，`pathSeparator`设置路径分隔符，建议将该属性的值和拼接符`delimiter`区分开。节点路径模式下，`value`中所有节点的父节点都会自动加载数据并回显。不同配置属性的节点路径模式`value`如下:\n\n\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------- | -------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| autoComplete | |\n| multiple | `boolean` | `false` | 是否多选 |\n| delimiter | `string` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| iconField | `string` | `\"icon\"` | 图标值字段 |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| creatable | `boolean` | `false` | |\n| addControls | Array< |\n| addApi | |\n| editable | `boolean` | `false` | |\n| editControls | Array< |\n| editApi | |\n| removable | `boolean` | `false` | |\n| deleteApi | |\n| searchable | `boolean` | `false` | 是否可检索，仅在 type 为 `tree-select` 的时候生效 |\n| hideRoot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` |\n| rootLabel | `boolean` | `\"顶级\"` | 当 `hideRoot` 不为 `false` 时有用，用来设置顶级节点的文字。 |\n| showIcon | `boolean` | `true` | 是否显示图标 |\n| showRadio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 |\n| showOutline | `boolean` | `false` | 是否显示树层级展开线 |\n| initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 |\n| unfoldedLevel | `number` | `1` | 设置默认展开的级数，只有`initiallyOpen`不是`true`时生效。 |\n| autoCheckChildren | `boolean` | `true` | 当选中父节点时级联选择子节点。 |\n| cascade | `boolean` | `false` | autoCheckChildren 为 true 时生效；默认行为：子节点禁用，值只包含父节点值；设置为 true 时，子节点可反选，值包含父子节点值。 |\n| withChildren | `boolean` | `false` | cascade 为 false 时生效，选中父节点时，值里面将包含父子节点的值，否则只会保留父节点的值。 |\n| onlyChildren | `boolean` | `false` | autoCheckChildren 为 true 时生效，不受 cascade 影响；onlyChildren 为 true，ui 行为级联选中子节点，子节点可反选，值只包含子节点的值。 |\n| onlyLeaf | `boolean` | `false` | 只允许选择叶子节点 |\n| rootCreatable | `boolean` | `false` | 是否可以创建顶级节点 |\n| rootCreateTip | `string` | `\"添加一级节点\"` | 创建顶级节点的悬浮提示 |\n| minLength | `number` | | 最少选中的节点数 |\n| maxLength | `number` | | 最多选中的节点数 |\n| treeContainerClassName | `string` | | tree 最外层容器类名 |\n| enableNodePath | `boolean` | `false` | 是否开启节点路径模式 |\n| pathSeparator | `string` | `/` | 节点路径的分隔符，`enableNodePath`为`true`时生效 |\n| highlightTxt | `string` | | 标签中需要高亮的字符，支持变量 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ------------ | ----------------------------------------------------------------------------------------------- | ---------------------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n| add | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）<br/>`[name]: object` 新增的节点信息 | 新增节点提交时触发 |\n| edit | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）<br/>`[name]: object` 编辑的节点信息 | 编辑节点提交时触发 |\n| delete | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`）<br/>`[name]: object` 删除的节点信息 | 删除节点提交时触发 |\n| loadFinished | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| expand | openLevel: `number` | 展开指定层级 |\n| collapse | - | 收起 |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n","path":"/zh-CN/components/form/input-tree"},{"title":"InputYearRange 年份范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ----------- | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY` | |\n| placeholder | `string` | `\"请选择年份范围\"` | 占位文本 |\n| minDate | `string` | | 限制最小日期，用法同 |\n| maxDate | `string` | | 限制最大日期，用法同 |\n| minDuration | `string` | | 限制最小跨度，如： 2year |\n| maxDuration | `string` | | 限制最大跨度，如：4year |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，依赖格式`format`，例如 '1648746120,1648760760' |\n","path":"/zh-CN/components/form/input-year-range"},{"title":"Year 年份选择","body":"\n## 基本用法\n\n\n\n更多用法和配置可以参考 ，year 就是 data 的特定配置，所以 data 的所有配置都能使用。\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1617206400' |\n","path":"/zh-CN/components/form/input-year"},{"title":"JSONSchema Editor","body":"\n## 基本用法\n\n> 1.9.0 及以上版本\n\n\n\n## 顶级类型可配置\n\n\n\n## 预设类型\n\n通过设置 definitions 属性可以提供一些默认类型，可以减少类型的定义成本。\n\n\n\n## 开启高级配置\n\n通过 `enableAdvancedSetting` 可以开启高级配置，同时通过 `advancedSettings` 可以定制弹窗中的配置面板。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------------- | ------ | ------------------------------------------------------------------------------------------------ |\n| rootTypeMutable | `boolean` | false | 顶级类型是否可配置 |\n| showRootInfo | `boolean` | false | 是否显示顶级类型信息 |\n| disabledTypes | `Array<string>` | | 用来禁用默认数据类型，默认类型有：string、number、interger、object、number、array、boolean、null |\n| definitions | `object` | | 用来配置预设类型 |\n","path":"/zh-CN/components/form/json-schema-editor"},{"title":"JSONSchema","body":"\n## 基本用法\n\n> 1.10.0 及以上版本\n\n> 此组件还在实验阶段，很多 json-schema 属性没有对应实现，使用前请先确认你要的功能满足了需求\n\n基于 json-schema 定义生成表单输入项。\n\n\n\n## 复杂 case\n\n\n\n## 远程获取 schema\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------------------- | ------ | ---------------- |\n| schema | `object` \\| `string` | | 指定 json-schema |\n","path":"/zh-CN/components/form/json-schema"},{"title":"ListSelect 列表","body":"\nListSelect 一般用来实现选择，可以单选也可以多选，和 Radio/Checkboxs 最大的不同是在展现方面支持带图片。\n\n## 基本用法\n\n\n\n## 选项带图片\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| multiple | `boolean` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n| listClassName | `string` | | 支持配置 list div 的 css 类名。比如: `flex justify-between` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ---------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n","path":"/zh-CN/components/form/list-select"},{"title":"LocationPicker 地理位置","body":"\n用于选择地理位置\n\n## 基本用法\n\n\n\n注意其中的 `ak` 参数只能在 amis 官网示例中使用，请前往申请自己的 `ak`。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ------------ | ------------------------------ |\n| vendor | 'baidu' | 'baidu' | 地图厂商，目前只实现了百度地图 |\n| ak | `string` | 无 | 百度地图的 ak |\n| clearable | `boolean` | false | 输入框是否可清空 |\n| placeholder | `string` | '请选择位置' | 默认提示 |\n| coordinatesType | `string` | 'bd09' | 默为百度坐标，可设置为'gcj02' |\n","path":"/zh-CN/components/form/location-picker"},{"title":"MatrixCheckboxes 矩阵","body":"\n矩阵类型的输入框。\n\n## 基本用法\n\n\n\n## 单选模式\n\n配置`\"multiple\": false`可以设置单选，配置`singleSelectMode`可以设置单选模式\n\n\n\n## 动态选项\n\n可以配置 source 渲染动态选项\n\n\n\n以上面为例，source 接口返回格式如下：\n\n\n\n### column 模式\n\n默认为 column 模式，即每列只能单选某个单元格\n\n\n\n### cell 模式\n\ncell 模式，指全部选项中只能单选某个单元格\n\n\n\n### row 模式\n\nrow 模式，每行只能单选某个单元格\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| columns | `Array<column>` | | 列信息，数组中 `label` 字段是必须给出的 |\n| rows | `Array<row>` | | 行信息， 数组中 `label` 字段是必须给出的 |\n| rowLabel | `string` | | 行标题说明 |\n| source | | | Api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 |\n| multiple | `boolean` | `true` | 是否多选 |\n| singleSelectMode | `string` | `\"column\"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------ | ---------------- |\n| change | `[name]: Array` 组件的值 | 选中值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ----------------------- | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: Array` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/matrix-checkboxes"},{"title":"NestedSelect 级联选择器","body":"\n## 基本用法\n\n\n\n## 动态选项\n\n通过 source 可以从上下文或 api 中获取选项信息，比如\n\n\n\n也可以是 api 地址\n\n\n\n## 只允许选中叶子节点\n\n> 1.8.0 及以上版本，如果是之前版本可以在对应的节点上不设置 value 实现\n\n在单选时，可以通过 `onlyLeaf` 来设置只允许选择叶子节点，即便分支节点有 `value` 也不会被选中。\n\n\n\n在多选时，也可以通过 `onlyLeaf` 并且搭配 `cascade` 来设置只允许选择叶子节点，即便分支节点有 `value` 也不会有选中动作,\n\n\n\n## 选中父节点是否自动选中子节点\n\n默认选中父节点会自动选中子节点，可以设置`\"cascade\": true`，不自动选中子节点\n\n\n\n## 选中父节点，值是否包含子节点\n\n默认选中父节点，是不会带上子节点的值，想要自动带上子节点的值，那么配置`\"withChildren\": true`\n\n\n\n也可以设置`onlyChildren`，实现只包含子节点的值\n\n\n\n## 仅展示选中节点文本信息\n\n设置`hideNodePathLabel: true`，可以隐藏选择框中已选择节点的祖先节点(ancestor)的`labelField`字段值，仅展示当前选中节点的`labelField`字段值。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | ----------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| delimiter | `boolean` | `false` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n| cascade | `boolean` | `false` | 设置 `true`时，当选中父节点时不自动选择子节点。 |\n| withChildren | `boolean` | `false` | 设置 `true`时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 |\n| onlyChildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 |\n| searchable | `boolean` | `false` | 可否搜索 |\n| searchPromptText | `string` | `\"输入内容进行检索\"` | 搜索框占位文本 |\n| noResultsText | `string` | `\"未找到任何结果\"` | 无结果时的文本 |\n| multiple | `boolean` | `false` | 可否多选 |\n| hideNodePathLabel | `boolean` | `false` | 是否隐藏选择框中已选择节点的路径 label 信息 |\n| onlyLeaf | `boolean` | `false` | 只允许选择叶子节点 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据，开启`multiple`时，多个值用`,`分隔 |\n","path":"/zh-CN/components/form/nestedselect"},{"title":"Options 选择器表单项","body":"\n**选择器表单项** 是指那些（例如下拉选择框）具有选择器特性的表单项\n\n它派生自 ，拥有表单项所有的特性。\n\n## 选项组格式\n\n选择器表单项可以通过配置一组选项(`options`)，可以供给用户选择，如下：\n\n\n\n`options`属性配置的对象数组就是`select`选择器组件的选项组。\n\n### 标准格式\n\n\n\n标准的选项格式为对象数组，数组中的每个对象需要两个必备字段：\n\n- `label`：标识当前选项的显示文本，帮助用户选择\n- `value`：标识当前选项的值，用作数据保存和映射\n- `children`：嵌套子选项，只有在 Tree 或 Nested-Select 等支持嵌套功能的组件中才有用\n\n查看下面例子，修改选项你会发现数据域会发发生变化，改数据域中该表单项的值为选中选项的`value`值。\n\n\n\n### 简单格式\n\n也可以配置简单的字符串或数字数组，此时默认`label`和`value`保持一致\n\n\n\n## 静态选项组 options\n\n可以使用静态方式，配置一组选项组：\n\n\n\n## 动态选项组 source\n\n### 通过数据域中变量配置\n\n你也可以配置`source`属性，利用 ，获取当前数据链中的变量\n\n\n\n上例中，我们给 select 组件，配置`\"source\": \"${items}\"`，获取了当前数据域中的`items`变量作为选项组。\n\n### 远程拉取\n\n除了可以通过数据映射获取当前数据域中的变量以外，`source`还支持配置接口，格式为 ，用于动态返回选项组。\n\n\n\n远程拉取接口时，返回的数据结构除了需要满足 以外，用`\"options\"`作为选项组的`key`值，如下\n\n\n\n或者直接返回内容\n\n\n\n## 默认值/自动选中 value\n\n我们知道表单项可以通过配置`value`属性来设置默认值\n\n而选择器表单项如果设置`value`属性，为某一个选项中的`value`值，那么该选择器将自动选中该选项。\n\n### 静态配置\n\n静态配置同表单项默认值配置方式，直接在组件上配置`value`属性。\n\n\n\n上例我们设置默认值为`b`，则会自动匹配到选项`B`并选中。\n\n如果想默认选择第一个，可以直接配置 `selectFirst` 属性。\n\n\n\n### 动态配置\n\n有时候我们想默认选中一个选项，但是`options`又是远程拉取的，无法确定默认值是啥，这时候，**需要在`source`接口中返回`value`，来动态设置默认值**，**接口返回数据结构**如下：\n\n\n\n### 数据格式一致性问题\n\n当使用 `source` 或 `value` 配置默认值的时候，需要保持数据格式的一致性。\n\n如果使用 `source` 或 `value` 配置的默认值与当前表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，可能会导致不一致性的问题，我们看一个例子：\n\n\n\n上例中， `select` 我们配置了`\"multiple\": true`，预期中，我们希望选中 `A` 和 `C` 项时，表单项的数据格式为：`\"a,c\"`，但是我们设置了`\"value\": [\"a\", \"c\"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题：\n\n1. 有可能不会默认选中 `A` 和 `C` 选项；\n2. 当不操作该表单项，直接提交时，预期是：`\"a,c\"`，但提交给后端的数据为：`[\"a\", \"c\"]`，导致了不一致性的问题。\n\n> 通过 `source` 配置默认值同理，不再赘述\n\n因此一定确保默认值与选择器表单项数据格式配置相匹配。\n\n## 多选 multiple\n\n大部分选择器组件默认是单选的，可以配置`\"multiple\": true`支持多选。\n\n\n\n还可以通过 `checkAll` 开启全选。\n\n\n\n默认多选的值格式为逗号拼接 value 值，例如：`1,2,3`，如果需要改变值格式，请阅读下面 配置项。\n\n如果值太多折行可以通过 `valuesNoWrap` 来避免折行。\n\n\n\n## 拼接符 delimiter\n\n多选模式下，默认表单项值为选中的选项的`value`值，用默认拼接符`,`拼接，如下\n\n\n\n默认的拼接符是逗号`,`，但是当你的某个选项中的`value`值内包含`,`这个字符，这样会造成一些预期中的问题\n\n你可以设置`delimiter`属性，自定义拼接符，保证不与你选项中的`value`值冲突\n\n\n\n上例我们`value`中有逗号，与默认拼接符冲突，这时设置`\"delimiter\": \"|\"`，可以看到选择多个选项时，每个选项的`value`属性会用`|`拼接起来，作为表单项的值\n\n## 拼接值 joinValues\n\n当选择器表单项选中某一选项后，当前表单项的值格式默认：\n\n- 单选：选中选项的`value`值\n- 多选：选中所有选项的`value`，用拼接符进行拼接，默认拼接符为`,`\n\n选中下面两个选择器，观察数据域值变化。\n\n\n\n但是你可以通过配置`\"joinValues\": false`，来获取完整的选项对象\n\n### 单选模式\n\n单选模式下，配置`\"joinValues\": false`，该表单项值为选中选项的完整对象值，选中下例中的任意选项，观察数据域变化。\n\n\n\n### 多选模式\n\n多选模式下，配置`\"joinValues\": false`，该表单项值为所有选中项的对象数组\n\n\n\n### 自动选中问题\n\n当你通过`joinValues`调整选择器表单项的数据结构后，设置默认值时，格式也要和设置的数据结构保持一致\n\n例如下面这个例子，当你给`select`设置了`\"joinValues\": false`时，选中 B 选项，则该表单项值为`{\"label\":\"B\",\"value\":\"b\"}`，如果你想要默认选中某一项，则也需要设置`value`为完整的对象：`{\"label\":\"B\",\"value\":\"b\"}`\n\n\n\n## 提取多选值 extractValue\n\n当`\"joinValues\": false`时，默认会将选中的所有选项组成的对象数组，作为表单项的值，如果你想只抽取选项中的 value 值，拼成新的数组，那么可以配置`\"extractValue\": true`\n\n\n\n选中所有选型，你会看到表单项的值为：`[\"a\", \"b\", \"c\"]`。\n\n### 自动选中问题\n\n当你通过`joinValues`和`extractValue`调整选择器表单项的数据结构后，设置默认值时，格式也要和设置的数据结构保持一致\n\n例如下面这个例子，当你给`select`设置了`\"joinValues\": false`和`\"extractValue\": true`时，选中 A、B 选项，则该表单项值为`[\"a\", \"b\"]`，如果你想要默认选中某一项，则也需要设置`value`为同样格式：`[\"a\", \"b\"]`\n\n\n\n## 检索 searchable\n\n可以配置 `\"searchable\": true` 显示前端过滤，适合用于有大量内容的列表。\n\n\n\n## 自动补全 autoComplete\n\n\n\n可以在`autoComplete`配置中，用数据映射，获取变量`term`，为当前输入的关键字。\n\n支持该配置项的组件有：Text、Select、Chained-Select、TreeSelect、Condition-Builder。\n\n## 选项标签字段 labelField\n\n默认渲染选项组，会获取每一项中的`label`变量作为展示文本，如果你的选中项中没有`label`字段，可能会有显示问题\n\n例如下例中，options 中只有`text`和`value`字段而没有 `label` 字段，这时点开下拉框，你会发现选项无法正常显示。\n\n\n\n这种情况下如果你想自定义该字段，则可以设置`labelField`\n\n\n\n> 不推荐使用该方式，建议格式化好选项组数据结构\n\n## 选项值字段 valueField\n\n默认渲染选项组，会获取每一项中的`value`变量作为表单项值，如果你的选中项中没有`value`字段，将会无法选中\n\n例如下例中，options 中只有`label`和`val`字段而没有`value`字段，这时点开下拉框，你会发现选项无法正常选中。\n\n\n\n这种情况下如果你想自定义该字段，则可以设置`valueField`\n\n\n\n> 不推荐使用该方式，建议格式化好选项组数据结构\n\n## 新增选项\n\n部分选择器组件支持在前端进行新增选项的操作。\n\n支持该功能的组件有：CheckBoxes、Select、Tree\n\n### 前端新增 creatable\n\n，可以配置`\"creatable\": true`，支持在前端临时新增选项。\n\n\n\n点开下拉框，会看到选项列表底部有`新增选项`按钮，点击后会显示一个包含简单表单的弹框，点击提交可以新增选项，不同组件交互会有不同。\n\n新增选项表单弹框的默认配置如下：\n\n\n\n- 你可以配置`createBtnLabel`来自定义这个弹框的标题；\n- 你也可以配置`optionLabel`，来替换`\"选项\"`这个字符，如我们配置`\"optionLabel\": \"员工\"`，标题会显示：`新增员工`；\n- 默认表单项的`name`属性为`labelField`所配置的值，默认为`label`\n\n### 自定义新增表单项 addControls\n\n默认只有一个文本框，也就是意味着，默认添加选项后，该选项`label`和`value`是一样的，如果你想自定义该表单中的表单项，你可以通过配置`addControls`属性\n\n\n\n上例中你可以选项标题输入`D`，选项值输入`d`。实现自定义添加选项格式\n\n不过在没配置保存接口时，`addControls`中务必需要有`labelField`和`valueField`所配置的`name`表单项才可以正确保存\n\n> `addControls`属性格式为表单项数组，更多细节参考 。\n\n### 配置新增接口 addApi\n\n默认新增只会暂时把新增的值保存在前端，如果你想前端新增选项后，同时把该选项保存到后端，则可以配置保存接口`addApi`。\n\n\n\n> 配置`addApi`实际上将该配置值设置给该表单的`api`属性。\n>\n> 如果同时配置了`source`和`addApi`，添加选项成功后会重新获取请求`source`接口\n\n### 配置新增弹框其它属性\n\n> 2.2.0 及以上版本\n\n通过 `addDialog` 来控制弹框属性，比如通过 `size` 来调大，其它属性请参考 的属性表\n\n\n\n## 编辑选项\n\n部分选择器组件支持在前端编辑选项\n\n支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem\n\n### 前端编辑 editable\n\n配置`\"editable\": true`，支持在前端编辑选项。\n\n\n\n点开下拉框，会看到每个选项右侧有一个编辑图标，点击后会显示一个编辑选项的弹框，修改后点击提交可以编辑选项标签。不同组件交互会有不同\n\n编辑选项弹框的默认配置如下：\n\n\n\n- 你也可以配置`optionLabel`，来替换`\"选项\"`这个字符，如我们配置`\"optionLabel\": \"员工\"`，标题会显示：`新增员工`；\n- 默认表单项的`name`属性为`labelField`所配置的值，默认为`label`\n\n### 自定义编辑表单项 editControls\n\n默认只能修改当前选项的`label`属性，如果你想要修改其他属性，可以配置`editControls`，自定义编辑表单项\n\n\n\n修改后重新选中该表单项，观察数据域中数据变化。\n\n### 配置编辑接口 editApi\n\n默认编辑只会作用在前端，如果你想前端编辑选项后，同时把该选项保存到后端，则可以配置保存接口`editApi`。\n\n\n\n> 配置`editApi`实际上将该配置值设置给编辑表单的`api`属性。\n>\n> 如果同时配置了`source`和`editApi`，添加选项成功后会重新获取请求`source`接口\n\n### 配置编辑弹框其它属性\n\n> 2.2.0 及以上版本\n\n通过 `editDialog` 来控制弹框属性，比如通过 `size` 来调大，其它属性请参考 的属性表\n\n\n\n## 删除选项\n\n配置 `removable: true` 支持删除选项，支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem\n\n\n\n### 配置删除接口 deleteApi\n\n配置 `deleteApi`使用接口进行删除\n\n\n\n点开下拉框，鼠标悬浮在选项上，可以看到右侧会有删除图标，点击可请求删除接口进行删除\n\n## 自动填充 autoFill\n\n一些选择器组件，支持配置`autoFill`，将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，支持\n\n\n\n上例中我们配置了`\"autoFill\": {\"option.instantValidate\": \"${label}\"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name`为`option.instantValidate`的文本框中。可以额外配置`\"validateOnChange\": true`，实现自动填充后立即校验填充项。\n\n**多选模式**\n\n当表单项为多选模式时，不能再直接取选项中的值了，而是通过 `items` 变量来取，通过它可以获取当前选中的选项集合。\n\n\n\n支持该配置项的有：ButtonGroup、List、NestedSelect、Picker、Radios、Select。\n\n## 控制选项高度\n\n> 1.10.0 及以上版本\n\n下拉框在数据量较大时（超过 100，可以通过 `virtualThreshold` 控制）会自动切换到虚拟渲染模式，如果选项的内容较长会导致内容重叠，这时需要设置 `itemHeight` 来避免。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | 选项组，供用户选择 |\n| source | | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |\n| multiple | `boolean` | `false` | 是否支持多选 |\n| labelField | `boolean` | `\"label\"` | 标识选项中哪个字段是`label`值 |\n| valueField | `boolean` | `\"value\"` | 标识选项中哪个字段是`value`值 |\n| joinValues | `boolean` | `true` | 是否拼接`value`值 |\n| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |\n| itemHeight | `number` | `32` | 每个选项的高度，用于虚拟渲染 |\n| virtualThreshold | `number` | `100` | 在选项数量超过多少时开启虚拟渲染 |\n| valuesNoWrap | `boolean` | `false` | 默认情况下多选所有选项都会显示，通过这个可以最多显示一行，超出的部分变成 ... |\n","path":"/zh-CN/components/form/options"},{"title":"Picker 列表选择器","body":"\n列表选取，在功能上和 Select 类似，但它能显示更复杂的信息。\n\n## 基本用法\n\n默认和 Select 很像，但请看后面的 pickerSchema 设置。\n\n\n\n## 配置 pickerSchema\n\n可以配置 pickerSchema，实现弹框 crud 选择模式，更多 crud 配置可查看 crud 文档，选择之后最终的值通过 `valueField` 来设置。\n\n\n\n## 内嵌模式\n\n可以配置`\"embed\": true`，实现内嵌 picker\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | -------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| multiple | `boolean` | | 是否为多选。 |\n| delimiter | `boolean` | `false` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n| modalMode | `string` | `\"dialog\"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 |\n| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 |\n| embed | `boolean` | `false` | 是否使用内嵌模式 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| --------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------- |\n| change | `[name]: string` 组件的值（多个以逗号分隔)<br/>`selectedItems: object` \\| `object[]`选中项（< 2.3.2 及以下版本 为`option`） | 选中值变化时触发 |\n| itemClick | `item: Option` 所点击的选项 | 选项被点击时触发 |\n","path":"/zh-CN/components/form/picker"},{"title":"Radios 单选框","body":"\n用于实现单选。\n\n## 基本用法\n\n\n\n## 列显示\n\n设置 `inline` 可以纵向显示，用于显示列很多的情况\n\n\n\n## 控制列显示的分裂\n\n通过 columnsCount 来设置列显示的列数，比如下面例子是两列。\n\n\n\n## 默认选择第一个\n\n通过 `selectFirst` 属性配置\n\n\n\n## 动态选项\n\n可以配置 `source` 来从上下文或远程 api 拉取选项数据\n\n\n\n远程 api\n\n\n\napi 返回内容需要包含 options 字段\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |\n| inline | `boolean` | `true` | 是否显示为一行 |\n| selectFirst | `boolean` | `false` | 是否默认选中第一个 |\n| autoFill | `object` | | |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------- | ---------------- |\n| change | `[name]: string` 组件的值<br/>`items: object` \\| `object[]` 选项集合 | 选中值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/radios"},{"title":"Select 选择器","body":"\n## 基本用法\n\n参考 \n\n## 自定义菜单\n\n\n\n### 分组展示模式\n\n_单选_\n\n\n\n_多选_\n\n\n\n### 表格模式\n\n需要额外配置 `columns` 配置，参考 Table 中的说明。\n\n_单选_\n\n\n\n_多选_\n\n\n\n### 树形模式\n\n_单选_\n\n\n\n_多选_\n\n\n\n### 级联选择\n\n按列来点选。\n\n_单选_\n\n\n\n_多选_\n\n\n\n### 支持搜索\n\n\n\n### 延时加载\n\n选型设置 defer: true，结合配置组件层的 `deferApi` 来实现。\n\n\n\n### 关联选择模式\n\n分为左右两部分，左边点选后关联出现右边。左右都可以配置展示模式。\n\n_单选_\n\n\n\n_多选_\n\n\n\nleftOptions 动态加载，默认 source 接口是返回 options 部分，而 leftOptions 是没有对应的接口可以动态返回了。为了方便，目前如果 source 接口返回的选中中，第一个 option 是以下这种格式则也会把 options[0].leftOptions 当成 leftOptions, options[0].children 当 options。同时 options[0].leftDefaultValue 可以用来配置左侧选项的默认值。\n\n\n\n### 人员点选\n\n> 请通过网络面板查看接口请求返回。\n\n实际上就是采用的的 select，注意要看那一部分文档，需要知道怎么动态加载 leftOptions。左侧部分和人员都是通过 source 接口返回。需要懒加载的项通过设置 `defer` 为 true 来标记。左右两部分都支持懒加载。\n都是通过 deferApi 来实现，后端根据传过来的参数决定是懒加载树，还是栏加载人员。\n\n- 有 dep 值则是懒加载部门树\n- 有 ref 值则是懒加载人员\n\n\n\n## 限制标签最大展示数量\n\n> 1.10.0 及以上版本\n\n`maxTagCount`可以限制标签的最大展示数量，超出数量的部分会收纳到 Popover 中，可以通过`overflowTagPopover`配置 Popover 相关的，注意该属性仅在多选模式开启后生效。\n\n\n\n## searchApi\n\n**发送**\n\n默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。\n\n**响应**\n\n格式要求如下：\n\n\n\n适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------ | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| options | `Array<object>`或`Array<string>` | | |\n| source | |\n| autoComplete | |\n| delimiter | `string` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| checkAll | `boolean` | `false` | 是否支持全选 |\n| checkAllLabel | `string` | `全选` | 全选的文字 |\n| checkAllBySearch | `boolean` | `false` | 有检索时只全选检索命中的项 |\n| defaultCheckAll | `boolean` | `false` | 默认是否全选 |\n| creatable | `boolean` | `false` | |\n| multiple | `boolean` | `false` | |\n| searchable | `boolean` | `false` | |\n| createBtnLabel | `string` | `\"新增选项\"` | |\n| addControls | Array< |\n| addApi | |\n| editable | `boolean` | `false` | |\n| editControls | Array< |\n| editApi | |\n| removable | `boolean` | `false` | |\n| deleteApi | |\n| autoFill | `object` | | |\n| menuTpl | `string` | | 支持配置自定义菜单 |\n| clearable | `boolean` | | 单选模式下是否支持清空 |\n| hideSelected | `boolean` | `false` | 隐藏已选选项 |\n| mobileClassName | `string` | | 移动端浮层类名 |\n| selectMode | `string` | `` | 可选：`group`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 |\n| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 |\n| columns | `Array<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |\n| leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |\n| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |\n| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |\n| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |\n| overflowTagPopover | `TooltipObject` | `{\"placement\": \"top\", \"trigger\": \"hover\", \"showArrow\": false, \"offset\": |\n| optionClassName | `string` | | 选项 CSS 类名 |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 |\n| clearable | `boolean` | 是否展示清空图标 ｜ |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------- | -------------------- |\n| change | `[name]: string` 组件的值<br/>`items: Option[]` 选项集合（< 2.3.2 及以下版本 为`options`） | 选中值变化时触发 |\n| blur | `[name]: string` 组件的值<br/>`items: Option[]` 选项集合（< 2.3.2 及以下版本 为`options`） | 输入框失去焦点时触发 |\n| focus | `[name]: string` 组件的值<br/>`items: Option[]` 选项集合（< 2.3.2 及以下版本 为`options`） | 输入框获取焦点时触发 |\n| add | `[name]: Option` 新增的选项<br/>`items: Option[]` 选项集合（< 2.3.2 及以下版本 为`options`） | 新增选项提交时触发 |\n| edit | `[name]: Option` 编辑的选项<br/>`items: Option[]` 选项集合（< 2.3.2 及以下版本 为`options`） | 编辑选项提交时触发 |\n| delete | `[name]: Option` 删除的选项<br/>`items: Option[]` 选项集合（< 2.3.2 及以下版本 为`options`） | 删除选项提交时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n","path":"/zh-CN/components/form/select"},{"title":"Static 静态展示","body":"\n> 推荐在`2.4.0`版本后使用来实现该功能 \n> 常用表单项已支持静态展示： \n> 新版静态展示还可以实现整个表单的静态展示及切换，具体用法请参考\n\n用来在表单中，展示静态数据\n\n## 基本用法\n\n\n\n## 数据域变量映射\n\n除了显式配置`value`属性，来展示数据以外，支持通过配置`name`属性，来自动映射数据域中的相关变量\n\n\n\n## 展示其他组件\n\n支持通过配置`type`为`static-xxx`的形式，展示其他 **非** 组件，例如：\n\n\n\n理论上可以支持所有非表达项的所有组件，并且支持对应的配置项，下面是一些示例：\n\n\n\n想要调整展示组件的配置，请查阅相应组件的文档。\n\n## 快速编辑\n\n通过 `quickEdit` 开启快速编辑功能，比如\n\n\n\n其他配置项参考 \n\n## 弹出框（popOver）\n\n可以通过 `popOver` 属性配置弹出框\n\n\n","path":"/zh-CN/components/form/static"},{"title":"Switch 开关","body":"\n## 基本用法\n\n\n\n## 配置真假值\n\n默认情况：\n\n- 开关打开时，表单项值为：true\n- 开关关闭时，表单项值为：false\n\n\n\n如果你想调整这个值，可以配置`trueValue`和`falseValue`\n\n\n\n调整开关，观察数据域变化，会发现打开后值为`1`，而关闭后为`0`\n\n## 配置开启和关闭状态的文本\n\n> 1.1.5 版本之后支持\n\n\n\n## 默认值\n\n和其它表单项一样，如果要设置默认值，可以使用 value 属性\n\n\n\n## 不同尺寸\n\n> 2.0.0 及以上版本\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------------------------- | ------- | -------------------- |\n| option | `string` | | 选项说明 |\n| onText | `string / IconSchema` | | 开启时开关显示的内容 |\n| offText | `string / IconSchema` | | 关闭时开关显示的内容 |\n| trueValue | `boolean / string / number` | `true` | 标识真值 |\n| falseValue | `boolean / string / number` | `false` | 标识假值 |\n| size | `\"sm\" \\| \"md\"` | `\"md\"` | 开关大小 |\n\nIconSchema 配置\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | --------- | ------------ |\n| type | `string` | | `icon` |\n| icon | `string` | | icon 的类型 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------ | ---------------- |\n| change | `[name]: string \\| boolean` 组件的值 | 开关值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------- | -------- |\n| setValue | `value: string \\| boolean` 更新的数据 | 更新数据 |\n","path":"/zh-CN/components/form/switch"},{"title":"TabsTransferPicker 穿梭选择器","body":"\n在的基础上扩充了弹窗选择模式，展示值用的是简单的 input 框，但是编辑的操作是弹窗个穿梭框来完成。\n\n适合用来做复杂选人组件。\n\n```schema: scope=\"body\"\n{\n \"type\": \"form\",\n \"api\": \"/api/mock2/form/saveForm\",\n \"body\": [\n {\n \"label\": \"选人\",\n \"type\": \"tabs-transfer-picker\",\n \"name\": \"a\",\n \"sortable\": true,\n \"selectMode\": \"tree\",\n \"pickerSize\": \"md\",\n \"menuTpl\": \"<div class='flex justify-between'><span>${label}</span>${email ? `<div class='text-muted m-r-xs text-sm text-right'>${email}<br />${phone}</div>`: ''}</div>\",\n \"valueTpl\": \"${label}(${value})\",\n \"options\": [\n {\n \"label\": \"成员\",\n \"selectMode\": \"tree\",\n \"searchable\": true,\n \"children\": [\n {\n \"label\": \"法师\",\n \"children\": [\n {\n \"label\": \"诸葛亮\",\n \"value\": \"zhugeliang\",\n \"email\": \"zhugeliang@timi.com\",\n \"phone\": 13111111111\n }\n ]\n },\n {\n \"label\": \"战士\",\n \"children\": [\n {\n \"label\": \"曹操\",\n \"value\": \"caocao\",\n \"email\": \"caocao@timi.com\",\n \"phone\": 13111111111\n },\n {\n \"label\": \"钟无艳\",\n \"value\": \"zhongwuyan\",\n \"email\": \"zhongwuyan@timi.com\",\n \"phone\": 13111111111\n }\n ]\n },\n {\n \"label\": \"打野\",\n \"children\": [\n {\n \"label\": \"李白\",\n \"value\": \"libai\",\n \"email\": \"libai@timi.com\",\n \"phone\": 13111111111\n },\n {\n \"label\": \"韩信\",\n \"value\": \"hanxin\",\n \"email\": \"hanxin@timi.com\",\n \"phone\": 13111111111\n },\n {\n \"label\": \"云中君\",\n \"value\": \"yunzhongjun\",\n \"email\": \"yunzhongjun@timi.com\",\n \"phone\": 13111111111\n }\n ]\n }\n ]\n },\n {\n \"label\": \"角色\",\n \"selectMode\": \"list\",\n \"children\": [\n {\n \"label\": \"角色 1\",\n \"value\": \"role1\",\n },\n {\n \"label\": \"角色 2\",\n \"value\": \"role2\",\n },\n {\n \"label\": \"角色 3\",\n \"value\": \"role3\",\n },\n {\n \"label\": \"角色 4\",\n \"value\": \"role4\",\n }\n ]\n },\n {\n \"label\": \"部门\",\n \"selectMode\": \"tree\",\n \"children\": [\n {\n \"label\": \"总部\",\n \"value\": \"dep0\",\n \"children\": [\n {\n \"label\": \"部门 1\",\n \"value\": \"dep1\",\n \"children\": [\n {\n \"label\": \"部门 4\",\n \"value\": \"dep4\",\n },\n {\n \"label\": \"部门 5\",\n \"value\": \"dep5\",\n }\n ]\n },\n {\n \"label\": \"部门 2\",\n \"value\": \"dep2\",\n },\n {\n \"label\": \"部门 3\",\n \"value\": \"dep3\",\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n}\n```\n\n## 属性表\n\n更多配置请参考。\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------- | ------------------------- |\n| change | `[name]: string` 组件的值<br/>`items: object[]` 选项集合 | picker 弹窗确认提交时触发 |\n| focus | `[name]: string` 组件的值 | 获取焦点(非内嵌模式) |\n| blur | `[name]: string` 组件的值 | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n","path":"/zh-CN/components/form/tabs-transfer-picker"},{"title":"TabsTransfer 组合穿梭器","body":"\n在的基础上扩充了左边的展示形式，支持 Tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。\n\n\n\n## 自定义选项展示\n\n\n\n## 数据懒加载\n\n\n\n## 属性表\n\n更多配置请参考。\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | -------------------------------------------------------- | ---------------- |\n| change | `[name]: string` 组件的值<br/>`items: Option[]` 选项集合 | 选中值变化时触发 |\n| tab-change | `key: number` 当前激活的选项卡索引 | 选项卡切换时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| ------------ | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| selectAll | - | 全选 |\n| changeTabKey | `activeKey: number` 选中的 Tab | 修改当前选中 tab，来选择其他选项 |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n","path":"/zh-CN/components/form/tabs-transfer"},{"title":"Textarea 多行文本输入框","body":"\n## 基本使用\n\n\n\n## 清空输入框\n\n带移除图标的输入框，点击图标删除所有内容。\n\n\n\n设置`resetValue`，清空输入框后重置为指定值\n\n\n\n## 显示计数器\n\n配置`\"showCounter\": true`后输入框将显示计数器，一般会配合`maxLength`属性以限制输入长度，如果不设置`maxLength`，则仅展示计数器，并不会限制用户的输入长度。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | --------- | ------- | ---------------------------- |\n| minRows | `number` | `3` | 最小行数 |\n| maxRows | `number` | `20` | 最大行数 |\n| trimContents | `boolean` | `true` | 是否去除首尾空白文本 |\n| readOnly | `boolean` | `false` | 是否只读 |\n| showCounter | `boolean` | `false` | 是否显示计数器 |\n| maxLength | `number` | - | 限制最大字数 |\n| clearable | `boolean` | `false` | 是否可清除 |\n| resetValue | `string` | `\"\"` | 清除后设置此配置项给定的值。 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------- | -------------------- |\n| change | `[name]: string` 组件的值 | 值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |\n| blur | `[name]: string ` 组件的值 | 输入框失去焦点时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| focus | - | 获取焦点 |\n| setValue | `value: string` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/textarea"},{"title":"TransferPicker 穿梭选择器","body":"\n在的基础上扩充了弹窗选择模式，展示值用的是简单的 input 框，但是编辑的操作是弹窗个穿梭框来完成。\n\n\n\n## 自定义选项展示\n\n\n\n## 属性表\n\n更多配置请参考。\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ----------------------------------------------------------------------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | picker 弹窗确认提交时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n","path":"/zh-CN/components/form/transfer-picker"},{"title":"Transfer 穿梭器","body":"\n## 基本用法\n\n\n\n## 展示模式\n\n### 分组\n\n\n\n### 表格模式\n\n\n\n### 树形模式\n\n\n\n### 级联选择\n\n\n\n### 关联选择模式\n\n\n\n`leftOptions` 动态加载，默认 `source` 接口是返回 options 部分，而 `leftOptions` 是没有对应的接口可以动态返回了。为了方便，目前如果 `source` 接口返回的选中中，第一个 option 是以下这种格式则也会把 options[0].leftOptions 当成 `leftOptions`, options[0].children 当 options。同时 options[0].leftDefaultValue 可以用来配置左侧选项的默认值。\n\n\n\n### 延时加载\n\n\n\n### 支持搜索\n\n#### 左侧搜索功能\n\n通过 `searchable` 字段来控制左侧选项栏的搜索功能。\n\n在不设置 `searchApi` 情况下，对输入框内容和对应列表项的 value、label 进行匹配，匹配成功就会左侧面板中显示。\n\n\n\n#### 右侧结果搜索功能\n\n右侧结果搜索是通过`resultSearchable`字段开启，设置该字段为 true 时开启。\n\n开启结果搜索后，目前默认通过 value、label 对输入内容进行模糊匹配。\n\n目前树的延时加载不支持结果搜索功能。\n\n\n\n#### searchApi\n\n设置这个 api，可以实现左侧选项搜索结果的检索。\n\n##### 发送\n\n默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。\n\n##### 响应\n\n格式要求如下：\n\n\n\n适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。\n\n### 结果面板跟随模式\n\n`resultListModeFollowSelect` 开启结果面板跟随模式。\n\n#### 表格跟随模式\n\n\n\n#### 树形跟随模式\n\n\n\n### 自定义选项展示\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------------- | ----------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| delimeter | `string` | `false` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| searchApi | | | 如果想通过接口检索，可以设置这个 api。 |\n| resultListModeFollowSelect | `boolean` | `false` | 结果面板跟随模式，目前只支持`list`、`table`、`tree`（tree 目前只支持非延时加载的`tree`） |\n| statistics | `boolean` | `true` | 是否显示统计数据 |\n| selectTitle | `string` | `\"请选择\"` | 左侧的标题文字 |\n| resultTitle | `string` | `\"当前选择\"` | 右侧结果的标题文字 |\n| sortable | `boolean` | `false` | 结果可以进行拖拽排序（结果列表为树时，不支持排序） |\n| selectMode | `string` | `list` | 可选：`list`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 |\n| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 |\n| searchable | `boolean` | `false` | 左侧列表搜索功能，当设置为  true  时表示可以通过输入部分内容检索出选项项。 |\n| searchPlaceholder | `string` | | 左侧列表搜索框提示 |\n| columns | `Array<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |\n| leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |\n| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |\n| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |\n| resultSearchable | `boolean` | `false` | 结果（右则）列表的检索功能，当设置为 true 时，可以通过输入检索模糊匹配检索内容（目前树的延时加载不支持结果搜索功能） |\n| resultSearchPlaceholder | `string` | | 右侧列表搜索框提示 |\n| menuTpl | `string` \\| | | 用来自定义选项展示 |\n| valueTpl | `string` \\| | | 用来自定义值的展示 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| --------- | ----------------------------------------------------------------------------------------- | ---------------- |\n| change | `[name]: string` 组件的值<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 选中值变化时触发 |\n| selectAll | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 全选时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| --------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| selectAll | - | 全选 |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n","path":"/zh-CN/components/form/transfer"},{"title":"TreeSelect 树形选择器","body":"\n## 基本使用\n\n\n\n## 仅展示选中节点文本信息\n\n设置`hideNodePathLabel: true`，可以隐藏选择框中已选择节点的祖先节点（ancestor）的`labelField`字段值，仅展示当前选中节点的`labelField`字段值。\n\n\n\n## 只允许选择叶子节点\n\n> 1.8.0 及以上版本\n\n在单选时，可通过 `onlyLeaf` 可以配置只允许选择叶子节点\n\n\n\n## 如何让某些节点无法点？\n\n只需要对应的节点没有 value 就行，比如下面例子的目录节点都无法点，只能点文件节点\n\n\n\n## 属性表\n\n更多用法，见 \n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | --------- | ------- | ------------------------------------------- |\n| hideNodePathLabel | `boolean` | `false` | 是否隐藏选择框中已选择节点的路径 label 信息 |\n| onlyLeaf | `boolean` | `false` | 只允许选择叶子节点 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ------------ | ------------------------------------------------------------------------------------------------ | ---------------------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |\n| add | `[name]: object` 新增的节点信息<br/>``items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |\n| edit | `[name]: object` 编辑的节点信息<br/>``items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 编辑节点提交时触发 |\n| delete | `[name]: object` 编辑的节点信息<br/>``items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 编辑节点提交时触发 |\n| loadFinished | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为`resetValue`，若没有配置`resetValue`，则清空 |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n","path":"/zh-CN/components/form/treeselect"},{"title":"UUID 字段","body":"\n## 基本用法\n\n随机生成一个 id，可以用于防止表单重复提交。\n\n\n\n这个字段是不显示的，上面这个例子之所以显示是因为加了 `debug: true`。\n\n## length\n\n目前 uuid 的唯一可设置参数是 length，用于生成短随机数\n\n\n","path":"/zh-CN/components/form/uuid"},{"title":"Grid 2D 布局","body":"\nGrid 2D 是一种二维布局方式，它可以更直观设置组件位置。\n\n> Grid 2D 布局不支持 IE11\n\n## 基本用法\n\n\n\n## 布局基础\n\n`grids` 中可以是任意组件，这里为了简化使用 tpl 组件，通过 x/y/h/w 这四个属性来控制格子的位置和大小。\n\n首先看下图示例，它就是前面基本用法的示例加上标注：\n\n\n\n默认水平方向会平分为 12 列，可以通过 `cols` 来调整，比如只分为 3 栏。\n\n先看 `[grid-1]`，它的 `x/y/h/w` 值分别是 `1,1,1,6`：\n\n- `x,y` 决定这个格子的位置，`1,1` 就是最左上角的位置，如图所示\n- `w` 代表宽度占几格，因为水平方向一共 12 列，所以 6 就意味着占水平空间一半\n- `h` 代表高度占几格，默认每行高度可以使用 `rowHeight` 来控制，也可以设置 `height` 来单独控制这一行的高度\n\n其它格子也可以参照这张图推理出来，比如 `[grid-2]` 起始 x 位置是 `7`，宽度是 6，因此它和 `[grid-]` 平分了第一行。\n\n## 独立设置高宽\n\n在上面的例子中格子的宽度是根据页面宽度平分，高度是固定的，但我们也可以单独改变某一行或某一列的高宽，方法是格子上的 `width` 和 `height` 值。\n\n看下面这个例子\n\n\n\n在这个例子中，首先通过 `cols` 设置了列数为 `3`，然后将 `[grid-1]` 和 `[grid-3]` 的 width 设置为 `100`，使得这两列的宽度都是 100，而页面剩下的宽度就全都留给了 `[grid-2]`。\n\n而在 `[grid-2]` 中通过 `height` 设置了高度，使得这一行高度是 `100px`，而不是默认的 `50px`。\n\n请注意：`width` 将影响一整列，`height` 将影响一整行。\n\n## 自适应内容高度\n\n如果格子内容高度不确定，想更具内容自动撑开，可以设置 `height` 为 `auto`。\n\n\n\n## 格子间距 gap / rowGap\n\n通过 grip 上的 gap 属性来控制间距，默认包含水平和垂直间距\n\n\n\n## 内容区域小于格子的摆放\n\n默认情况下，格子的高宽会撑满对应区域的高宽，但有时候内容高宽比这个格子小，比如一张图片，如何将它在各种中居中显示？\n\n看下面的例子\n\n\n\n在中间的格子中，我们设置了 `\"align\": \"center\"` 和 `\"valign\": \"middle\"`，就使得文字水平和垂直居中显示了。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | --------- | ------------------------------- |\n| type | `string` | `grid-2d` | 指定为 Grid 2D 渲染器 |\n| gridClassName | `string` | | 外层 Dom 的类名 |\n| gap | `int`/`string` | 0 | 格子间距，包括水平和垂直 |\n| cols | `int` | 12 | 格子水平划分为几个区域 |\n| rowHeight | `int` | 50 | 每个格子默认垂直高度 |\n| rowGap | `int`/`string` | | 格子垂直间距 |\n| grids | `Array` | | 格子集合 |\n| grids | | 格子可以是其他渲染器 |\n| grids[x].x | `int` | | 格子起始位置的横坐标 |\n| grids[x].y | `int` | | 格子起始位置的纵坐标 |\n| grids[x].w | `int` | | 格子横跨几个宽度 |\n| grids[x].h | `int` | | 格子横跨几个高度 |\n| grids[x].width | `int`/`string`/`auto` | | 格子所在列的宽度 |\n| grids[x].height | `int`/`string`/`auto` | | 格子所在行的高度，可以设置 auto |\n| grids[x].align | `left`/`center`/`right`/`auto` | `auto` | 格子内容水平布局 |\n| grids[x].valign | `top`/`bottom`/`middle`/`auto` | `auto` | 格子内容垂直布局 |\n","path":"/zh-CN/components/grid-2d"},{"title":"GridNav 宫格导航","body":"\n宫格菜单导航，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`、`Form`或`CRUD`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成菜单展示。\n\n## 基本用法\n\n通过 source 关联上下文数据，或者通过 name 关联。\n\n\n\n也可以静态展示，即不关联数据固定显示。\n\n\n\n## 自定义列数\n\n默认一行展示四个格子，可以通过 `columnNum` 自定义列数\n\n\n\n## 正方形格子\n\n设置 `square` 属性后，格子的高度会和宽度保持一致。\n\n\n\n## 格子间距\n\n通过 `gutter` 属性设置格子之间的距离。\n\n\n\n## 内容横排\n\n将 `direction` 属性设置为 `horizontal`，可以让宫格的内容呈横向排列。\n\n\n\n## 图标占比\n\n设置 `iconRatio` 可以控制图标宽度占比，默认 60%，设置 1-100 的数字。\n\n\n\n## 角标提示\n\n设置 badge 属性后，会在图标右上角展示相应的角标，支持红点、数字、彩带模式。\n\n\n\n## 点击交互\n\n设置 clickAction 属性支持通用点击交互，详见 配置\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | --------------- | ---------- | -------------------------------------------------------- |\n| type | `string` | `grid-nav` | |\n| className | `string` | | 外层 CSS 类名 |\n| itemClassName | `string` | | 列表项 css 类名 |\n| value | `Array<object>` | | 图片数组 |\n| source | `string` | | 数据源 |\n| square | `boolean` | | 是否将列表项固定为正方形 |\n| center | `boolean` | `true` | 是否将列表项内容居中显示 |\n| border | `boolean` | `true` | 是否显示列表项边框 |\n| gutter | `number` | | 列表项之间的间距，默认单位为`px` |\n| reverse | `boolean` | | 是否调换图标和文本的位置 |\n| iconRatio | `number` | 60 | 图标宽度占比，单位% |\n| direction | `string` | `vertical` | 列表项内容排列的方向，可选值为 `horizontal` 、`vertical` |\n| columnNum | `number` | 4 | 列数 |\n| options.icon | `string` | | 列表项图标 |\n| options.text | `string` | | 列表项文案 |\n| options.badge | `BadgeSchema` | | 列表项角标，详见 |\n| options.link | `string` | | 内部页面路径或外部跳转 URL 地址，优先级高于 clickAction |\n| options.blank | `boolean` | | 是否新页面打开，link 为 url 时有效 |\n| options.clickAction | `ActionSchema` | | 列表项点击交互 详见 |\n\n\n","path":"/zh-CN/components/grid-nav"},{"title":"Grid 水平分栏","body":"\n## 基本用法\n\n默认会水平均分宽度\n\n\n\n## 响应式\n\n通过 `md` 设置屏幕中等宽度（768px）情况下的分栏\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------------- | -------------------------------------------------- | -------- | -------------------- |\n| type | `string` | `\"grid\"` | 指定为 Grid 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| gap | `'xs' \\| 'sm' \\| 'base' \\| 'none' \\| 'md' \\| 'lg'` | | 水平间距 |\n| valign | `'top' \\| 'middle' \\| 'bottom' \\| 'between'` | | 垂直对齐方式 |\n| align | `'left' \\| 'right' \\| 'between' \\| 'center'` | | 水平对齐方式 |\n| columns | `Array` | | 列集合 |\n| columns | | 成员可以是其他渲染器 |\n| columns[x].xs | `int` or \"auto\" | | 宽度占比： 1 - 12 |\n| columns[x].columnClassName | | | 列类名 |\n| columns[x].sm | `int` or \"auto\" | | 宽度占比： 1 - 12 |\n| columns[x].md | `int` or \"auto\" | | 宽度占比： 1 - 12 |\n| columns[x].lg | `int` or \"auto\" | | 宽度占比： 1 - 12 |\n| columns[x].valign | `'top' \\| 'middle' \\| 'bottom' \\| 'between'` | | 当前列内容的垂直对齐 |\n\n更多使用说明，请参看 \n","path":"/zh-CN/components/grid"},{"title":"HBox 布局","body":"\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------------- | -------------------------------------------------- | -------------- | -------------------- |\n| type | `string` | `\"hbox\"` | 指定为 HBox 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| gap | `'xs' \\| 'sm' \\| 'base' \\| 'none' \\| 'md' \\| 'lg'` | | 水平间距 |\n| valign | `'top' \\| 'middle' \\| 'bottom' \\| 'between'` | | 垂直对齐方式 |\n| align | `'left' \\| 'right' \\| 'between' \\| 'center'` | | 水平对齐方式 |\n| columns | `Array` | | 列集合 |\n| columns | | 成员可以是其他渲染器 |\n| columns[x].columnClassName | `string` | `\"wrapper-xs\"` | 列上类名 |\n| columns[x].valign | `'top' \\| 'middle' \\| 'bottom' \\| 'between'` | | 当前列内容的垂直对齐 |\n","path":"/zh-CN/components/hbox"},{"title":"Html","body":"\n## 基本用法\n\n渲染一段 HTML\n\n\n\n> 当需要获取数据域中变量时，使用 。\n","path":"/zh-CN/components/html"},{"title":"Icon 图标","body":"\n> 在 React 项目中使用 Icon 需要引入 `@fortawesome/fontawesome-free`，然后在代码中 `import '@fortawesome/fontawesome-free/css/all.css'`，还有相关的 webpack 配置，具体请参考 里的配置\n\n## 基本使用\n\n\n\n## 颜色及大小调整\n\nicon 基于字体实现，所以可以通过来控制它。\n\n\n\n## 使用图标链接\n\nicon 还可以使用 URL 地址，可以从 等网站下载图表的 svg 文件上传到服务器，然后使用对应的地址，比如\n\n\n\n## 使用 v5/v6 版本的 fontawesome\n\n`icon`默认支持，如果想要支持 v5 以及 v6 版本的 fontawesome 请设置`vendor`为空字符串。\n\n### fontawesome v5 版本\n\nv5 用 far/fas 等表示前缀，可参考官网\n\n\n\n### fontawesome v6 版本\n\nv6 用 fa-regular / fa-solid 等表示前缀，可参考官网\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ------------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `icon` | 指定组件类型 |\n| className | `string` | | 外层 CSS 类名 |\n| icon | 或 通过 registerIcon 注册的 icon、或使用 url |\n| vendor | `string` | | icon 类型，默认为`fa`, 表示 fontawesome v4。也支持 iconfont, 如果是 fontawesome v5 以上版本或者其他框架可以设置为空字符串 |\n","path":"/zh-CN/components/icon"},{"title":"iFrame","body":"\n## 基本使用\n\n内嵌外部站点，可用 iframe 来实现。\n\n\n\n## src 使用动态数据\n\n### 数据域变量\n\n> 1.1.6\n\n\n\n## 其它原生 iframe 属性\n\n> 2.1.0 及以上版本\n\n还支持以下原生 iframe 属性，具体配置项请。\n\n- name\n- allow\n- sandbox\n- referrerpolicy\n\n## 支持 base64 格式\n\n> 2.4.0 及以上版本\n\n`src`属性支持传入符合 base64 编码标准的 \n\n## 如何和 iframe 通信\n\n#### amis 向 iframe 通信\n\n在 iframe 页面中添加`message`事件监听器，在 iframe 初始化、更新或者接收到其他组件发送数据的时候，会通过 `postMessage` 发送当前数据域数据，iframe 页面的事件监听器中可以通过`e.data`进行获取：\n\n\n\n`e.data` 格式及参数说明：\n\n\n\n- **type**: 当前事件类型\n - amis:init：初始化的时候触发\n - amis:update：组件更新时触发\n - amis:receive：组件通过 target 接收到其他组件发送来数据的时候\n- **data**：当前数据源数据\n\n> 如果是 webpack 开发环境，注意过滤掉`webpackOk`类型消息\n\n#### iframe 页面向 amis 通信\n\n1. 首先在 amis 的 iframe 配置项中配置 events 对象，指明 iframe 需要触发的 amis 行为\n\n\n\n上面 `events` 对象中配置了`detail`事件，该行为会触发 amis 弹框行为，并在弹框中渲染`\"iframe 传给 amis 的 id 是：${iframeId}\"`这段模板。`detail`支持多种动作配置，具体配置参考的 actionType 部分。\n\n那么要如何触发该事件和传递数据呢？\n\n2. iframe 页面中，获取父级 window，并使用`postMessage`传递数据，格式如下，：\n\n\n\n`message`格式：\n\n- `type`: 标识要触发的 amis 行为，请使用 `amis:xxx` 的格式，这里我们设置为配置好的`detail`事件\n- `data`: 传给 amis 的数据，amis 会将该数据与当前数据域进行合并进行使用\n\n这样 amis 弹框中就会渲染内容:`iframe 传给 amis 的 id 是：111`\n\n## 设置高度自适应\n\n默认 amis 中只支持给 iframe 配置固定高度，我们可以通过上面说到的通信机制实现高度自适应。\n\n1. 首先在 iframe 页面中获取到页面高度\n2. 通过`amis:resize`事件，将高度信息发送给 amis\n\n\n\n这样就可以动态设置 iframe 组件高度\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | ------------------ | ---------- | -------------------- |\n| type | `string` | `\"iframe\"` | 指定为 iFrame 渲染器 |\n| className | `string` | | iFrame 的类名 |\n| frameBorder | `Array` | | frameBorder |\n| style | `object` | | 样式对象 |\n| src | `string` | | iframe 地址 |\n| allow | `string` | | allow 配置 |\n| sandbox | `string` | | sandbox 配置 |\n| referrerpolicy | `string` | | referrerpolicy 配置 |\n| height | `number`或`string` | `\"100%\"` | iframe 高度 |\n| width | `number`或`string` | `\"100%\"` | iframe 宽度 |\n","path":"/zh-CN/components/iframe"},{"title":"Image 图片","body":"\n## 基本使用\n\n\n\n也可以配置`name`属性关联上下文数据\n\n\n\n## 配置标题和说明\n\n\n\n## 配置缩略图\n\n### 显示模式\n\n\n\n### 显示比例\n\n\n\n## 放大功能\n\n配置`\"enlargeAble\": true`，鼠标移动到图片上会显示可点击图标，点击可放大展示\n\n\n\n可以配置`originalSrc`，来指定原图资源地址，作为放大预览的图片地址\n\n\n\n`enlargeTitle`和`enlargeCaption`可以配置放大预览中的标题和描述\n\n\n\n## 设置高宽\n\n通过 `width` 和 `height` 可以设置缩率图显示的高宽\n\n\n\n## 原图模式\n\n> 1.2.3 及以上版本\n\n默认图片为缩略图模式，可以通过配置 imageMode: \"original\" 修改为原图模式，原图模式为块状展示，宽度尽可能占满。\n\n\n\n## 打开外部链接\n\n> 1.3.3 及以上版本\n\n可以设置 href 属性来支持图片点击打开链接，需要注意这和放大功能是冲突的，只能二选一。\n\n\n\nhref 也可以是模板\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 自定义点击行为\n\n> 1.5.0 及以上版本\n\n可以通过 `clickAction` 设置点击触发行为。\n\n\n\n## 工具栏\n\n> 2.2.0 及以上版本\n\n配置`\"showToolbar\": true`使图片在放大模式下开启图片工具栏。配置`\"toolbarActions\"`属性可以自定义工具栏的展示方式，具体配置参考\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| -------------- | ------------------------------------ | --------- | -------------------------------------------------------------------------------------- | ------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"image\"`；在 Form 中用作静态展示，为`\"static-image\"` |\n| className | `string` | | 外层 CSS 类名 |\n| innerClassName | `string` | | 组件内层 CSS 类名 |\n| imageClassName | `string` | | 图片 CSS 类名 |\n| thumbClassName | `string` | | 图片缩率图 CSS 类名 |\n| height | `string` | | 图片缩率高度 |\n| width | `string` | | 图片缩率宽度 |\n| title | `string` | | 标题 |\n| imageCaption | `string` | | 描述 |\n| placeholder | `string` | | 占位文本 |\n| defaultImage | `string` | | 无数据时显示的图片 |\n| src | `string` | | 缩略图地址 |\n| href | | | 外部链接地址 |\n| originalSrc | `string` | | 原图地址 |\n| enlargeAble | `boolean` | | 支持放大预览 |\n| enlargeTitle | `string` | | 放大预览的标题 |\n| enlargeCaption | `string` | | 放大预览的描述 |\n| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |\n| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |\n| imageMode | `string` | `thumb` | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式 |\n| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |\n| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |\n\n#### ImageAction\n\n\n","path":"/zh-CN/components/image"},{"title":"Images 图片集","body":"\n图片集展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`、`Form`或`CRUD`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n通过 source 关联上下文数据，或者通过 name 关联。\n\n\n\n也可以静态展示，即不关联数据固定显示。\n\n\n\n## 值格式\n\n除了支持纯文本数组以外，也支持对象数组，如：\n\n\n\n### 配置预览图地址\n\n需要设置对象中预览图地址的`key`值为`image`\n\n\n\n如果`key`值不是`image`，也可以在 **images 组件** 上，通过配置`src`，使用数据映射，来获取图片地址\n\n\n\n### 配置原图地址\n\n需要设置对象中原图地址的`key`值为`src`\n\n\n\n如果原图数据的`key`值不是`src`，也可以在 **images 组件** 上，通过配置`originalSrc`，使用数据映射，来获取原图片地址\n\n\n\n### 配置标题和说明\n\n设置对象中标题的`key`值为`title`，说明的`key`为`description`或`caption`。\n\n\n\n## 显示比例和缩略图模式\n\n比如这个例子配置成 16:9 的比率展示缩略图，并裁剪部分去掉空白。\n\n\n\n## 配置放大预览\n\n在 **images 组件** 上，配置`enlargeAble`，支持放大预览\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中关联数据静态展示\n\n\n\n## 工具栏\n\n> 2.2.0 及以上版本\n\n配置`\"showToolbar\": true`使图片在放大模式下开启图片工具栏。配置`\"toolbarActions\"`属性可以自定义工具栏的展示方式，具体配置参考\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| -------------- | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------- | ------- |\n| type | `string` | `images` | 如果在 Table、Card 和 List 中，为`\"images\"`；在 Form 中用作静态展示，为`\"static-images\"` |\n| className | `string` | | 外层 CSS 类名 |\n| defaultImage | `string` | | 默认展示图片 |\n| value | `string`或`Array<string>`或`Array<object>` | | 图片数组 |\n| source | `string` | | 数据源 |\n| delimiter | `string` | `,` | 分隔符，当 value 为字符串时，用该值进行分隔拆分 |\n| src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 |\n| originalSrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 |\n| enlargeAble | `boolean` | | 支持放大预览 |\n| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |\n| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |\n| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |\n| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |\n","path":"/zh-CN/components/images"},{"title":"组件介绍","body":"\n从这个章节开始，我们将会介绍 amis 中内置的所有组件的使用方法\n","path":"/zh-CN/components/index"},{"title":"Json","body":"\nJSON 展示组件\n\n## 基本用法\n\n可以配置 `value` 展示 `json` 格式数据\n\n\n\n## 获取数据链值\n\n也可以通过配置 `source` 获取数据链中的值\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 主题\n\n可配置`jsonTheme`，指定显示主题，可选`twilight`和`eighties`，默认为`twilight`。\n\n\n\n## 配置默认展开层级\n\n\n\n如上，`levelExpand`配置为`0`，则默认不展开。\n\n## 开启 json 修改\n\n> since 1.2.3\n\n可配置`mutable` 为 true，展示 json 的同时支持修改。记得配置 name 属性。\n\n\n\n## 显示数据类型显示\n\n还可以使用 `displayDataTypes` 开启数据类型显示\n\n\n\n## 文本过长自动处理\n\n> 2.0.0 及以上版本\n\n设置`ellipsisThreshold`可以设置字符串的最大展示长度，点击字符串可以切换全量/部分展示方式，默认展示全量字符串。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | ----------------- | ---------- | ------------------------------------------------------------------------------------ |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"json\"`；在 Form 中用作静态展示，为`\"static-json\"` |\n| className | `string` | | 外层 CSS 类名 |\n| value | `object`/`string` | | json 值，如果是 string 会自动 parse |\n| source | `string` | `''` | 通过数据映射获取数据链中的值 |\n| placeholder | `string` | `-` | 占位文本 |\n| levelExpand | `number` | `1` | 默认展开的层级 |\n| jsonTheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` |\n| mutable | `boolean` | `false` | 是否可修改 |\n| displayDataTypes | `boolean` | `false` | 是否显示数据类型 |\n| ellipsisThreshold | `number` | `false` | 设置字符串的最大展示长度，点击字符串可以切换全量/部分展示方式，默认展示全量字符串 |\n","path":"/zh-CN/components/json"},{"title":"Link 链接","body":"\n## 基本用法\n\n\n\n## 新标签页打开\n\n\n\n## 禁用超链接\n\n\n\n## 添加图标\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------- | ------ | ------------------------------------------------------------------------------------ |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"link\"`；在 Form 中用作静态展示，为`\"static-link\"` |\n| body | `string` | | 标签内文本 |\n| href | `string` | | 链接地址 |\n| blank | `boolean` | | 是否在新标签页打开 |\n| htmlTarget | `string` | | a 标签的 target，优先于 blank 属性 |\n| title | `string` | | a 标签的 title |\n| disabled | `boolean` | | 禁用超链接 |\n| icon | `string` | | 超链接图标，以加强显示 |\n| rightIcon | `string` | | 右侧图标 |\n","path":"/zh-CN/components/link"},{"title":"List 列表","body":"\n列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n\n\n或者你也可以使用 CRUD 的 \n\n## 单行点击操作\n\n> 1.4.0 及以上版本\n\n配置 itemAction 可以实现点击某一行后进行操作，支持 里的所有配置，比如弹框、刷新其它组件等。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------ | ------------------------------------ | --------------------- | ---------------------------------------------------------------------------- |\n| type | `string` | | `\"list\"` 指定为列表展示。 |\n| title | `string` | | 标题 |\n| source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持 |\n| placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 |\n| className | `string` | | 外层 CSS 类名 |\n| headerClassName | `string` | `amis-list-header` | 顶部外层 CSS 类名 |\n| footerClassName | `string` | `amis-list-footer` | 底部外层 CSS 类名 |\n| listItem | `Array` | | 配置单条信息 |\n| listItem.title | | | 标题 |\n| listItem.titleClassName | `string` | `h5` | 标题 CSS 类名 |\n| listItem.subTitle | | | 副标题 |\n| listItem.avatar | | | 图片地址 |\n| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |\n| listItem.desc | | | 描述 |\n| listItem.body | `Array` | | 内容容器，主要用来放置非表单项组件 |\n| listItem.actions | Array<> | | 按钮区域 |\n| listItem.actionsPosition | 'left' or 'right' | 默认在右侧 | 按钮位置 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 | 版本 |\n| --------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\n| itemClick | `item: IItem` | 单行被点击时触发，为点击行的信息。注意`itemAction`和`onEvent`是互斥的，List 组件中的`onEvent`会覆盖`itemAction`的行为 | `2.4.0` |\n\n### IItem\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | --------------------- | ------ | ------------------- |\n| data | `Record<string, any>` | | 当前行所在数据域 |\n| index | `number` | | 行索引值，从 0 开始 |\n","path":"/zh-CN/components/list"},{"title":"Log 实时日志","body":"\n用于实时显示日志或程序输出结果。\n\n## 基本用法\n\n通过设置 source 来获取日志，支持 ANSI 基本颜色显示。\n\n\n\n由于缺少线上服务，所以这个例子无法在线演，它的运行效果如下图所示\n\n\n\n### 后端实现参考\n\n后端需要通过流的方式输出结果，比如 Node 实现示例：\n\n```javascript\nconst http = require('http');\n\nlet app = http.createServer((req, res) => {\n res.writeHead(200, {\n 'Content-Type': 'text/plain',\n 'Access-Control-Allow-Origin': 'http://localhost:8888',\n 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',\n 'Access-Control-Allow-Credentials': 'true',\n 'Access-Control-Allow-Headers': '*'\n });\n\n let index = 1;\n let timer = setInterval(() => {\n if (index < 50) {\n // 每次 write 都会立刻传给前端\n res.write(`line: ${index}\\n`);\n index += 1;\n } else {\n res.end('end');\n clearInterval(timer);\n }\n }, 100);\n});\n\napp.listen(3000, '127.0.0.1');\nconsole.log('Node server running on port 3000');\n```\n\n其它语言请查找如何使用 stream 的方式返回内容，比如 Spring 的 `StreamingResponseBody`：\n\n\n\n需要注意有些反向代理有 buffer 设置，比如 nginx 的 ，它会使得即便后端返回内容也需要等 buffer 满了才会真正返回前端，如果需要更实时的效果就需要关掉此功能。\n\n## 对于超长日志的优化\n\n> 1.10.0 及以上版本\n\n如果日志非常长会导致页面卡顿，这时有几种处理方法，请根据需求进行选择，也可以都使用：\n\n1. 设置 `rowHeight`，比如 `\"rowHeight\": 22`，这时就会默认启用虚拟渲染，避免渲染卡顿\n - 优点：仍然可以查看所有日志\n - 缺点：如果某一行日志很长也不会自动折行，会出现水平滚动条；目前暂时不支持 autoScroll\n2. 设置 `maxLength`，限制最大显示行数\n - 优点：某一行日志很长的时候会自动折行\n - 缺点：无法查看之前的日志\n3. 试试通过 `\"disableColor\": false` 关闭 ANSI 颜色\n\n## 自动滚动到底部\n\n通过 `autoScroll` 可以关闭此功能\n\n## source 支持变量\n\n> 1.4.2 及以上版本\n\n可以初始设置为空，这样初始不会加载，而等这个变量有值的时候再加载\n\n\n\n## source 支持高级配置\n\n> 1.6.1 及以上版本\n\n可以类似 api 那样自定义 header、method 等，比如：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | ------ | -------------------------------------------------------- |\n| height | `number` | 500 | 展示区域高度 |\n| className | `string` | | 外层 CSS 类名 |\n| autoScroll | `boolean` | true | 是否自动滚动 |\n| placeholder | `string` | | 加载中的文字 |\n| encoding | `string` | utf-8 | 返回内容的字符编码 |\n| source | `string` | | 接口 |\n| rowHeight | `number` | | 设置每行高度，将会开启虚拟渲染 |\n| maxLength | `number` | | 最大显示行数 |\n| operation | `Array` | | 可选日志操作：['stop','clear','showLineNumber','filter'] |\n","path":"/zh-CN/components/log"},{"title":"Mapping 映射","body":"\n## 基本用法\n\n\n\n## 渲染 HTML\n\n\n\n## 渲染其它组件\n\n映射的值也可以是 amis schema，渲染其它组件\n\n\n\n## 支持数组\n\n> 1.5.0 及以上版本\n\n如果返回值是数组会显示为多个\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n### 布尔值映射\n\n\n\n或者\n\n\n\n### 远程拉取字典\n\n> since 1.1.6\n\n通过配置 `source` 接口来实现，接口返回字典对象即可，数据格式参考 map 配置。\n\n\n\n> 默认 source 是有 30s 缓存的，通常字典数据不长变更。如果想修改，请参考 文档配置缓存。\n\n### 关联上下文变量\n\n> since 1.1.6\n\n同样通过配置 `source` 来实现，只是格式是取变量。\n\n> 注意：当数据域里的变量值为`$$`时, 表示将所有接口返回的`data`字段值整体赋值到对应的 key 中\n\n\n\n## 占位文本\n\n通过 `placeholder` 可以控制数据不存在时的展现\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ----------------- | ------ | --------------------------------------------------------------------------------- |\n| className | `string` | | 外层 CSS 类名 |\n| placeholder | `string` | | 占位文本 |\n| map | `object` | | 映射配置 |\n| source | `string` or `API` | | |\n","path":"/zh-CN/components/mapping"},{"title":"Markdown 渲染","body":"\n> 1.1.6 版本开始\n\n## 基本用法\n\n\n\n## 动态数据\n\n动态数据可以通过 name 来关联，类似 组件\n\n## 基于 Editor 和数据联动来实现预览功能\n\n\n\n## 加载外部 markdown 文件\n\n> 1.6.5 及以上版本\n\n可以通过 `src` 属性来加载外部 markdown 文件，比如\n\n\n\n这个接口的返回格式可以是两种，一种是 JSON，类似\n\n\n\n另一种是返回 `content-type` 为 `text/markdown` 或 `text/x-markdown` 的纯文本。\n\n## 视频\n\n可以使用 `` 语法来嵌入视频。\n\n## 高级配置\n\n> 1.8.1 及以上版本\n\n有以下配置：\n\n- html，是否支持 html 标签，默认 false\n- linkify，是否自动识别链接，默认值是 true\n- breaks，是否回车就是换行，默认 false\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | -------- |\n| name | `string` | | 名称 |\n| value | `string` | | 静态值 |\n| className | `string` | | 类名 |\n| src | `Api` | | 外部地址 |\n","path":"/zh-CN/components/markdown"},{"title":"Nav 导航","body":"\n用于展示链接导航\n\n## 基本用法\n\n\n\n## 配置多层级\n\n\n\n## 横向摆放\n\n\n\n### 响应式收纳\n\n横向（`\"stack\": false`）模式下配置`overflow`，实现导航响应式收纳。\n\n\n\n设置`maxVisibleCount`可以自定义强制展示的导航数量，不设置则自动处理。设置`overflowIndicator`自定义菜单按钮的图标。\n设置`overflowLabel`自定义菜单按钮文本。\n\n\n\n## 动态导航\n\n通过配置 source 来实现动态生成导航，source 可以是 api 地址或者变量，比如\n\n\n\n## 懒加载\n\n可以一次只加载部分层级，更深层次的选项可以标记为 `defer` 为 true，这样只有点开的时才会加载。\n\n\n\n## 更多操作\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------------------- | ----------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------- |\n| type | `string` | `\"nav\"` | 指定为 Nav 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |\n| source | `string` 或 | | 可以通过变量或 API 接口动态创建导航 |\n| deferApi | | | 用来延时加载选项详情的接口，可以不配置，不配置公用 source 接口。 |\n| itemActions | | | 更多操作相关配置 |\n| draggable | `boolean` | | 是否支持拖拽排序 |\n| dragOnSameLevel | `boolean` | | 仅允许同层级内拖拽 |\n| saveOrderApi | `string` 或 | | 保存排序的 api |\n| itemBadge | | | 角标 |\n| links | `Array` | | 链接集合 |\n| links[x].label | `string` | | 名称 |\n| links | | 链接地址 |\n| links[x].target | `string` | 链接关系 | |\n| links[x].icon | `string` | | 图标 |\n| links[x].children | `Array<link>` | | 子链接 |\n| links[x].unfolded | `boolean` | | 初始是否展开 |\n| links[x].active | `boolean` | | 是否高亮 |\n| links | | 是否高亮的条件，留空将自动分析链接地址 |\n| links[x].defer | `boolean` | | 标记是否为懒加载项 |\n| links | | 可以不配置，如果配置优先级更高 |\n| overflow | `NavOverflow` | | 响应式收纳配置 |\n| overflow.enable | `boolean` | `false` | 是否开启响应式收纳 |\n| overflow.overflowLabel | `string \\| SchemaObject` | | 菜单触发按钮的文字 |\n| overflow.overflowIndicator | `SchemaIcon` | `\"fa fa-ellipsis\"` | 菜单触发按钮的图标 |\n| overflow.maxVisibleCount | `number` | | 开启响应式收纳后导航最大可显示数量，超出此数量的导航将被收纳到下拉菜单中，默认为自动计算 |\n| overflow.wrapperComponent | `string` | | 包裹导航的外层标签名，可以使用其他标签渲染 |\n| overflow.style | `React.CSSProperties` | | 自定义样式 |\n| overflow.overflowClassName | `string` | `\"\"` | 菜单按钮 CSS 类名 |\n| overflow.overflowPopoverClassName | `string` | `\"\"` | Popover 浮层 CSS 类名 |\n| overflow.overflowListClassName | `string` | `\"\"` | 菜单外层 CSS 类名 |\n","path":"/zh-CN/components/nav"},{"title":"Page 页面","body":"\nPage 组件是 amis 页面 JSON 配置中顶级容器组件，是整个页面配置的入口组件。\n\n## 基本用法\n\n我们这里在内容区中简单渲染一段文字。\n\n\n\n## 渲染组件\n\n内容区同样可以渲染各种组件，这里我们渲染一个表单。\n\n\n\n## 在其他区域渲染组件\n\nPage 默认将页面分为几个区域，分别是**内容区（`body`）**、**侧边栏（`aside`）** 和 **工具栏（`toolbar`）部分**，你可以在这些区域配置你想要的组件和内容。\n\n\n\n> 不同区域都是`Page`的子节点，也就是说都可以使用`Page`下数据作用域。\n\n## 页面初始化请求\n\n通过配置`initApi`，可以在初始化页面时请求所配置的接口。\n\n\n\n具体 API 规范查看 。\n\n## 轮询初始化接口\n\n想要在页面渲染后，轮询请求初始化接口，步骤如下：\n\n1. 配置 initApi；\n2. 配置 interval：单位为毫秒，最小 1000。\n\n\n\n如果希望在满足某个条件的情况下停止轮询，配置`stopAutoRefreshWhen`表达式。\n\n\n\n## 下拉刷新\n\n通过配置`pullRefresh`，可以设置下拉刷新功能（仅用于移动端）。\n\n\n\n配置下拉刷新文案\n\n\n\n## CSS 变量\n\n通过设置 CSS 变量几乎可以修改 amis 中任意组件的展现，具体细节请参考。\n\n\n\n## 自定义 CSS\n\n> 1.3.0 及以上版本\n\n虽然 amis 提供了很多内置样式，但想要更精细控制样式，最好的方式依然是编写自定义 CSS，在之前的版本中需要外部页面配合，从 1.3.0 开始 amis 可以直接在配置中支持自定义 CSS\n\n\n\n上面的配置会自动创建一个 `<style>` 标签，其中内容就是：\n\n\n\n配置写法和编写普通 css 的体验是一致的，可以使用任意 css 选择符及属性。\n\n## aside 可调整宽度\n\n通过配置 `asideResizor`，可以让侧边栏支持动态调整宽度，同时可以通过 `asideMinWidth`、`asideMaxWidth` 设置 aside 最大最小宽度。\n\n\n\n## aside 位置固定\n\n通过配置 `asideSticky` 来开关，默认是开启状态。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ----------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------- |\n| type | `string` | `\"page\"` | 指定为 Page 组件 |\n| title | | | 页面标题 |\n| subTitle | | | 页面副标题 |\n| remark | | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 |\n| aside | | | 往页面的边栏区域加内容 |\n| asideResizor | `boolean` | | 页面的边栏区域宽度是否可调整 |\n| asideMinWidth | `number` | | 页面边栏区域的最小宽度 |\n| asideMaxWidth | `number` | | 页面边栏区域的最大宽度 |\n| asideSticky | `boolean` | true | 用来控制边栏固定与否 |\n| toolbar | | | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 |\n| body | | | 往页面的内容区域加内容 |\n| className | `string` | | 外层 dom 类名 |\n| cssVars | `object` | | 自定义 CSS 变量，请参考 |\n| toolbarClassName | `string` | `v-middle wrapper text-right bg-light b-b` | Toolbar dom 类名 |\n| bodyClassName | `string` | `wrapper` | Body dom 类名 |\n| asideClassName | `string` | `w page-aside-region bg-auto` | Aside dom 类名 |\n| headerClassName | `string` | `bg-light b-b wrapper` | Header 区域 dom 类名 |\n| initApi | | | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 |\n| initFetch | `boolean` | `true` | 是否起始拉取 initApi |\n| initFetchOn | | | 是否起始拉取 initApi, 通过表达式配置 |\n| interval | `number` | `3000` | 刷新时间(最小 1000) |\n| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |\n| stopAutoRefreshWhen | | `\"\"` | 通过表达式来配置停止刷新的条件 |\n| pullRefresh | `object` | `{disabled: true}` | 下拉刷新配置（仅用于移动端） |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看。\n\n> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ----------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------- |\n| inited | `event.data` initApi 远程请求返回的初始化数据<br/>`[name]: any` 当前数据域中指定字段的值 | 远程初始化接口请求成功时触发 |\n| pullRefresh | - | 开启下拉刷新后，下拉释放后触发（仅用于移动端） |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ---------------------------------------- |\n| reload | - | 重新加载，调用 `intiApi`，刷新数据域数据 |\n| setValue | `value: object` 更新的数据 | 更新数据 |\n","path":"/zh-CN/components/page"},{"title":"PaginationWrapper 分页容器","body":"\n分页容器组件，可以用来对已有列表数据做分页处理。\n\n- 输入：默认读取作用域中的 items 变量，如果是其他变量名请配置 `inputName`。\n- 输出：经过分页处理后会把分页后的数据下发给 `outputName` （默认也是 items）对应的数据。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |\n| type | `string` | `\"pagination-wrapper\"` | 指定为 Pagination-Wrapper 渲染器 |\n| showPageInput | `boolean` | `false` | 是否显示快速跳转输入框 |\n| maxButtons | `number` | `5` | 最多显示多少个分页按钮 |\n| inputName | `string` | `\"items\"` | 输入字段名 |\n| outputName | `string` | `\"items\"` | 输出字段名 |\n| perPage | `number` | `10` | 每页显示多条数据 |\n| position | `'top'` 或 `'bottom'` 或 `'none'` | `\"top\"` | 分页显示位置，如果配置为 none 则需要自己在内容区域配置 pagination 组件，否则不显示 |\n| body | | | 内容区域 |\n","path":"/zh-CN/components/pagination-wrapper"},{"title":"Pagination 分页组件","body":"\n分页组件\n\n\n### 简易模式\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |\n| type | `string` | `\"pagination\"` | 指定为 Pagination渲染器 |\n| mode | `normal \\| simple` | `normal` | 迷你版本/简易版本 只显示左右箭头，配合hasNext使用 |\n| layout | `string \\| string[]` | `[\"pager\"]` | 通过控制layout属性的顺序，调整分页结构布局 |\n| maxButtons | `number` | `5` | 最多显示多少个分页按钮，最小为5 |\n| lastPage | `number` | | 总页数 （设置总条数total的时候，lastPage会重新计算） |\n| total | `number` | | 总条数 |\n| activePage | `number` | `1` | 当前页数 |\n| perPage | `number` | `10` | 每页显示多条数据 |\n| showPerPage | `boolean` | false | 是否展示perPage切换器 layout和showPerPage都可以控制 |\n| perPageAvailable | `number[]` | `[10, 20, 50, 100]` | 指定每页可以显示多少条 |\n| showPageInput | `boolean` | false | 是否显示快速跳转输入框 layout和showPageInput都可以控制|\n| disabled | `boolean` | false | 是否禁用 |\n| onPageChange | page、perPage改变时会触发 | (page: number, perPage: number) => void; | 分页改变触发 |","path":"/zh-CN/components/pagination"},{"title":"Panel 面板","body":"\n可以把相关信息以面板的形式展示到一块。\n\n## 基本用法\n\n\n\n## 底部配置按钮\n\n可以通过配置`actions`数组，实现渲染底部按钮栏\n\n\n\n## 固定底部\n\n有时 panel 内，内容过多，导致底部操作按钮不是很方便，可以配置`\"affixFooter\": true`，将底部部分贴在浏览器底部展示。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------- | -------------------------------------- | ------------------- |\n| type | `string` | `\"panel\"` | 指定为 Panel 渲染器 |\n| className | `string` | `\"panel-default\"` | 外层 Dom 的类名 |\n| headerClassName | `string` | `\"panel-heading\"` | header 区域的类名 |\n| footerClassName | `string` | `\"panel-footer bg-light lter wrapper\"` | footer 区域的类名 |\n| actionsClassName | `string` | `\"panel-footer\"` | actions 区域的类名 |\n| bodyClassName | `string` | `\"panel-body\"` | body 区域的类名 |\n| title | | | 标题 |\n| header | | | 头部容器 |\n| body | | | 内容容器 |\n| footer | | | 底部容器 |\n| affixFooter | `boolean` | | 是否固定底部容器 |\n| actions | Array<> | | 按钮区域 |\n","path":"/zh-CN/components/panel"},{"title":"PopOver 弹出提示","body":"\npopover 不是一个独立组件，它是嵌入到其它组件中使用的，目前可以在以下组件中配置\n\n- table 的 column\n- list 的 column\n- static\n- cards 里的字段\n\n## 基本配置\n\n比如在 CRUD 的 tpl 中，可以默认截断显示，然后加上 popOver 来显示全部内容\n\n\n\n> 上面的 popOver 精简写法只支持 1.6.5 及以上版本，之前版本需要使用 \"popOver\": {\"body\": \"$engine\"}\n\n## 在其它组件里的示例\n\n\n\n## 更多配置\n\n可以配置触发条件，是否显示 icon，title 等，具体请参考后面的配置列表\n\n\n\n## popOverEnableOn\n\n可以给列上配置`popOverEnableOn`属性，该属性为配置当前行是否启动`popOver`功能\n\n\n\n## 属性列表\n\n- `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。\n- `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。\n- `position` 配置弹出位置，只有 `popOver` 模式有用，默认是自适应。\n 可选参数：\n\n - `center`\n - `left-top`\n - `right-top`\n - `left-bottom`\n - `right-bottom`\n\n atX-atY-myX-myY\n 即：对齐目标的位置-对齐自己的位置\n\n - `left-top-right-bottom` 在目标位置的左上角显示。\n - `left-center-right-center` 在目标的左侧显示，垂直对齐。\n - ...\n\n 固定位置\n\n - `fixed-center`\n - `fixed-left-top`\n - `fixed-right-top`\n - `fixed-left-bottom`\n - `fixed-right-bottom`。\n\n- `offset` 默认 `{top: 0, left: 0}`，如果要来一定的偏移请设置这个。\n- `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。\n- `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。\n- `title` 弹出框的标题。\n- `body` 弹出框的内容。\n","path":"/zh-CN/components/popover"},{"title":"Portlet 门户栏目","body":"\n门户栏目组件。\n\n## 基本用法\n\n\n\n## 配置工具栏\n\n\n\n## 隐藏头部\n\n去掉头部，默认只展示内容 tab 第一项的内容\n\n\n\n## 设置 style\n\n默认 tabs 只有一项的时候没有选中状态\n\n\n\n## 去掉分隔线\n\n\n\n## source 动态数据\n\n配置 source 属性,根据某个数据来动态生成。具体使用参考 Tabs 选项卡组件\n\n## 图标\n\n通过 icon 可以设置 tab 的图标，可以是 fontawesome 或 URL 地址。\n\n\n\n## mountOnEnter\n\n只有在点击卡片的时候才会渲染，在内容较多的时候可以提升性能，但第一次点击的时候会有卡顿。\n\n## unmountOnExit\n\n如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`\"unmountOnExit\": true`。\n\n## 监听切换事件\n\n\n\n会传递 key 参数和 props\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------- | ------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------ |\n| type | `string` | `\"portlet\"` | 指定为 Portlet 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| tabsClassName | `string` | | Tabs Dom 的类名 |\n| contentClassName | `string` | | Tabs content Dom 的类名 |\n| tabs | `Array` | | tabs 内容 |\n| source | `Object` | | tabs 关联数据，关联后可以重复生成选项卡 |\n| toolbar | | | tabs 中的工具栏，不随 tab 切换而变化 |\n| style | `string \\| Object` | | 自定义样式 |\n| description | | | 标题右侧信息 |\n| hideHeader | `boolean` | false | 隐藏头部 |\n| divider | `boolean` | false | 去掉分隔线 |\n| tabs[x].title | `string` | | Tab 标题 |\n| tabs[x].icon | `icon` | | Tab 的图标 |\n| tabs | | 内容区 |\n| tabs | | tabs 中的工具栏，随 tab 切换而变化 |\n| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |\n| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 |\n| tabs[x].className | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | Tab 区域样式 |\n| mountOnEnter | `boolean` | false | 只有在点中 tab 的时候才渲染 |\n| unmountOnExit | `boolean` | false | 切换 tab 的时候销毁 |\n| scrollable | `boolean` | false | 是否导航支持内容溢出滚动，`vertical`和`chrome`模式下不支持该属性；`chrome`模式默认压缩标签 |\n","path":"/zh-CN/components/portlet"},{"title":"Progress 进度条","body":"\n## 基本用法\n\n\n\n## 颜色映射\n\n可以配置`map`为单独颜色，例如：`#F96D3E`\n\n若配置为字符串数组，指定颜色映射，例如，默认的 map 配置为：`['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']`\n\n它意味着将进度条分成了 5 份，`前20%`将会添加`bg-danger` css 类名到进度条上，`20%~40%`，将会添加`bg-warning`，以此类推，你可以自定义`map`来配置想要的进度效果\n\n若配置为`[{value: 30, color: \"#007bff\"}, {value: 60, color: \"#F96D3E\"}]`, 表示为 value 小于等于`30`的区间显示`#007bff`, 大于`30`则显示`#F96D3E`\n\n\n\n## 阈值（刻度）\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 显示背景间隔\n\n\n\n## 显示动画\n\n需要条形进度条才生效\n\n\n\n## 圆形进度条\n\n\n\n## 仪表盘进度条\n\n可设置缺口位置和缺口角度\n\n\n\n## 设置线条宽度\n\n可设置 strokeWidth 调整线条宽度\n\n\n\n## 自定义格式输出内容\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------- |\n| type | `string` | | 如果在 Form 中用作静态展示，为`\"static-progress\"` |\n| mode | `string` | `line` | 进度「条」的类型，可选`line circle dashboard` |\n| className | `string` | | 外层 CSS 类名 |\n| value | | | 进度值 |\n| placeholder | `string` | `-` | 占位文本 |\n| showLabel | `boolean` | `true` | 是否展示进度文本 |\n| stripe | `boolean` | `false` | 背景是否显示条纹 |\n| animate | `boolean` | `false` | type 为 line，可支持动画 |\n| map | `string \\| Array<string> \\| Array<{value:number, color:string}>` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 |\n| threshold | {value:}> | `-` | 阈值（刻度） |\n| showThresholdText | `boolean` | `false` | 是否显示阈值（刻度）数值 |\n| valueTpl | `string` | `${value}%` | 自定义格式化内容 |\n| strokeWidth | `number` | line 类型为`10`，circle、dashboard 类型为`6` | 进度条线宽度 |\n| gapDegree | `number` | `75` | 仪表盘缺角角度，可取值 0 ~ 295 |\n| gapPosition | `string` | `bottom` | 仪表盘进度条缺口位置，可选`top bottom left right` |\n","path":"/zh-CN/components/progress"},{"title":"Property 属性表","body":"\n使用表格的方式显示只读信息，如产品详情页。\n\n## 基本用法\n\n\n\n## 简易模式\n\n默认是表格模式，还可以通过 `\"mode\"=\"simple\"` 改成简易模式，在这种模式下没有边框，属性名和值是通过 `separator` 来分隔\n\n\n\n## 使用其它展现\n\n`label` 和 `content` 均支持使用 `amis` 其它渲染组件，比如\n\n\n\n## 动态内容\n\n属性表本身没有数据获取功能，需要结合 来获取数据，下面的例子为了方便就直接放 page 下的 data 中了，它的效果和用 service 是一样的。\n\n动态内容有两种情况：\n\n1. label 固定、content 不同\n2. label 和 content 都不确定\n\n第一种情况只需要在 content 里使用变量即可，因为可以用任意 amis 节点。\n\n\n\n第二种情况需要使用 `source` 属性来获取上下文中的内容。\n\n\n\n## 样式控制\n\n通过 `labelStyle` 和 `contentStyle` 来控制属性名和属性值的样式，比如水平及垂直方向的对齐方式：\n\n\n\n如果是简易模式，因为合并到一个单元格中了，因此只能通过 `contentStyle` 设置单元格样式，`labelStyle` 只能设置属性名文本的样式。\n\n\n\n## 显示列数\n\n通过 `column` 来控制一行显示几列，默认是 3 列，下面示例是改成 2 列的效果\n\n\n\n## 隐藏某个属性值\n\nitems 里的属性还支持 `visibleOn` 和 `hiddenOn` 表达式，能隐藏部分属性，如果有空间后续组件会自动补上来，如下示例的 memory 隐藏了：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | ---------------------------------------- | ------- | -------------------------------------- |\n| className | `string` | | 外层 dom 的类名 |\n| style | `object` | | 外层 dom 的样式 |\n| labelStyle | `object` | | 属性名的样式 |\n| contentStyle | `object` | | 属性值的样式 |\n| column | `number` | 3 | 每行几列 |\n| mode | `string` | 'table' | 显示模式，目前只有 'table' 和 'simple' |\n| separator | `string` | ',' | 'simple' 模式下属性名和值之间的分隔符 |\n| title | `string` | | 标题 |\n| source | `string` | | 数据源 |\n| items[].label | `SchemaTpl` | | 属性名 |\n| items[].content | `SchemaTpl` | | 属性值 |\n| items[].span | `SchemaTpl` | | 属性值跨几列 |\n| items | | 显示表达式 |\n| items | | 隐藏表达式 |\n","path":"/zh-CN/components/property"},{"title":"QRCode 二维码","body":"\n## 基本用法\n\n\n\n> 根据 QR 码国际标准，二进制模式最多可存储`2953`字节的内容（1 中文汉字=2 字节）\n\n## 配置背景色\n\n背景色默认为`#fff`（纯白色）, `backgroundColor`属性可以修改背景色。\n\n\n\n## 配置前景色\n\n前景色默认为`#000`（纯黑色）, `foregroundColor`属性可以前景色。\n\n\n\n## 纠错等级\n\n`level`属性可以设置二维码的纠错等级，纠错等级分为四种（`'L' 'M' 'Q' 'H'`），从左到右依次提升，默认为`'L'`。\n\n\n\n## 嵌入图片\n\n`imageSettings`属性可以设置二维码中嵌入的图片，`src`设置图片链接地址，图片大小默认为二维码大小的 10%，图片位置默认水平垂直居中。\n\n> 1.10.0 及以上版本。\n> 建议根据图片大小，调整二维码纠错等级，避免图片遮挡导致二维码无法被正确识别\n\n\n\n### 关联上下文变量\n\n\n\n### 图片宽高\n\n`width` 和 `height` 可以设置图片的宽度和高度。\n\n\n\n### 图片偏移量\n\n以二维码**左上角**为原点，`x`，`y`分别设置图片的水平偏移量和垂直偏移量。示例通过`codeSize`和图片的`width` 和 `height` 计算出偏移量`{\"x\": 78, \"y\": 98}`，使图片位于右下角。\n\n\n\n### 挖孔嵌入\n\n设置`excavate: true`，可以在二维码图片中挖孔，视觉上使图片和二维码处于同一图层。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------- | ------------------------------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"qr-code\"` | 指定为 QRCode 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| qrcodeClassName | `string` | | 二维码 SVG 的类名 |\n| codeSize | `number` | `128` | 二维码的宽高大小 |\n| backgroundColor | `string` | `\"#fff\"` | 二维码背景色 |\n| foregroundColor | `string` | `\"#000\"` | 二维码前景色 |\n| level | `string` | `\"L\"` | 二维码复杂级别，有（'L' 'M' 'Q' 'H'）四种 |\n| value | |\n| imageSettings | `object` | | QRCode 图片配置 |\n| imageSettings.src | `string` | | 图片链接地址 |\n| imageSettings.width | `number` | 默认为`codeSize`的 10% | 图片宽度 |\n| imageSettings.height | `number` | 默认为`codeSize`的 10% | 图片高度 |\n| imageSettings.x | `number` | 默认水平居中 | 图片水平方向偏移量 |\n| imageSettings.y | `number` | 默认垂直居中 | 图片垂直方向偏移量 |\n| imageSettings.excavate | `boolean` | `false` | 图片是否挖孔嵌入 |\n","path":"/zh-CN/components/qrcode"},{"title":"Radios 单选框","body":"\n## 基本用法\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |\n| autoFill | `object` | | |\n| optionClassName | `string` | | 选项 CSS 类名 |\n","path":"/zh-CN/components/radios"},{"title":"Remark 标记","body":"\n用于展示提示文本，和表单项中的 remark 属性类型。\n\n## 基本用法\n\n\n\n## 图标形状\n\n\n## 可配置标题\n\n\n\n## 支持变量\n\n\n\n## 弹出位置\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ----------------------- | ------------- |\n| type | `string` | | `remark` |\n| className | `string` | | 外层 CSS 类名 |\n| content | `string` | | 提示文本 |\n| placement | `string` | | 弹出位置 |\n| trigger | `string` | `['hover', 'focus']` | 触发条件 |\n| icon | `string` | `fa fa-question-circle` | 图标 |\n| shape | `'circle' \\| 'square'` | 图标形状 |\n\n","path":"/zh-CN/components/remark"},{"title":"Search Box 搜索框","body":"\n## 基本用法\n\n用于展示一个简单搜索框，通常需要搭配其他组件使用。比如 page 配置 `initApi` 后，可以用来实现简单数据过滤查找，`name` keywords 会作为参数传递给 page 的 `initApi`。\n\n\n\n## 加强样式\n\n\n\n## 可清除\n\n\n\n## mini 版本\n\n\n\n## 与 CRUD 搭配\n\n\n\n## 与 Service 搭配\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------- | ------ | ---------------- |\n| type | `string` | | `search-box` |\n| className | `string` | | 外层 CSS 类名 |\n| mini | `boolean` | | 是否为 mini 模式 |\n| searchImediately | `boolean` | | 是否立即搜索 |\n","path":"/zh-CN/components/search-box"},{"title":"Service 功能型容器","body":"\namis 中部分组件，作为展示组件，自身没有**使用接口初始化数据域的能力**，例如：功能，在当前的 **数据链** 中获取数据，并进行数据展示。\n\n而`Service`组件就是专门为该类组件而生，它的功能是：**配置初始化接口，进行数据域的初始化，然后在`Service`内容器中配置子组件，这些子组件通过数据链的方法，获取`Service`所拉取到的数据**\n\n## 基本使用\n\n最基本的使用，是配置初始化接口`api`，将接口返回的数据添加到自身的数据域中，以供子组件通过进行获取使用。\n\n\n\n你可以通过查看网络面板看到，`service`接口返回的数据结构为：\n\n\n\n在`service`的子组件中，就可以使用`${title}`和`${date}`展示数据\n\n## 展示列表\n\n另外一种使用较为频繁的场景是：serivce + table 进行列表渲染\n\n\n\n上例中 service 接口返回数据结构如下：\n\n\n\n`table`中配置`source`属性为`${rows}`就可以获取到`rows`变量的数据，并用于展示。\n\n## 动态渲染页面\n\n`Service` 还有个重要的功能就是支持配置 `schemaApi`，通过它可以实现动态渲染页面内容。\n\n\n\n同样观察`schemaApi接口`返回的数据结构：\n\n\n\n它将`data`返回的对象作为 amis 页面配置，进行了解析渲染，实现动态渲染页面的功能。\n\n### jsonp 请求\n\n`schemaApi` 同样支持 `jsonp` 请求，完整用法请参考 amis-admin 项目。\n\n\n\n`schemaApi接口` 返回的内容其实是一段立即执行的 js 代码。我们可以通过 `callback` 参数执行函数名，或者通过 `request._callback` 获取\n\n\n\n### js 请求\n\n> 2.1.0 及以上版本\n\n`schemaApi` 支持 `js` 请求，它会发起一个 xhr 请求去下载 js 文件后执行\n\n\n\n这个接口的返回结果期望是一段 JavaScript 代码，和普通 json 返回结果最大的不同是这里可以执行 JavaScript 代码，比如支持 onClick 函数\n\n\n\n这段代码里可以通过 api 变量拿到当前请求的 api 参数，比如 url 地址，可以通过判断进行二次处理\n\n\n\n## 动态渲染表单项\n\n默认 Service 可以通过配置`schemaApi` ，但是如果想渲染表单项，请返回下面这种格式：\n\n\n\n例如下例：\n\n\n\n`schemaApi` 除了能返回表单项之外，还能同时返回表单数据，如果你这样返回接口\n\n\n\n## 接口联动\n\n`api`和`schemaApi`都支持\n\n\n\n上例可看到，变更**数据模板**的值，会触发 service 重新请求，并更新当前数据域中的数据\n\n更多相关见\n\n## 定时轮询刷新\n\n设置 `interval` 可以定时刷新 `api` 和 `schemaApi` 接口，单位是毫秒，如`\"interval\": 2000` 则设置轮询间隔为 2s ，注意最小间隔时间是 1 秒。支持通过`stopAutoRefreshWhen`表达式定义轮询停止条件。\n\n\n\n### 静默轮询\n\n设置`silentPolling: true`可以关闭等待接口加载时的 loading 动画，该配置仅在配置`interval`时生效。\n\n\n\n## 通过 WebSocket 实时获取数据\n\nService 支持通过 WebSocket 获取数据，只需要设置 ws（由于无示例服务，所以无法在线演示）。\n\n\n\n> 1.4.0 及以上版本\n\n或者是对象的方式支持配置初始 `data`，这个 data 会在建立连接时发送初始数据\n\n\n\n可以只设置 ws，通过 ws 来获取所有数据，也可以同时设置 api 和 ws，让 api 用于获取全部数据，而 ws 用于获取实时更新的数据。\n\n后端实现示例，基于 ：\n\n\n\nWebSocket 客户端的默认实现是使用标准 WebSocket，如果后端使用定制的 WebSocket，比如 socket.io，可以通过覆盖 `env.wsFetcher` 来自己实现数据获取方法，默认实现是：\n\n> 1.4.0 及以上版本修改了 ws 类型，将之前的字符串改成了对象的方式，会有两个参数 url 和 body\n\n下面是目前 amis 中 WebSocket 支持的默认实现：\n\n\n\n通过 onMessage 来通知 amis 数据修改了，并返回 close 函数来关闭连接。\n\n> 1.8.0 及以上版本\n\n如果 WebSocket 返回的结果不是 JSON 而只是某个字符串，需要配置 `responseKey` 属性来将这个结果放在这个 key 上，比如下面的例子\n\n\n\n对应的后端就只需要返回字符串\n\n\n\n## 调用外部函数获取数据\n\n> 1.4.0 及以上版本\n\n对于更复杂的数据获取情况，可以使用 `dataProvider` 属性来实现外部函数获取数据，它支持字符串和函数两种形式\n\n\n\n函数将会传递两个参数：`data` 和 `setData`，其中 `data` 可以拿到上下文数据，而 `setData` 函数可以用来更新数据，比如下面的例子\n\n\n\n上面这个例子还返回了一个函数，这个函数会在组件销毁的时候执行，可以用来清理资源。\n\n下面是使用函数类型的示例，注意这个示例不能放在 JSON 中，只能在 jssdk 或 react 项目里使用。\n\n\n\n> 1.8.0 及以上版本\n\n新增了一个 `env` 属性，可以调用系统环境中的方法，比如 env.fetcher、tracker 等，比如下面的例子会调用 `env.notify` 来弹出提示\n\n\n\n### 函数触发事件\n\n> 2.3.0 及以上版本\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| --------------------- | ----------------------------------------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |\n| type | `string` | `\"service\"` | 指定为 service 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| body | | | 内容容器 |\n| api | | | 初始化数据域接口地址 |\n| ws | `string` | | WebScocket 地址 |\n| dataProvider | `string \\| Record<\"inited\" \\| \"onApiFetched\" \\| \"onSchemaApiFetched\" \\| \"onWsFetched\", string>` | | 数据获取函数 | <ul><li>`1.4.0`</li><li>`1.8.0`支持`env`参数</li><li>`2.3.0` 支持基于事件触发</li></ul> |\n| initFetch | `boolean` | | 是否默认拉取 |\n| schemaApi | | | 用来获取远程 Schema 接口地址 |\n| initFetchSchema | `boolean` | | 是否默认拉取 Schema |\n| messages | `Object` | | 消息提示覆写，默认消息读取的是接口返回的 toast 提示文字，但是在此可以覆写它。 |\n| messages.fetchSuccess | `string` | | 接口请求成功时的 toast 提示文字 |\n| messages.fetchFailed | `string` | `\"初始化失败\"` | 接口请求失败时 toast 提示文字 |\n| interval | `number` | | 轮询时间间隔，单位 ms(最低 1000) |\n| silentPolling | `boolean` | `false` | 配置轮询时是否显示加载动画 |\n| stopAutoRefreshWhen | | | 配置停止轮询的条件 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看。\n\n> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ----------------- | ---------------------------------------------------------------------------------------- | ---------------------------------- |\n| fetchInited | `event.data` api 远程请求返回的初始化数据<br/>`[name]: any` 当前数据域中指定字段的值 | 远程初始化接口请求成功时触发 |\n| fetchSchemaInited | `event.data` schemaApi 远程请求返回的 UI 内容<br/>`[name]: any` 当前数据域中指定字段的值 | 远程 schemaApi UI 内容接口请求成功 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------- | ------------------------------------------------- |\n| reload | - | 重新加载，调用 `api`，刷新数据域数据 |\n| rebuild | - | 重新构建，调用 `schemaApi`，重新构建容器内 Schema |\n| setValue | - | 更新数据域数据 |\n","path":"/zh-CN/components/service"},{"title":"Sparkline 走势图","body":"\n简单走势图，只做简单的展示，详细展示请采用 Chart 来完成。\n\n## 基本使用\n\n配置类型，然后设置值即可，值为数组格式。\n\n当前例子为静态值，通常你会需要配置成 `name` 与当前环境数据关联。\n\n\n\n## 点击行为\n\n可以通过配置`\"clickAction\": {}`，来指定图表节点的点击行为，支持 amis 的 。\n\n\n\n## 空数据显示\n\n> 1.4.2 及以上版本\n\n通过 `placeholder` 可以设置空数据时显示的内容\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | -------------------- |\n| name | `string` | | 关联的变量 |\n| width | `number` | | 宽度 |\n| height | `number` | | 高度 |\n| placeholder | `string` | | 数据为空时显示的内容 |\n","path":"/zh-CN/components/sparkline"},{"title":"Spinner 加载中","body":"\n一般用来做 `loading` 使用。\n\n## 基本使用\n\n`show` 属性控制 `spinner` 是否渲染。\n\n\n\n`size` 属性控制 `spinner` 的大小，有三种配置：`sm`, `lg` 和 空值。\n\n\n\n`className` 属性、 `spinnerClassName`属性和 `spinnerWrapClassName`属性可以配置 spinner 自定义的 class，`className`会添加到 spinner 组件的最外层标签上，`spinnerClassName`会添加到 icon 对应的标签上，`spinnerWrapClassName` 在作为组件容器使用时，会作用于整个 Spinner 组件的最外层元素上。\n\n\n\n`icon` 属性可以配置自定义的图标，可以是 `amis` 内置的图标名称（需要是在 icons.tsx 组件中注册过的）; 可以是字体图标库的名称(需要引入对应的图标库)，比如`fa fa-spinner`; 也可以是网络图片，比如 `/examples/static/logo.png`;\n\n\n\n`tip` 属性可以配置 spinner 的文案，同时 `tipPlacement`可以配置 tip 的相对于 icon 的位置，有四种配置：`top`,`right`,`bottom`(默认),`left`;\n\n\n\n`delay` 属性可以配置 spinner 的延迟显示时间，例如 delay=1000，`show` 属性设为 `true` 后，1000ms 后才会显示出来。\n\n\n\n## 作为容器使用\n\n`spinner` 组件可以作为容器使用，被包裹的内容可通过 `body` 配置, 且作为容器使用的时候可以使用 `overlay` 属性来配置显示 spinner 的时候是否显示遮罩层（遮罩层背景颜色默认是透明的，可通过外层 className 自定义遮罩层颜色）。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------- | ----------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------- |\n| type | `string` | `spinner` | 指定为 Spinner 渲染器 |\n| show | `boolean` | `true` | 是否显示 spinner 组件 |\n| className | `string` | | spinner 图标父级标签的自定义 class |\n| spinnerClassName | `string` | | 组件中 icon 所在标签的自定义 class |\n| spinnerWrapClassName | `string` | | 作为容器使用时组件最外层标签的自定义 class |\n| size | `string` | | 组件大小 `sm` `lg` |\n| icon | `string` | | 组件图标，可以是`amis`内置图标，也可以是字体图标或者网络图片链接，作为 ui 库使用时也可以是自定义组件 |\n| tip | `string` | | 配置组件文案，例如`加载中...` |\n| tipPlacement | `top`, `right`, `bottom`, `left` | `bottom` | 配置组件 `tip` 相对于 `icon` 的位置 |\n| delay | `number` | `0` | 配置组件显示延迟的时间（毫秒） |\n| overlay | `boolean` | `true` | 配置组件显示 spinner 时是否显示遮罩层 |\n| body | | | 作为容器使用时，被包裹的内容 |\n","path":"/zh-CN/components/spinner"},{"title":"Status 状态","body":"\n## 基本用法\n\n它最适合的用法是放在列表类组件（CRUD，Table，List 等）的列中，用来表示状态。\n\n\n\n## 默认状态列表\n\n下表是默认支持的几种状态：\n\n\n\n## 自定义状态图标和文本\n\n如果默认提供的状态无法满足业务需求，可以使用`map` 和 `labelMap`属性分别配置状态组件的**图标**和**展示文案**。用户自定义的`map` 和 `labelMap`会和默认属性进行 merge，如果只需要修改某一项配置时，无需全量覆盖。\n\n\n\n## 动态数据\n\n`map` 和 `labelMap`支持配置变量，通过数据映射获取上下文中的变量。\n\n> 2.3.0 及以上版本\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | ------------------------------- |\n| type | `string` | | `\"status\"` 指定为 Status 渲染器 |\n| className | `string` | | 外层 Dom 的 CSS 类名 |\n| placeholder | `string` | `-` | 占位文本 |\n| map | `object` | | 映射图标 |\n| labelMap | `object` | | 映射文本 |\n","path":"/zh-CN/components/status"},{"title":"Steps 步骤条","body":"\n步骤条组件\n\n## 基本用法\n\n\n\n## 设置状态\n\n\n\n## 指定步骤条方向\n\n\n\n## 指定标签放置位置\n\n\n\n## 点状步骤条\n\n\n\n## 数据映射\n\n当前处于第几步统一通过 `name` 关联变量名，其他配置可通过 `\"${xxx}\"` 关联上下文变量。\n\n\n\n## 接口映射\n\n接口返回的数据也是一样，都会在同一个数据域，所以取值方式是一样的。\n\n\n\n## Form 中静态展示\n\n\n\n## 动态数据\n\n### 远程拉取\n\n除了可以通过数据映射获取当前数据域中的变量以外，source 还支持配置接口，格式为 API，用于动态返回选项组。\n\n\n\n远程拉取接口时，返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外，必须用\"steps\"作为选项组的 key 值，如下：\n\n\n\n### 数据域变量配置\n\n> 1.9.1 及以上版本\n\n\n\n## 自定义不同步骤以及状态\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | --------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------- |\n| type | `string` | | `\"steps\"` 指定为 步骤条 渲染器 |\n| steps | Array<> | [] | 数组，配置步骤信息 |\n| source | | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |\n| name | `string` | | 关联上下文变量 |\n| value | `string` \\| `number` | `-` | 设置默认值，注意不支持表达式 |\n| status | \\| {[propName: string]: stepStatus;} | `-` | 状态 |\n| className | `string` | `-` | 自定义类名 |\n| mode | `horizontal` \\| `vertical` | `horizontal` | 指定步骤条方向。目前支持水平（horizontal）和竖直（vertical）两种方向 |\n| labelPlacement | `horizontal` \\| `vertical` | `horizontal` | 指定标签放置位置，默认水平放图标右侧，可选 (vertical) 放图标下方 |\n| progressDot | `boolean` | `false` | 点状步骤条 |\n\n### step\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ----------------------------------------------------- | ------ | --------------------------------------- |\n| title | `string` \\| | | 标题 |\n| subTitle | `string` \\| | | 子标题 |\n| description | `string` \\| | | 详细描述 |\n| icon | `string` | | icon 名，支持 fontawesome v4 或使用 url |\n| value | `string` | | value |\n| className | `string` | | 自定义类名 |\n\n### StepStatus\n\n`wait` | `process` | `finish` | `error`\n","path":"/zh-CN/components/steps"},{"title":"Table View 表格展现","body":"\n> 1.2.0 及以上版本才有此功能\n\n通过表格的方式来展现数据，和 的不同之处：\n\n- 数据源要求不同\n - table 的数据源需要是多行的数据，最典型的就是来自某个数据库的表\n - table view 的数据源可以来自各种固定的数据，比如单元格的某一列是来自某个变量\n- 功能不同\n - table 只能用来做数据表的展现\n - table view 除了展现复杂的报表，还能用来进行布局\n- 合并单元格方式不同\n - table 的合并单元格需要依赖数据\n - table view 的合并单元格是手动指定的，因此可以支持不规则的数据格式\n\n## 基本用法\n\n\n\n可以看到 table view 需要手动进行单元格合并，因此更适合使用可视化编辑器进行编辑。\n\n## 设置项\n\ntable view 的设置项有三层，可以分别对表格级别、行级别、单元格级别进行设置。\n\n### 表格设置项\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------------- | ----------------------------------------------------- | ---------------- |\n| width | `number/string` | '100%' | |\n| padding | `number/string` | 'var(--TableCell-paddingY) var(--TableCell-paddingX)' | 单元格默认内间距 |\n| border | `boolean` | true | 是否显示边框 |\n| borderColor | `string` | `var(--borderColor)` | 边框颜色 |\n| trs | | | 参考下面的行设置 |\n\n### 行设置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------------- | ------ | -------------------- |\n| height | `number/string` | | |\n| background | `string` | | 行背景色 |\n| tds | | | 参考下面的单元格设置 |\n\n### 单元格设置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ----------------------------------------- | -------------- | ---------------------------------------------------------------- |\n| background | `string` | | 单元格背景色 |\n| color | `string` | | 单元格文字颜色 |\n| bold | `boolean` | false | 单元格文字是否加粗 |\n| width | `number/string` | | 单元格宽度，只需要设置第一行 |\n| padding | `number/string` | 集成表格的设置 | 单元格内间距 |\n| align | `string` | `left` | 单元格内的水平对齐，可以是 `left`、`center`、`right` |\n| valign | `string` | `middle` | 单元格内的垂直对齐，可以是 `top`、`middle`、`bottom`、`baseline` |\n| colspan | `number` | | 单元格水平跨几行 |\n| rowspan | `number` | | 单元格垂直跨几列 |\n| body | | | 其它 amis 设置 |\n\n#### 单元格样式示例\n\n比如将其它两列的单元格边框设置为 0，就能实现特殊的展现效果\n\n\n\n### 列设置项\n\n列设置项主要是用于控制整列的样式，比如\n\n\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | -------------------- |\n| span | `number` | | 这是个跨几列的设置项 |\n| style | `object` | | 列样式 |\n\n### 标题设置\n\n可以通过 `caption` 来添加段标题文本，并通过 `captionSide` 来控制显示在底部还是顶部。\n\n\n\n### 支持变量及表达式\n\n> 2.1.0 及以上版本\n\ntable-view 的所有属性都支持变量，比如下面的例子通过表达式实现了针对数据进行不同展示\n\n\n\n## 作为布局方法\n\ntable-view 除了可以用来展现表格类型的数据，还能用来实现复杂布局效果，只需要将 `border` 隐藏就行，除了拆分单元格还能通过嵌套的方式实现布局，比如：\n\n\n","path":"/zh-CN/components/table-view"},{"title":"Table 表格","body":"\n表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n\n\n## 数据需求\n\n数据是对象数组，比如前面的例子中 `rows` 的值类似：\n\n\n\n## 空状态展示\n\n\n\n## 列配置\n\n`columns`内，除了简单的配置`label`和`name`展示数据以外，还支持一些额外的配置项，可以帮助更好的展示数据。\n\n### 列类型\n\n除了简单展示数据源所返回的数据以外，`list`的列支持除表单项以外所有组件类型，例如：\n\n\n\n### 列宽\n\n可以给列配置 `width` 属性，控制列宽，共有两种方式：\n\n#### 固定像素\n\n可以配置数字，用于设置列宽像素，例如下面例子我们给`Rendering engine`列宽设置为`100px`。\n\n\n\n#### 百分比\n\n也可以百分比来指定列宽，例如下面例子我们给`Rendering engine`列宽设置为`50%`。\n\n\n\n### 列对齐方式\n\n> 1.4.0 及以上版本\n\n通过 align 可以控制列文本对齐方式，比如\n\n\n\n### 列样式\n\n> 1.4.0 及以上版本\n\n除了前面的宽度和对齐方式，还有更灵活的控制方法是通过样式表\n\n\n\n如果要单独设置标题的样式，可以使用 `labelClassName` 属性\n\n\n\n### 单元格样式\n\n> 1.4.0 及以上版本\n\n`classNameExpr` 可以根据数据动态添加 CSS 类，支持 语法。\n\n例如下例，`\"<%= data.version > 5 ? \"text-danger\" : \"\" %>\"` 表示当行数据的 `version` 数据大于 5 的时候添加 `text-danger` CSS 类名，使得文字颜色变红\n\n\n\n### 背景色阶\n\n> 1.8.0 及以上版本\n\n`backgroundScale` 可以用来根据数据控制自动分配色阶\n\n\n\n`min` 和 `max` 都支持变量，如果为设置会自动计算当前列的最大和最小值。\n\n默认会从当前列的 `name` 属性来获取数据，也可以通过 `backgroundScale.source` 使用变量及公式来获取数据。\n\n### 默认是否显示\n\n默认 `columnsTogglable` 配置为 `auto`，当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 `true` 或者 `false` 来强制开或者关。在列配置中可以通过配置 `toggled` 为 `false` 默认不展示这列，比如下面这个例子中 ID 这一栏。\n\n\n\n### 固定列\n\n列太多可以让重要的几列固定，可以配置固定在左侧还是右侧，只需要给需要固定的列上配置 `fixed` 属性，配置 `left` 或者 `right`。\n\n\n\n### 可复制\n\n可以在列上配置`\"copyable\": true`，会在该列的内容区里，渲染一个复制内容的图标，点击可复制该显示内容\n\n\n\n你也可以配置对象形式，可以自定义显示内容\n\n\n\n### 弹出框（popOver）\n\n可以给列上配置 `popOver` 属性，会在该列的内容区里，渲染一个图标，点击会显示弹出框，用于展示内容\n\n\n\npopOver 的其它配置请参考 \n\n### 表头样式\n\n可以配置`\"isHead\": true`，来让当前列以表头的样式展示。应用场景是：\n\n1. 所有列`label`配置空字符串，不显示表头\n2. 配置`combineNum`，合并单元格，实现左侧表头的形式\n3. 列上配置`\"isHead\": true`，调整样式\n\n\n\n还可以配置\"offset\"，实现弹出框位置调整自定义\n\n\n\n## 嵌套\n\n当行数据中存在 children 属性时，可以自动嵌套显示下去。\n\n\n\n## 底部展示 (Footable)\n\n列太多时，内容没办法全部显示完，可以让部分信息在底部显示，可以让用户展开查看详情。配置很简单，只需要开启 `footable` 属性，同时将想在底部展示的列加个 `breakpoint` 属性为 `*` 即可。\n\n\n\n默认都不会展开，如果你想默认展开第一个就把 footable 配置成这样。\n\n\n\n当配置成 `all` 时表示全部展开。\n\n## 合并单元格\n\n只需要配置 `combineNum` 属性即可，他表示从左到右多少列内启动自动合并单元格，只要多行的同一个属性值是一样的，就会自动合并。\n\n如果你不想从第一列开始合并单元格，可以配置 `combineFromIndex`，如果配置为 1，则会跳过第一列的合并。如果配置为 2，则会跳过第一列和第二列的合并，从第三行开始向右合并 `combineNum` 列。\n\n\n\n> 1.3.0 版本开始 combineNum 支持使用变量，如下所示\n\n\n\n## 超级表头\n\n超级表头意思是，表头还可以再一次进行分组。额外添加个 `groupName` 属性即可。\n\n\n\n## 高亮行\n\n可以通过配置`rowClassNameExpr`来为行添加 CSS 类，支持 语法。\n\n例如下例，`\"<%= data.id % 2 ? \"bg-success\" : \"\" %>\"` 表示当行数据的 `id` 变量为 不能被 `2` 整除时，给当前行添加`bg-success` CSS 类名，即绿色背景色\n\n\n\n## 总结行\n\n可以通过配置 `prefixRow` 或 `affixRow` 来为表格顶部或底部添加总结行，\n\n\n\n> 1.8.1 及以上版本\n\n新增 `affixRowClassNameExpr`、`affixRowClassName`、`prefixRowClassNameExpr`、`prefixRowClassName` 来控制总结行样式，比如下面的例子\n\n\n\n### 配置合并单元格\n\n可以配置 `colSpan` 来设置一列所合并的列数，例如\n\n\n\n上例中我们给 `总计` 列配置了 `\"colSpan\": 2`，它会合并两个单元格\n\n### 配置多行\n\n可以配置二维数组来配置多行总结行\n\n\n\n## 行操作按钮\n\n通过 itemActions 可以设置鼠标移动到行上出现操作按钮\n\n\n\n## 单行点击操作\n\n> 1.4.0 及以上版本\n\n处理前面的 itemActions，还可以配置 itemAction 来实现点击某一行后进行操作，支持 里的所有配置，比如弹框、刷新其它组件等。\n\n\n\n注意这个属性和 `checkOnItemClick` 冲突，因为都是定义行的点击行为，开启 `itemAction` 后 `checkOnItemClick` 将会失效。\n\n## 行角标\n\n> 1.5.0 及以上版本\n\n通过属性`itemBadge`，可以为表格行配置属性控制显示的条件，表达式中`this`可以取到行所在上下文的数据，比如行数据中有`badgeText`字段才显示角标，可以设置`\"visibleOn\": \"this.badgeText\"`\n\n\n\n## 表格内容高度自适应\n\n> 1.5.0 及以上版本\n\n通过 `autoFillHeight` 可以让表格内容区自适应高度，具体效果请看这个。\n\n它的展现效果是整个内容区域高度自适应，表格内容较多时在内容区域内出滚动条，这样顶部筛选和底部翻页的位置都是固定的。\n\n开启这个配置后会自动关闭 `affixHeader` 功能避免冲突。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ---------------------------------------- | ------------------------- | ------------------------------------------------------------------------- |\n| type | `string` | | `\"type\"` 指定为 table 渲染器 |\n| title | `string` | | 标题 |\n| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |\n| affixHeader | `boolean` | `true` | 是否固定表头 |\n| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 |\n| placeholder | `string` 或者 `SchemaTpl` | `暂无数据` | 当没数据的时候的文字提示 |\n| className | `string` | `panel-default` | 外层 CSS 类名 |\n| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 |\n| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 |\n| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 |\n| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 |\n| columns | `Array<Column>` | | 用来设置列信息 |\n| combineNum | `number` | | 自动合并单元格 |\n| itemActions | Array<> | | 悬浮行操作按钮组 |\n| itemCheckableOn | |\n| itemDraggableOn | |\n| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |\n| rowClassName | `string` | | 给行添加 CSS 类名 |\n| rowClassNameExpr | | | 通过模板给行添加 CSS 类名 |\n| prefixRow | `Array` | | 顶部总结行 |\n| affixRow | `Array` | | 底部总结行 |\n| itemBadge | | | 行角标配置 |\n| autoFillHeight | `boolean` 丨 `{height: number}` | | 内容区域自适应高度 |\n| resizable | `boolean` | `true` | 列宽度是否支持调整 |\n| selectable | `boolean` | `false` | 支持勾选 |\n| multiple | `boolean` | `false` | 勾选 icon 是否为多选样式`checkbox`， 默认为`radio` |\n\n### 列配置属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | --------------------------------------------- | ------ | ---------------- |\n| label | | | 表头文本内容 |\n| name | `string` | | 通过名称关联数据 |\n| width | `number` \\| `string` | | 列宽 |\n| remark | | | 提示信息 |\n| fixed | `left` \\| `right` \\| `none` | | 是否固定当前列 |\n| popOver | | | 弹出框 |\n| copyable | `boolean` 或 `{icon: string, content:string}` | | 是否可复制 |\n","path":"/zh-CN/components/table"},{"title":"Table2 表格","body":"\n表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n\n\n## 可选择\n\n支持单选、多选\n\n### 多选\n\n\n\n### 点击整行选择\n\n\n\n### 已选择\n\n\n\n### 已选择 - 正则表达式\n\n\n\n### 单选\n\n可通过`disableOn`来控制哪一行不可选，不可选情况下会有禁用样式，但如果行内如果有除文字外的其他组件，禁用样式需要自行控制\n\n\n\n### 自定义选择菜单\n\n内置全选`all`、反选`invert`、清空`none`、选中奇数行`odd`、选中偶数行`even`，存在禁止选择的行，不参与计算奇偶数\n\n\n\n### 最大选择个数\n\n可通过设置`maxKeepItemSelectionLength`控制表格可选中的最大个数\n\n\n\n## 筛选和排序\n\n\n\n## 带边框\n\n\n\n## 可展开\n\n支持点击按钮展开/关闭当前行的自定义内容，展开按钮可放在表格的最左侧、最右侧或通过事件动作来触发展开。\n\n### 默认展开\n\n默认模式 展开按钮在表格最左侧\n\n\n\n### 默认展开 - 正则表达式\n\n\n\n### 右侧展开按钮\n\n通过设置`expandable.position`属性为`right`控制，支持 不设置、`left`、`right`、`none`四种情况。\n\n\n\n### 无展开按钮\n\n可设置无展开按钮，通过事件动作展开关闭，可单独行控制\n\n\n\n也可以通过正则表达式一次控制多行展开关闭\n\n\n\n## 表格行/列合并\n\n\n\n## 固定表头\n\n\n\n## 固定列\n\n\n\n## 固定头和列\n\n\n\n## 表头分组\n\n\n\n\n\n## 拖拽排序\n\n支持手动拖动排序\n\n### 默认拖拽排序\n\n\n\n### 嵌套拖拽排序\n\n数据源嵌套情况下，仅允许同层级之间排序\n\n\n\n## 总结栏\n\n### 顶部单行\n\n\n\n### 顶部多行\n\n\n\n### 尾部单行\n\n\n\n### 尾部多行\n\n\n\n## 调整列宽\n\n\n\n## 自定义列\n\n\n\n## 数据为空\n\n\n\n## 数据加载中\n\n\n\n## 树形结构\n\n当行数据中存在 children 属性时，可以自动嵌套显示下去。也可以通过设置 childrenColumnName 进行配置。\n\n### 默认嵌套\n\n\n\n### 多选嵌套\n\n表格支持多选的同时支持级联选中\n\n\n\n### 单选嵌套\n\n单选 不同层级之间都是互斥选择\n\n\n\n### 缩进设置\n\n\n\n## 列搜索\n\n\n\n## 粘性头部\n\n\n\n## 表格尺寸\n\n通过设置 size 属性来控制表格尺寸，支持`large`、`default`、`small`，`default`是中等尺寸\n\n### 最大尺寸\n\n`large`是最大尺寸\n\n\n\n### 默认尺寸\n\n默认尺寸是`default`，即中等尺寸\n\n\n\n### 小尺寸\n\n最小尺寸\n\n\n\n## 可复制\n\n\n\n## 弹出框\n\n可以给列配置上`popOver`属性，默认会在该列内容区里渲染一个图标，点击会显示弹出框，用于展示内容\n\n\n\n也可以设置图标不展示，结合 truncate 实现内容自动省略，其余可点击/悬浮查看更多\n\n\n\n可以给列配置`popOverEnableOn`属性，该属性为表达式，来控制当前行是否启动`popOver`功能\n\n\n\n## 行角标\n\n通过属性`itemBadge`，可以为表格行配置属性控制显示的条件，表达式中`this`可以取到行所在上下文的数据，比如行数据中有`badgeText`字段才显示角标，可以设置`\"visibleOn\": \"this.badgeText\"`\n\n\n\n## 表头提示\n\n通过设置列属性`remark`，可为每一列的表头增加提示信息。\n\n\n\n## 快速编辑\n\n可以通过给列配置：`\"quickEdit\": true`，Table 配置：`quickSaveApi`，可以实现表格内快速编辑并批量保存的功能。\n\n\n\n#### 指定编辑表单项类型\n\n`quickEdit`也可以配置对象形式，可以指定编辑表单项的类型，例如`\"type\": \"select\"`：\n\n\n\n#### 快速编辑多个表单项\n\n\n\n#### 内联模式\n\n配置`quickEdit`的`mode`为`inline`。可以直接将编辑表单项渲染至表格内，可以直接操作编辑。\n\n\n\n#### 即时保存\n\n如果想编辑完表单项之后，不想点击顶部确认按钮来进行保存，而是即时保存当前标记的数据，则需要配置 `quickEdit` 中的 `\"saveImmediately\": true`，然后配置接口`quickSaveItemApi`，可以直接将编辑表单项渲染至表格内操作。\n\n\n\n你也可以在`saveImmediately`中配置 api，实现即时保存\n\n\n\n## 列样式\n\n可以通过设置`columns`中的`className`控制整列样式\n\n\n\n也可以通过`titleClassName`单独控制表头对应单元格的样式\n\n\n\n## 单元格样式\n\n可以通过设置`columns`的`classNameExpr`，根据数据动态添加单元格 CSS 类，支持模版语法\n\n\n\n## 行操作按钮\n\n通过设置`itemActions`可以设置鼠标移动到行上出现操作按钮\n\n\n\n固定表头情况下，展示行操作按钮\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ---------------------------------------- | ------------------------- | ------------------------------------------------------------------------- |\n| type | `string` | | `\"type\"` 指定为 table 渲染器 |\n| title | `string` | | 标题 |\n| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |\n| sticky | `boolean` | `false` | 是否粘性头部 |\n| footer | `string` \\| `Schema` | | 表格尾部 |\n| loading | `boolean` | | 表格是否加载中 |\n| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 |\n| placeholder | `string` \\| `Schema` | `暂无数据` | 当没数据的时候的文字提示 |\n| rowSelection | `rowSelection` | | 行相关配置 |\n| rowClassNameExpr | `string` | | 行 CSS 类名，支持模版语法 |\n| expandable | `Expandable` | | 展开行配置 |\n| lineHeight | `large` \\| `middle` | | 行高设置 |\n| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 |\n| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 |\n| columns | `Array<Column>` | | 用来设置列信息 |\n| combineNum | `number` | | 自动合并单元格 |\n| itemActions | Array<> | | 悬浮行操作按钮组 |\n| itemCheckableOn | |\n| itemDraggableOn | |\n| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |\n| rowClassName | `string` | | 给行添加 CSS 类名 |\n| rowClassNameExpr | | | 通过模板给行添加 CSS 类名 |\n| prefixRow | `Array` | | 顶部总结行 |\n| affixRow | `Array` | | 底部总结行 |\n| itemBadge | | | 行角标配置 |\n| autoFillHeight | `boolean` | | 内容区域自适应高度 |\n\n## 行配置属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ---------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ |\n| type | `checkbox` \\| `radio` | `checkbox` | 指定单选还是多选 |\n| fixed | `boolean` | | 选择列是否固定，只能左侧固定 |\n| keyField | `string` | `key` | 对应数据源的 key 值，默认是`key`，可指定为`id`、`shortId`等 |\n| disableOn | `string` | | 当前行是否可选择条件，要用 |\n| selections | `selections` | | 自定义筛选菜单，内置`all`（全选）、`invert`（反选）、`none`（取消选择）、`odd`（选择奇数项）、`even`（选择偶数项） |\n| selectedRowKeys | `Array<string>` \\| `Array<number>` | | 已选择项 |\n| selectedRowKeysExpr | `string` | | 已选择项正则表达式 |\n| columnWidth | `number` | | 自定义选择列列宽 |\n| rowClick | `boolean` | | 单条任意区域选中 |\n\n### 选择菜单配置属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | ---------------------------------------------- | ------ | ---------------------------------------------------------- |\n| key | `all` \\| `invert` \\| `none` \\| `odd` \\| `even` | `all` | 菜单类型，内置全选、反选、取消选择、选择奇数项、选择偶数项 |\n| text | `string` | | 自定义菜单项文本 |\n\n## 展开行配置属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ---------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------ |\n| expandableOn | `string` | | 指定可展开的行，要用 |\n| keyField | `string` | `key` | 对应数据源的 key 值，默认是`key`，可指定为`id`、`shortId`等 |\n| disableOn | `string` | | 当前行是否可选择条件，要用 |\n| selections | `selections` | | 自定义筛选菜单，内置`all`（全选）、`invert`（反选）、`none`（取消选择）、`odd`（选择奇数项）、`even`（选择偶数项） |\n| selectedRowKeys | `Array<string>` \\| `Array<number>` | | 已选择项 |\n| selectedRowKeysExpr | `string` | | 已选择项正则表达式 |\n| columnWidth | `number` | | 自定义选择列列宽 |\n\n## 列配置属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------------------------------------------- | ------- | ---------------- |\n| label | | | 表头文本内容 |\n| name | `string` | | 通过名称关联数据 |\n| fixed | `left` \\| `right` \\| `none` | | 是否固定当前列 |\n| popOver | | | 弹出框 |\n| quickEdit | | | 快速编辑 |\n| copyable | `boolean` 或 `{icon: string, content:string}` | | 是否可复制 |\n| sortable | `boolean` | `false` | 是否可排序 |\n| searchable | `boolean` \\| `Schema` | `false` | 是否可快速搜索 |\n| width | `number` \\| `string` | 列宽 |\n| remark | | | 提示信息 |\n","path":"/zh-CN/components/table2"},{"title":"Tabs 选项卡","body":"\n选项卡容器组件。\n\n## 基本用法\n\n\n\n默认想要显示多少选项卡配置多少个 `tabs` 成员即可。但是有时候你可能会想根据某个数据来动态生成。这个时候需要额外配置 `source` 属性如。\n\n\n\n## 拖拽排序\n\n\n\n## 可增加、删除\n\n`tab` 设置的 `closable` 优先级高于整体。使用 `addBtnText` 设置新增按钮文案\n\n\n\n## 可编辑标签名\n\n双击标签名，可开启编辑\n\n\n\n## 可禁用\n\n\n\n## 显示提示\n\n\n\n## 作为表单项的值\n\n如果在表单里给 tabs 配置了 name，它可以作为一个表单提交项的值，默认情况下会取 title\n\n\n\n如果不想使用 title，可以给每个 tab 设置 value，这样就会取这个 value 作为表单项的值\n\n\n\n## 展示模式\n\n### 简约\n\n\n\n### 加强\n\n\n\n### 线型\n\n\n\n### 卡片\n\n\n\n### 仿 Chrome\n\n仿 Chrome tab 样式\n\n\n\n### 水平铺满\n\n\n\n### 选择器型\n\n\n\n### 垂直\n\n\n\n### 侧边栏模式\n\n使用 `sidePosition` 设置标签栏位置。\n\n\n\n## 配置顶部工具栏\n\n配置`toolbar`实现顶部工具栏。\n\n\n\n## 配置 hash\n\n可以在单个`tab`下，配置`hash`属性，支持地址栏`#xxx`。\n\n\n\n## 默认显示某个选项卡\n\n主要配置`activeKey`属性来实现该效果，共有下面两种方法：\n\n#### 配置 hash 值\n\n支持变量，如 `\"tab${id}\"`\n\n\n\n#### 配置索引值\n\n单个`tab`上不要配置`hash`属性，配置需要展示的`tab`索引值，`0`代表第一个。支持变量，如`\"${id}\"`\n\n\n\n### 动态设置选项卡\n\n\n\n## 图标\n\n通过 icon 可以设置 tab 的图标，可以是 fontawesome 或 URL 地址。\n\n\n\n## 配置超出折叠\n\n通过配置 `collapseOnExceed` 可以用来实现超出折叠，额外还能通过 `collapseBtnLabel` 配置折叠按钮的文字\n\n\n\n## mountOnEnter\n\n只有在点击卡片的时候才会渲染，在内容较多的时候可以提升性能，但第一次点击的时候会有卡顿。\n\n## unmountOnExit\n\n如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`\"unmountOnExit\": true`。\n\n## 监听切换事件\n\n\n\n会传递 key 参数和 props\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------- | --------------------------------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"tabs\"` | 指定为 Tabs 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| tabsMode | `string` | | 展示模式，取值可以是 `line`、`card`、`radio`、`vertical`、`chrome`、`simple`、`strong`、`tiled`、`sidebar` |\n| tabsClassName | `string` | | Tabs Dom 的类名 |\n| tabs | `Array` | | tabs 内容 |\n| source | `string` | | tabs 关联数据，关联后可以重复生成选项卡 |\n| toolbar | | | tabs 中的工具栏 |\n| toolbarClassName | `string` | | tabs 中工具栏的类名 |\n| tabs[x].title | `string` | | Tab 标题 |\n| tabs[x].icon | `icon` | | Tab 的图标 |\n| tabs[x].iconPosition | `left` / `right` | `left` | Tab 的图标位置 |\n| tabs | | 内容区 |\n| tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 |\n| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |\n| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 |\n| tabs[x].className | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | Tab 区域样式 |\n| tabs[x].closable | `boolean` | false | 是否支持删除，优先级高于组件的 `closable` |\n| tabs[x].disabled | `boolean` | false | 是否禁用 |\n| mountOnEnter | `boolean` | false | 只有在点中 tab 的时候才渲染 |\n| unmountOnExit | `boolean` | false | 切换 tab 的时候销毁 |\n| addable | `boolean` | false | 是否支持新增 |\n| addBtnText | `string` | 增加 | 新增按钮文案 |\n| closable | `boolean` | false | 是否支持删除 |\n| draggable | `boolean` | false | 是否支持拖拽 |\n| showTip | `boolean` | false | 是否支持提示 |\n| showTipClassName | `string` | `'' ` | 提示的类 |\n| editable | `boolean` | false | 收否可编辑标签名 |\n| scrollable | `boolean` | true | 是否导航支持内容溢出滚动。（属性废弃） |\n| sidePosition | `left` / `right` | `left` | `sidebar` 模式下，标签栏位置 |\n| collapseOnExceed | `number` | | 当 tabs 超出多少个时开始折叠 |\n| collapseBtnLabel | `string` | `more` | 用来设置折叠按钮的文字 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------- | ---------------- |\n| change | `[name]: number \\| string` 选项卡索引 | 切换选项卡时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| --------------- | ---------------------------------------- | ---------------- |\n| changeActiveKey | `activeKey: number \\| string` 选项卡索引 | 激活指定的选项卡 |\n","path":"/zh-CN/components/tabs"},{"title":"Tag 标签","body":"\n用于标记和选择的标签\n\n## 基本用法\n\n\n\n## 不同的模式\n\n\n\n## 标签颜色\n\n标签有几种预设的色彩样式，可以通过设置color属性为active、inactive、error、success、iprocessing、warning用作不同场景使用。如果预设值不能满足需求，可以设置为具体的色值\n\n\n\n\n## 自定义样式\n\n可以通过 style 来控制背景、边框及文字颜色。如下\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ------------------------------------------------------------------------------------------ | ---------- | ------------------------------------------ |\n| displayMode | `'normal' \\| 'rounded' \\| 'status'` | `normal` | 展现模式 |\n| color | `'active' \\| 'inactive' \\| 'error' \\| 'success' \\| 'processing' \\| 'warning' \\| 具体色值 ` | | 颜色主题，提供默认主题，并支持自定义颜色值 |\n| label | `string` | `-` | 标签内容 |\n| icon | `SchemaIcon` | `dot 图标` | status 模式下的前置图标 |\n| className | `string` | | 自定义 CSS 样式类名 |\n| style | `object` | {} | 自定义样式（行内样式），优先级最高 |\n","path":"/zh-CN/components/tag"},{"title":"Tasks 任务操作集合","body":"\n任务操作集合，类似于 orp 上线。\n\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | --------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"tasks\"` | 指定为 Tasks 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| tableClassName | `string` | | table Dom 的类名 |\n| items | `Array` | | 任务列表 |\n| items[x].label | `string` | | 任务名称 |\n| items[x].key | `string` | | 任务键值，请唯一区分 |\n| items[x].remark | `string` | | 当前任务状态，支持 html |\n| items[x].status | `string` | | 任务状态： 0: 初始状态，不可操作。1: 就绪，可操作状态。2: 进行中，还没有结束。3：有错误，不可重试。4: 已正常结束。5：有错误，且可以重试。 |\n| checkApi | | | 返回任务列表，返回的数据请参考 items。 |\n| submitApi | | | 提交任务使用的 API |\n| reSubmitApi | | | 如果任务失败，且可以重试，提交的时候会使用此 API |\n| interval | `number` | `3000` | 当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3s。 |\n| taskNameLabel | `string` | 任务名称 | 任务名称列说明 |\n| operationLabel | `string` | 操作 | 操作列说明 |\n| statusLabel | `string` | 状态 | 状态列说明 |\n| remarkLabel | `string` | 备注 | 备注列说明 |\n| btnText | `string` | 上线 | 操作按钮文字 |\n| retryBtnText | `string` | 重试 | 重试操作按钮文字 |\n| btnClassName | `string` | `btn-sm btn-default` | 配置容器按钮 className |\n| retryBtnClassName | `string` | `btn-sm btn-danger` | 配置容器重试按钮 className |\n| statusLabelMap | `array` | `[\"label-warning\", \"label-info\", \"label-success\", \"label-danger\", \"label-default\", \"label-danger\"]` | 状态显示对应的类名配置 |\n| statusTextMap | `array` | `[\"未开始\", \"就绪\", \"进行中\", \"出错\", \"已完成\", \"出错\"]` | 状态显示对应的文字显示配置 |\n\n\n","path":"/zh-CN/components/tasks"},{"title":"Timeline 时间轴","body":"\n时间轴组件\n\n## 基本用法\n\n\n\n## 时间轴节点颜色设置\n\n\n\n## 时间轴节点图标设置\n\n\n\n## 节点标题自定义\n\n\n\n## 设置节点数据倒序\n\n\n\n## 设置时间轴方向\n\n\n\n## 设置文字相对时间轴方向（时间轴横向时不支持）\n### 文字位于时间轴左侧\n\n\n\n### 文字交替位于时间轴两侧\n\n\n\n### 文字位于时间轴右侧\n\n\n\n## 远程数据\n\n\n\n\"source\": \"/api/mock2/timeline/timelineItems\",\n\n远程拉取接口时，返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外，必须用\"items\"作为时间轴数据的 key 值，如下：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------- |\n| type | `string` | | `\"timeline\"` 指定为 时间轴 渲染器 |\n| items | Array<> | [] | 配置节点数据 |\n| source | | | 数据源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |\n| mode | `left` \\| `right` \\| `alternate` | `right` | 指定文字相对于时间轴的位置，仅 direction=vertical时支持 |\n| direction | `vertical` \\| `horizontal` | `vertical` | 时间轴方向 | | \n| reverse | `boolean` | `false` | 根据时间倒序显示\n\n### timeline.item\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ----------------------------------------------------- | ------ | --------------------------------------- |\n| time | `string ` | | 节点时间 |\n| title | `string \\| ` | | 节点标题 |\n| detail | `string` | | 节点详细描述（折叠） |\n| detailCollapsedText | `string` | `展开` | 详细内容折叠时按钮文案 |\n| detailExpandedText | `string` | `折叠` | 详细内容展开时按钮文案 |\n| color | `string \\| level样式（info、success、warning、danger）` | `#DADBDD` | 时间轴节点颜色 |\n| icon | `string` | | icon 名，支持 fontawesome v4 或使用 url（优先级高于color） |\n","path":"/zh-CN/components/timeline"},{"title":"Toast 轻提示","body":"\n## 基本用法\n\n\n\n## 设置位置\n\n\n\n## 不展示关闭按钮\n\n\n\n## 关闭图标展示\n\n\n\n## 持续时间设置\n\n\n\n## 带标题的提示\n\n\n\n## 提示单独设置不同的类型\n\n\n\n## 提示单独设置不同的位置\n\n\n\n## 提示单独设置是否展示关闭按钮\n\n\n\n## 提示单独设置不同的持续时间\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ------------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |\n| actionType | `string` | `\"toast\"` | 指定为 toast 轻提示组件 |\n| items | `Array<ToastItem>` | `[]` | 轻提示内容 |\n| position | `string` | `top-center（移动端为center）` | 提示显示位置，可用'top-right'、'top-center'、'top-left'、'bottom-center'、'bottom-left'、'bottom-right'、'center' |\n| closeButton | `boolean` | `false` | 是否展示关闭按钮，移动端不展示 |\n| showIcon | `boolean` | `true` | 是否展示图标 |\n| timeout | `number` | `5000（error类型为6000，移动端为3000）` | 持续时间 |\n\n## ToastItem 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ---------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |\n| title | `string \\| SchemaNode` | | 标题 |\n| body | `string \\| SchemaNode` | | 内容 |\n| level | `string` | `info` | 展示图标，可选'info'、'success'、'error'、'warning' |\n| position | `string` | `top-center（移动端为center）` | 提示显示位置，可用'top-right'、'top-center'、'top-left'、'bottom-center'、'bottom-left'、'bottom-right'、'center' |\n| closeButton | `boolean` | `false` | 是否展示关闭按钮 |\n| showIcon | `boolean` | `true` | 是否展示图标 |\n| timeout | `number` | `5000（error类型为6000，移动端为3000）` | 持续时间 |\n","path":"/zh-CN/components/toast"},{"title":"TooltipWrapper 文字提示容器","body":"\n## 基本配置\n\n当用户鼠标悬停或者点击元素时，显示文字提示浮层，`title`可以为浮层添加标题。\n\n\n\n`body`支持传入多个子元素：\n\n\n\n## 提示位置\n\n提供四种不同方向的展示方式：`'top' | 'left' | 'right' | 'bottom'`。\n\n\n\n## 位置偏移\n\n组件提供了关于相对提示位置的垂直、水平位置上的偏移，默认[0, 0]。\n\n\n\n## 展示箭头\n\n`showArrow` 为 `false` 不展示箭头。\n\n\n\n## 主题色\n\n组件提供了两个不同的主题：`dark` 和 `light`，默认使用`light`。\n\n\n\n## 延迟打开&关闭\n\n`mouseEnterDelay` 为延迟展示, `mouseLeaveDelay` 为延迟隐藏，\n\n\n\n## 动态文案\n\n`content` 和 `title` 支持变量映射，可以从上下文中动态获取提示文案。\n\n\n\n## 内联展示\n\n设置`\"inline\": true`使容器内联展示\n\n\n\n## 自定义样式\n\n使用`style`控制内容区样式，`tooltipStyle`控制浮层区样式\n\n\n\n## 自定义包裹标签\n\n使用`wrapperComponent`修改标签名，可以让容器使用其他标签渲染：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------------------------------------- | ------------------- | ---------------------------------------------- |\n| type | `string` | `\"tooltip-wrapper\"` | 指定为文字提示容器组件 |\n| title | `string` | `\"\"` | 文字提示标题 |\n| content | `string` | `\"\"` | 文字提示内容, 兼容之前的 tooltip 属性 |\n| placement | `\"top\" \\| \"left\" \\| \"right\" \\| \"bottom\" ` | `\"top\"` | 文字提示浮层出现位置 |\n| tooltipTheme | `\"light\" \\| \"dark\"` | `\"light\"` | 主题样式， 默认为 light |\n| offset | `[number, number]` | `[0, 0]` | 文字提示浮层位置相对偏移量，单位 px |\n| showArrow | `boolean` | `true` | 是否展示浮层指向箭头 |\n| enterable | `boolean` | `true` | 是否鼠标可以移入到浮层中 |\n| disabled | `boolean` | `false` | 是否禁用浮层提示 |\n| trigger | `\"hover\" \\| \"click\" \\| \"focus\" \\| Array<\"hover\" \\| \"click\" \\| \"focus\">` | `\"hover\"` | 浮层触发方式，支持数组写法`[\"hover\", \"click\"]` |\n| mouseEnterDelay | `number` | `0` | 浮层延迟展示时间，单位 ms |\n| mouseLeaveDelay | `number` | `300` | 浮层延迟隐藏时间，单位 ms |\n| rootClose | `boolean` | `true` | 是否点击非内容区域关闭提示 |\n| inline | `boolean` | `false` | 内容区是否内联显示 |\n| wrapperComponent | `string` | `\"div\" \\| \"span\"` | 容器标签名 |\n| body | | - | 内容容器 |\n| style | `Object` \\| `string` | | 内容区自定义样式 |\n| tooltipStyle | `Object` \\| `string` | | 浮层自定义样式 |\n| className | `string` | | 内容区类名 |\n| tooltipClassName | `string` | | 文字提示浮层类名 |\n","path":"/zh-CN/components/tooltip-wrapper"},{"title":"Tpl 模板","body":"\n输出 的常用组件\n\n## 基本用法\n\n\n\n更多模板相关配置请看\n\n## 快速编辑\n\n通过 `quickEdit` 开启快速编辑功能，比如\n\n\n\n其他配置项参考 \n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ------------------------------------ | ------- | -------------------------------------------- |\n| type | `string` | `\"tpl\"` | 指定为 Tpl 组件 |\n| className | `string` | | 外层 Dom 的类名 |\n| tpl | | | 配置模板 |\n| showNativeTitle | `boolean` | | 是否设置外层 DOM 节点的 title 属性为文本内容 |\n","path":"/zh-CN/components/tpl"},{"title":"Video 视频","body":"\n## 基本用法\n\n\n\n## flv 和 hls 直播\n\n需要设置 `isLive: true`，目前 flv 和 hls 是通过文件后缀来判断的，还可以通过设置 videoType 来指定，它有两个值：\n\n- `video/x-flv`，使用 播放 flv\n- `application/x-mpegURL`，使用 播放 hls 格式\n\n## 视频帧切换功能\n\n可以定义一组视频帧，渲染的时候会列出来这些帧，点击的时候会自动跳转到对应位置开始播放。\n\n\n\n可以设置帧图片如果有的话，这个示例偷懒直接用封面了。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | --------- | --------- | ------------------------------------------------------------------------- |\n| type | `string` | `\"video\"` | 指定为 video 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| src | `string` | | 视频地址 |\n| isLive | `boolean` | false | 是否为直播，视频为直播时需要添加上，支持`flv`和`hls`格式 |\n| videoType | `string` | | 指定直播视频格式 |\n| poster | `string` | | 视频封面地址 |\n| muted | `boolean` | | 是否静音 |\n| autoPlay | `boolean` | | 是否自动播放 |\n| rates | `array` | | 倍数，格式为`[1.0, 1.5, 2.0]` |\n| frames | `object` | | key 是时刻信息，value 可以可以为空，可有设置为图片地址，请看上方示例 |\n| jumpBufferDuration | `boolean` | | 点击帧的时候默认是跳转到对应的时刻，如果想提前 3 秒钟，可以设置这个值为 3 |\n| stopOnNextFrame | `boolean` | | 到了下一帧默认是接着播放，配置这个会自动停止 |\n","path":"/zh-CN/components/video"},{"title":"Web Component","body":"\n专门用来渲染 web component 的组件，可以通过这种方式来扩展 amis 组件，比如使用 Angular。\n\n## 基本用法\n\n比如下面这个 web component\n\n\n\n对应代码类似\n\n```javascript\nimport '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';\n\nclass RandomNumber extends HTMLElement {\n connectedCallback() {\n const prefix = this.getAttribute('prefix') || '';\n const shadow = this.attachShadow({mode: 'open'});\n const text = document.createElement('span');\n text.textContent = `${prefix}: ${Math.floor(Math.random() * 1000)}`;\n shadow.appendChild(text);\n setInterval(function () {\n const count = `${prefix}: ${Math.floor(Math.random() * 1000)}`;\n text.textContent = count;\n }, 2000);\n }\n}\n\ncustomElements.define('random-number', RandomNumber);\njson\n{\n \"type\": \"web-component\",\n \"tag\": \"random-number\",\n \"props\": {\n \"prefix\": \"hello\",\n \"class\": \"my-class\"\n }\n}\n```\n\n其中 `tag` 指定标签，属性放在 `props` 对象里，props 里的值支持变量替换，比如：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | ----------------------------------------- | ----------------- | ----------------------------- |\n| type | `string` | `\"web-component\"` | 指定为 web-component 渲染器 |\n| tag | `string` | | 具体使用的 web-component 标签 |\n| props | `object` | | 标签上的属性 |\n| body | | | 子节点 |\n","path":"/zh-CN/components/web-component"},{"title":"Wizard 向导","body":"\n表单向导，能够配置多个步骤引导用户一步一步完成表单提交。\n\n## 基本使用\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ---------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"wizard\"` | 指定为 `Wizard` 组件 |\n| mode | `string` | `\"horizontal\"` | 展示模式，选择：`horizontal` 或者 `vertical` |\n| api | | | 最后一步保存的接口。 |\n| initApi | | | 初始化数据接口 |\n| initFetch | | | 初始是否拉取数据。 |\n| initFetchOn | | | 初始是否拉取数据，通过表达式来配置 |\n| actionPrevLabel | `string` | `上一步` | 上一步按钮文本 |\n| actionNextLabel | `string` | `下一步` | 下一步按钮文本 |\n| actionNextSaveLabel | `string` | `保存并下一步` | 保存并下一步按钮文本 |\n| actionFinishLabel | `string` | `完成` | 完成按钮文本 |\n| className | `string` | | 外层 CSS 类名 |\n| actionClassName | `string` | `btn-sm btn-default` | 按钮 CSS 类名 |\n| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |\n| redirect | | `3000` | 操作完后跳转。 |\n| target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 |\n| steps | Array<> | | 数组，配置步骤信息 |\n| startStep | `string` | `1` | 起始默认值，从第几步开始。可支持模版，但是只有在组件创建时渲染模版并设置当前步数，在之后组件被刷新时，当前 step 不会根据 startStep 改变 |\n\n### step\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | ---------------------------------------- | ------ | ------------------------------------------------------------------------------------------ |\n| title | `string` | | 步骤标题 |\n| mode | `string` | | 展示默认，跟 中的模式一样，选择： `normal`、`horizontal`或者`inline`。 |\n| horizontal | `Object` | | 当为水平模式时，用来控制左右占比 |\n| horizontal.label | `number` | | 左边 label 的宽度占比 |\n| horizontal.right | `number` | | 右边控制器的宽度占比。 |\n| horizontal.offset | `number` | | 当没有设置 label 时，右边控制器的偏移量 |\n| api | | | 当前步骤保存接口，可以不配置。 |\n| initApi | | | 当前步骤数据初始化接口。 |\n| initFetch | `boolean` | | 当前步骤数据初始化接口是否初始拉取。 |\n| initFetchOn | | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 |\n| body | Array<。 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据，详细请查看。\n\n> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------------- | ------------------------------------------------------------------------------------------------ | ---------------------------- |\n| inited | `event.data: object` initApi 远程请求返回的初始化数据<br/>`[name]: any` 当前数据域中指定字段的值 | 远程初始化接口请求成功时触发 |\n| stepChange | `step: number` 步骤索引 | 切换步骤时触发 |\n| change | `event.data: object` 当前表单数据<br/>`[name]: any` 当前数据域中指定字段的值 | 表单值变化时触发 |\n| stepSubmitSucc | - | 单个步骤提交成功 |\n| stepSubmitFail | `error: object` 单个步骤 api 远程请求失败后返回的错误信息 | 单个步骤提交失败 |\n| finished | `event.data: object` 即将提交的表单数据<br/>`[name]: any` 当前数据域中指定字段的值 | 最终提交时触发 |\n| submitSucc | `result: object` api 远程请求成功后返回的结果数据 | 最终提交成功时触发 |\n| submitFail | `error: object` api 远程请求失败后返回的错误信息 | 最终提交失败时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| ----------- | -------------------------- | ---------------------------------------- |\n| submit | - | 全部提交 |\n| step-submit | - | 分步提交 |\n| next | - | 下一步 |\n| prev | - | 上一步 |\n| goto-step | `step: number` 目标步骤 | 定位步骤 |\n| reload | - | 重新加载，调用 `intiApi`，刷新数据域数据 |\n| setValue | `value: object` 更新的数据 | 更新数据 |\n","path":"/zh-CN/components/wizard"},{"title":"Wrapper 包裹容器","body":"\n简单的一个包裹容器组件，相当于用 div 包含起来，最大的用处是用来配合 css 进行布局。\n\n## 基本用法\n\n\n\n> 上面例子中的 `\"className\": \"b\"` 是为了增加边框，不然看不出来。\n\n## 动态获取\n\n直接返回一个对象\n\n\n\n返回变量\n\n\n\n## 不同内边距\n\n通过配置`size`属性，可以调整内边距\n\n\n\n## style\n\n> 1.1.5 版本\n\nwrapper 可以设置 style，当成一个 `div` 标签来用\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ----------------------------------------- | ----------- | ---------------------------- |\n| type | `string` | `\"wrapper\"` | 指定为 Wrapper 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| size | `string` | | 支持: `xs`、`sm`、`md`和`lg` |\n| style | `Object` \\| `string` | | 自定义样式 |\n| body | | | 内容容器 |\n","path":"/zh-CN/components/wrapper"},{"title":"行为","body":"\n页面的交互操作，例如：**提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板**等等操作，都可以视作页面的一种**行为**。\n\n在 amis 中，大部分 **行为** 是跟 **行为按钮组件** 进行绑定的，也就是说，当你想要配置一个行为，大部分情况下你应该遵循下面的步骤：\n\n1. 添加一个 **行为按钮组件**；\n2. 配置当前 **行为类型（actionType）**；\n3. 根据当前行为类型，配置你想要的 **属性**。\n\n## 如何配置行为？\n\n### 通过行为按钮\n\n\n\n1. 在`page`内容区中，添加一个`action`行为按钮组件\n2. 配置当前行为类型是 ajax（即发送一个 ajax 请求)\n3. 配置请求 api，值为 API 类型\n\n现在点击该按钮，你会发现浏览器发出了这个`ajax`请求。\n\n很简单是吧？我们再来一个例子：\n\n\n\n这次我们配置`actionType`为`dialog`，意味着点击该按钮会弹出一个模态框，并配置`dialog`内容，来显示字符串`Hello World!`\n\n> `dialog`是容器，也就意味着可以在`body`属性中配置其他组件\n\n完整的行为列表可以查看 组件\n\n### 组件所支持的行为\n\n一些特殊组件，例如 Chart 组件 中的图表点击行为，可以直接配置`clickAction`，来配置行为对象。\n","path":"/zh-CN/docs/concepts/action"},{"title":"数据映射","body":"\n数据映射支持用户通过`${xxx}`或`$xxx`获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 `api` 请求数据体格式等场景。\n\n## 模板字符串\n\n\n\n**tip：** 默认 amis 在解析模板字符串时，遇到`$`字符会尝试去解析该变量并替换改模板变量，如果你想输出纯文本`\"${xxx}\"`或`\"$xxx\"`，那么需要在`$`前加转义字符`\"\\\\\"`，即`\"\\\\${xxx}\"`\n\n\n\n## 支持链式取值\n\n可以使用`.`进行链式取值\n\n\n\n## 自定义 api 请求体数据格式\n\n在表单提交接口时，amis 默认的请求体数据格式可能不符合你的预期，不用担心，你可以使用数据映射定制想要的数据格式：\n\n查看下面这种场景：\n\n\n\n当输入姓名：`rick` 和邮箱：`rick@gmail.com` 后，`form` 获取当前的数据域，提交后端接口的数据格式应该是这样的：\n\n\n\n遗憾的是，你的后端接口只支持的如下的输入数据结构，且无法修改：\n\n\n\n这时，除了直接更改你的 姓名表单项 和 邮箱表单项 的`name`属性为相应的字段以外，你可以配置`api`的`data`属性，使用**数据映射**轻松实现**数据格式的自定义：**\n\n\n\n你可以查看网络面板，发送给后端接口的数据体应该已经成功修改为：\n\n\n\n## 复杂配置\n\n### 展开所配置的数据\n\n可以使用`\"&\"`，作为数据映射 key，展开所配置的变量，例如：\n\n下面例子中，我们想在提交的时候，除了提交 `name` 和 `email` 变量以外，还想添加 `c` 下面的所有变量 `e`,`f`,`g`，但是按照之前所讲的， api 应该这么配置：\n\n\n\n点击提交查看网络面板数据，你会发现数据是符合预期的：\n\n\n\n但是当变量字段过多的时候，你需要一一映射配置，也许有点麻烦，所以可以使用`\"&\"`标识符，来展开所配置变量：\n\n\n\n上例中我们 api.data 配置如下：\n\n\n\n`\"&\"`标识符会将所配置的`c`变量的`value`值，展开并拼接在`data`中。查看网络面板可以看到数据如下：\n\n\n\n### 数组提取值\n\n\n\n上例中的`api`的`data`配置格式如下：\n\n\n\n这个配置的意思是，只提取`table`数组中的`a`变量和`c`变量，组成新的数组，赋值给`items`变量\n\n点击提交，查看浏览器网络面板可以发现，表单的提交数据结构如下：\n\n\n\n### namespace\n\n> since 1.1.6\n\n默认取值都是从当前组件上下文数据链中取数据，但是有些数据可能不在这个数据链中，比如有些数据存在全局变量，有的数据存在 localstorage 中。\n\n从 1.1.6 版本开始，支持了一种新的语法如：`${window:document.title}` 意思是从全局变量中取页面的标题。\n\n目前有以下三种 namespace\n\n- `window` 即全局变量\n- `ls` 即 localStorage， 如果值是 json 对象，可以直接当对象用比如：`${ls:xxxxxlocalStrorageKey.xxxx}`\n- `ss` 即 sessionStorage，同上。\n\n\n\n## 过滤器\n\n1.5.0 开始，更推荐用函数调用的语法来写，如 `${xxx | html}` 改用 `${html(xxx)}`。具体请查看\n\n过滤器是对数据映射的一种增强，它的作用是对获取数据做一些处理，基本用法如下：\n\n\n\n下面我们会逐一介绍每一个过滤器的用法。\n\n> 过滤器可以 \n\n### html\n\n用于显示 html 文本。\n\n##### 基本用法\n\n\n\n\n\n### raw\n\n不同场景下，在使用数据映射时，amis 可能默认会使用`html`过滤器对数据进行转义显示，这时如果想要输出原始文本，请配置`raw`过滤器。\n\n##### 基本用法\n\n使用`raw`可以直接输出原始文本\n\n\n\n\n\n> **注意！！！**\n>\n> `raw`过滤器虽然支持显示原始文本，也就意味着可以输出 HTML 片段，但是动态渲染 HTML 是非常危险的，容易导致 **XSS** 攻击。\n>\n> 因此在 使用`raw`过滤器的时候，请确保变量的内容可信，且永远不要渲染用户填写的内容。\n\n### json\n\n用于将数据转换为`json`格式字符串\n\n##### 基本用法\n\n\n\n\n\n##### 指定缩进数\n\n\n\n### toJson\n\n与相反，用于将`json`格式的字符串，转换为`javascript`对象\n\n\n\n\n\n对`Javascript`的直接输出会显示` 来格式化显示`json`文本。\n\n### toInt\n\n字符串转整形数字，如果目标数据不是字符串则不处理。\n\n\n\n### toFloat\n\n字符串转浮点数字，如果目标数据不是字符串则不处理。\n\n\n\n### date\n\n日期格式化过滤器，用于把特定时间值按指定格式输出。\n\n##### 基本用法\n\n\n\n- **format**：需要展示的格式，默认为`LLL`，即本地化时间格式\n- **inputFormat**：指定该变量值的格式，默认为`X`，即时间戳秒，具体参数的配置需要参考 ，下面是其它几种常见的格式：\n - `x`，毫秒\n - `YYYY-MM-DDTHH:mm:ssZ`，ISO8601 格式，其中 YYYY 是年，MM 是月，DD 是日，HH 是小时，mm 是分钟，ss 是秒\n\n\n\n\n\n##### 配置输出格式\n\n例如你想将某一个时间值，以 `2020-04-14` 这样的格式输出，那么查找 moment 文档可知配置格式应为 `YYYY-MM-DD`，即：\n\n\n\n##### 配置数据格式\n\n如果你的数据值默认不是`X`格式（即时间戳格式），那么需要配置`inputformat`参数用于解析当前时间值，例如：\n\n\n\n> **注意：** 在过滤器参数中使用`:`字符，需要在前面加`\\\\`转义字符\n\n### now\n\n返回当前时间，注意这个是个过滤函数，不是变量，所以这个其实会导致前面的变量选择没有意义。\n\n用法：\n\n\n\n### toDate\n\n将日期字符串转成日期对象, 第二个参数为字符串的日期格式类型。\n\n用法：\n\n\n\n### dateModify\n\n日期修改，将输入的日期对象修改后返回新的日期对象，支持四种操作符。\n\n- `add` 加 n （秒|分钟|小时|天|月|季度|年）。\n- `subtract` 减 n （秒|分钟|小时|天|月|季度|年）。\n- `startOf` 修改成某个维度的开头。\n- `endOf` 修改成某个纬度的结尾。\n\n比如：\n\n将 xxx 修改成 7 天前，假如值是 10 月 8 号，那么处理完后就是 10 月 1 号。\n\n\n\n来个高级点的，比如我想返回个上个月开头的第一天。\n\n\n\n### fromNow\n\n> 1.4.0 及以上版本\n\n显示日期和现在的相对时间\n\n\n\n可以设置日期数据的格式，比如 X 是秒，其它格式细节参考 。\n\n\n\n### number\n\n自动给数字加千分位。\n\n##### 基本用法\n\n\n\n\n\n### trim\n\n把变量值前后多余的空格去掉。\n\n##### 基本用法\n\n\n\n### percent\n\n##### 基本用法\n\n\n\n- **decimals**：指定小数点后`n`位数，默认为`0`\n\n\n\n##### 指定小数点后位数\n\n\n\n### round\n\n四舍五入取整\n\n\n\n- **decimals**：指定小数点后`n`位小数，默认为`2`\n\n\n\n##### 指定小数点后位数\n\n\n\n### truncate\n\n当超出若干个字符时，后面的部分直接显示某串字符\n\n##### 基本用法\n\n\n\n- **length**：指定多长的字符后省略，默认为`200`\n- **mask**：省略时显示的字符，默认为`\"...\"`\n\n\n\n### url_encode\n\n效果同 \n\n##### 基本用法\n\n\n\n### url_decode\n\n效果同 ，注意从`2.3.0`版本开始，不合法的输入会被转化为`undefined`。\n\n##### 基本用法\n\n\n\n### default\n\n当变量值为空时，显示其他值代替。\n\n##### 基本用法\n\n\n\n- **defaultValue**：显示的默认值\n\n\n\n### split\n\n可以将字符传通过分隔符分离成数组\n\n##### 基本用法\n\n\n\n- **delimiter**：分隔值，默认为`,`\n\n\n\n### join\n\n当变量值是数组时，可以把内容连接起来。\n\n##### 基本用法\n\n\n\n- **glue**：连接符，默认为`空字符`\n\n\n\n##### 配置连接符\n\n\n\n### sortBy\n\n对目标数组进行排序。\n\n- **key** 字段名，可以是数字，支持层级。\n- **method** 排序方式 `alpha` 或者 `numerical`\n- **dir** 排序方式 `desc` 或者 `asc`\n\n如：`${list|sortBy:value:numerical:desc}` 让 list 按 value 字段的数值倒序。\n\n### topAndOther\n\n取前多少个，剩下的归位一组比如：`${list|topAndOther:10:name:Others}`\n\n对数组分为 10 组，前面 9 组分别拿前 9 个，最后一组将剩下的归为一组，并对每项做数字累加。\n\n- **len** 分多少组\n- **labelField** 默认为 `name`\n- **restLabel** 默认为`其他`。\n\n### unique\n\n对目标数组进行去重。\n\n- **key** 可选，不指定属性则直接对整个成员进行去重。\n\n如：`${items|unique:name}` 返回一个新数组，并且对成员属性 name 进行了去重。\n\n### first\n\n获取数组中的第一个值\n\n##### 基本用法\n\n\n\n\n\n### last\n\n获取数组中的最后一个值\n\n##### 基本用法\n\n\n\n\n\n### nth\n\n获取数组中的第`n`个值\n\n##### 基本用法\n\n\n\n- **nth**：指定获取第几个值\n\n\n\n**注意：** nth 配置`0`为获取第一个元素。\n\n### pick\n\n获取对象或数组中符合条件的筛选值\n\n##### 基本用法\n\n\n\n- **path:** 指定筛选的模板，默认为`&`，即返回原数据\n\n##### 在对象中获取某个 key 值\n\n\n\n##### 遍历对象数组获取指定值\n\n\n\n##### 遍历数组对象，并自定义 key\n\n\n\n可以用变量 index 来获取下标。\n\n### objectToArray\n\n对象转换为数组\n\n- key: 对象的键转换之后的字段名，默认是'label'\n- value: 对象的值转换之后的字段名，默认是'value'\n\n\n\n\n\n\n\n### plus\n\n加法运算比如加 2\n\n\n\n还可以是另一个变量，比如\n\n\n\n\n\n下面的减法乘法和除法也都支持变量\n\n### minus\n\n减法运算比如减 2\n\n\n\n### times\n\n乘法运算\n\n\n\n### division\n\n除法运算\n\n\n\n### sum\n\n求和，通常操作对象是个数组，比如想把数组中成员对象字段 cost 中的数值求和。\n\n\n\n### abs\n\n变成正数。\n\n\n\n### duration\n\n秒值格式化成时间格式\n\n##### 基本用法\n\n\n\n\n\n### bytes\n\n字节格式化展示\n\n##### 基本用法\n\n\n\n\n\n### asArray\n\n将数据包成数组\n\n##### 基本用法\n\n\n\n\n\n### lowerCase\n\n将字符串转小写\n\n##### 基本用法\n\n\n\n\n\n### upperCase\n\n将字符串转大写\n\n##### 基本用法\n\n\n\n\n\n### substring\n\n> 1.5.0 及以上版本\n\n取字符串的一部分，第一个参数是起始，第二个参数的结束\n\n##### 基本用法\n\n下面写法将会取前两个字符\n\n\n\n\n\n### base64Encode\n\nbase64 加密\n\n##### 基本用法\n\n\n\n\n\n### base64Decode\n\nbase64 解密\n\n##### 基本用法\n\n\n\n\n\n### isTrue\n\n真值条件过滤器\n\n##### 基本用法\n\n\n\n- **trueValue**: 如果变量为 ，即返回该值；\n- **falseValue**: 如果变量为 ，则返回该值。\n\n> 配置`trueValue`和`falseValue`时，如果想要返回当前数据域中某个变量的值，那么参数可以直接配置变量名而不需要在两边添加引号；如果想返回某字符串，那么需要给参数两边添加单引号或双引号，\n>\n> 例如 `${xxx|isTrue:'foo':bar}`，当 `xxx` 变量为真，那么会返回 **字符串`'foo'`**，如果不为真，那么返回数据域中 **变量`bar`** 的值。\n\n\n\n##### 返回数据域中变量\n\n参数中不添加引号，可以直接返回数据域中变量值\n\n\n\n### isFalse\n\n假值条件过滤器\n\n##### 基本用法\n\n\n\n用法与 相同，判断逻辑相反\n\n### isMatch\n\n模糊匹配条件过滤器\n\n##### 基本用法\n\n\n\n- **matchParam**: 匹配关键字参数\n - 如果想模糊匹配特定字符串，那么参数需要在两边添加单引号或者双引号；\n - 如果想模糊匹配某个变量值，那么参数不需要添加引号。\n- **trueValue**: 如果模糊匹配成功，即返回该值；\n- **falseValue**: 如果模糊匹配失败，则返回该值。\n\n\n\n##### 返回数据域中变量\n\n参数中不添加引号，可以直接返回数据域中变量值\n\n\n\n### notMatch\n\n##### 基本用法\n\n\n\n用法与 相同，判断逻辑相反。\n\n### isEquals\n\n全等匹配过滤器\n\n##### 基本用法\n\n\n\n- **equalsValue**: 全等匹配关键字参数\n - 如果想判断等于特定字符串，那么参数需要在两边添加单引号或者双引号；\n - 如果想判断等于某个变量值，那么参数不需要添加引号。\n- **trueValue**: 如果模糊匹配成功，即返回该值；\n- **falseValue**: 如果模糊匹配失败，则返回该值。\n\n\n\n##### 返回数据域中变量\n\n参数中不添加引号，可以直接返回数据域中变量值\n\n\n\n### notEquals\n\n不全等匹配过滤器\n\n##### 基本用法\n\n\n\n用法与 相同，判断逻辑相反。\n\n### map\n\n数组操作，操作对象为数组，当目标对象不是数组或者 mapFn(filterName) 不存在时将无效。\n\n##### 基本用法\n\n\n\n\n\n### filter\n\n过滤数组，操作对象为数组，当目标对象不是数组时将无效。\n\n##### 基本用法\n\n\n\n- **keys**: 参与过滤的字段集合\n- **directive**: 用于过滤数组的指令，包含下面这几种\n\n - `isTrue` 目标值为真通过筛选。\n - `isFalse` 目标值为假时通过筛选。\n - `isExists` 目标值是否存在。\n - `match` 模糊匹配后面的参数。`${xxx|filter:a,b:match:keywords}` 表示 xxx 里面的成员，如果字段 a 或者 字段 b 模糊匹配 keywords 变量的值，则通过筛选。\n - `equals` 相对于模糊匹配，这个就相对精确匹配了，用法跟 `match` 一样。\n - `isIn` 目标值是否在一个范围内？`${xxx|filter:yyy:isIn:[a,b]}` xxx 数组内的 yyy 变量是否是字符串 `\"a\"` 或者 `\"b\"`，如果要取变量就是 `${xxx|filter:yyy:isIn:zzz}` xxx 数组内的 yyy 属性，必须在 zzz 变量这个数组内。\n - `notIn`目标值是否不在一个范围内，参考 `isIn`。\n\n- **arg1**: 字符串或变量名\n\n 比如: `${xxx|filter:readonly:isTrue}` 将 xxx 数组中 readonly 为 true 的成员提取出来。\n 再来个例子：`${xxx|filter:a,b:match:keywords}` 将 xxx 数组中成员变量 a 或者 b 的值与环境中 keywords 的值相匹配的提取出来。如果不需要取变量，也可以写固定值如：`${xxx|filter:a,b:match:'123'}`\n\n## 串联使用过滤器\n\n使用单一的过滤器可能无法满足你的所有需求，幸运的是 amis 支持串联使用过滤器，而前一个过滤器的值会作为下一个过滤器的入参，进行下一步处理。语法如下:\n\n\n\n##### 先拆分字符串，再获取第 n 个值\n\n\n\n上例子中`${value|split|first}`，会经历下面几个步骤：\n\n1. 会先执行`split`过滤器，将字符串`a,b,c`，拆分成数组`[\"a\", \"b\", \"c\"]`；\n2. 然后将该数据传给下一个过滤器`first`，执行该过滤器，获取数组第一个元素，为`\"a\"`\n3. 输出`\"a\"`\n\n## 自定义过滤器\n\namis npm 包里面暴露了 `registerFilter` 方法，通过它可以添加自己的过滤器逻辑。\n\n如：\n\n\n\n注册后可以通过 `${xxx|count}` 来返回字符串的长度。\n\n如果你的过滤器还要支持参数，可以参考这个例子。\n\n\n\n用法为 `${xxxx|my-replace:aaaa:bbbb}`\n\n### 在 JS SDK 中自定义过滤器\n\n\n","path":"/zh-CN/docs/concepts/data-mapping"},{"title":"数据域与数据链","body":"\n## 基本的数据展示\n\n我们再看之前的简单示例：\n\n\n\n目前我们只是在 `Page` 组件中渲染一串固定的文本，如何实现 **通过接口拉取想要的数据，并展示到 `Page` 组件的内容区** 呢？\n\n## 添加初始化接口\n\n\n\n这个 api 接口返回的数据结构如下：\n\n\n\n渲染后页面效果：\n\n\n\n## 发生了什么?\n\n我们可以看到，输出结果不变，但是我们这次渲染的是接口返回的数据：\n\n1. 首先我们给 `Page` 组件配置了`initApi`属性，该属性会在组件初始化时，请求所该属性所配置的接口\n2. 接口请求成功后，`Page` 会把接口返回的`data`内数据存到当前的数据域中\n3. `Page` 在渲染 `body` 所配置的文本时，会解析文本内容，当解析到模板变量`${text}`时，amis 会把尝试在当前组件的数据域中获取`text`变量值，并替换掉`${text}`，最后渲染解析后的文本。\n\n> 下一节我们会介绍，`body`属性自身支持模板语法，amis 中支持模板语法的组件还有很多\n\n## 数据域\n\n前面我们提到了**数据域**这个概念，它是 amis 中最重要的概念之一。\n\n还是通过最简单的示例进行讲解：\n\n\n\n上面的配置要做的很简单：使用 `Page` 组件，在内容区内渲染一段模板文字，其中`${text}`是**模板变量**，它会去到当前组件的数据域中，获取`text`变量值。\n\n毫无疑问，`${text}`将会解析为空白文本，最终渲染的文本是 `Hello`\n\n\n\n因为当前 `Page` 组件的数据域中是没有任何数据的，相比之前的示例，区别在于前面我们为 `Page` 组件配置了初始化接口，它会将接口返回的数据存入数据域中以供组件使用。\n\n再观察下面这段配置：\n\n\n\n再次查看渲染结果，顺利输出了 `Hello World!`\n\n相信你可能已经猜到，**组件的`data`属性值是数据域的一种形式**，实际上当我们没有显式的配置数据域时，可以假想成这样：\n\n\n\n> 而前面我们知道 amis 的特性之一是基于组件树，因此自然数据域也会形成类似于树型结构，如何来处理这些数据域之间的联系呢，这就是我们马上要介绍到的 ****\n\n## 数据链\n\n相信通过上文，你已经基本掌握了 amis 中数据域的概念，接下来我们会介绍另一个重要概念：**数据链**。\n\n**数据链**的特性是，当前组件在遇到获取变量的场景（例如模板渲染、展示表单数据、渲染列表等等）时：\n\n1. 首先会先尝试在当前组件的数据域中寻找变量，当成功找到变量时，通过数据映射完成渲染，停止寻找过程；\n2. 当在当前数据域中没有找到变量时，则向上寻找，在父组件的数据域中，重复步骤`1`和`2`；\n3. 一直寻找，直到顶级节点，也就是`page`节点，寻找过程结束。\n4. 但是如果 url 中有参数，还会继续向上查找这层，所以很多时候配置中可以直接 `${id}` 取地址栏参数。\n\n> 为了方便讲解，我们这一章的例子统一使用的设置组件`data`属性的方式来初始化数据域，请记住，如果组件支持，你永远可以通过接口来进行数据域的初始化\n\n继续来看这个例子：\n\n\n\n上面的配置项形成了如下的组件树和数据链：\n\n组件树：\n\n\n\n数据链：\n\n\n\n> `__sub` 字段只是为了方便理解。\n\n首先，`page`组件下的`tpl`组件，在渲染`my name is ${name}`时，首先会在`page`的数据域中，尝试寻找`name`变量，在当前数据域中，`name`变量为`zhangsan`，因此寻找变量结束，通过数据映射渲染，输出：`my name is zhangsan`，渲染结束；\n\n然后，`service`组件开始渲染，`service`组件内子组件`tpl`，它配置的模板字符串是：`my name is ${name}, I'm ${age} years old`，它会在`service`的数据域中，尝试寻找`name`和`age`变量。\n\n由代码可以看出，`service`数据域中`name`变量为`lisi`，因此停止该变量的寻找，接下来寻找`age`变量。\n\n很明显在`service`数据域中寻找`age`变量会失败，因此向上查找，尝试在`page`数据域中寻找`age`变量，找到为`20`，寻找变量结束，通过数据映射渲染，输出：`my name is lisi, I'm 20 years old`，渲染结束。\n\n> **注意：** 当前例子中，对数据域中数据的获取使用的是 **\\${xxx}** 模板语法，但是在不同的组件配置项中，获取数据的语法会有差异，我们会在后续的中一一介绍。\n\n### 常见误解\n\n需要注意，只有少数几个容器组件会创建新的数据域，除了最顶层的 Page，还有 CRUD、Dialog、IFrame、Form、Service 等。\n\n常见的错误写法是给容器组件加 data 属性，比如：\n\n\n\n这样是不会生效的，正确的做法是使用 Service 包裹一层，如下所示\n\n\n\n## 初始化数据域\n\n通过上面的介绍你可能发现，初始化数据域有两种方式：\n\n### 1. 配置组件初始化接口\n\n想要将自己的服务中的数据保存到某个组件的数据域中，最好的方式就是为当前组件配置初始化接口：\n\n\n\n接口必须按照下面的格式返回：\n\n\n\n**注意：**\n\n1. **并不是所有组件都支持配置初始化接口来实现数据域初始化操作**，对于那些不支持配置初始化接口的组件来说，一般会使用 来辅助实现数据域初始化；\n2. **`status`**、**`msg`** 和 **`data`** 字段为接口返回的必要字段；\n3. `data`必须返回一个具有`key-value`结构的对象\n\n\n\n> `api` 除了配置字符串格式以外，还可以配置复杂对象结构，更多详情查看\n\n### 2. 显式配置 data 属性值\n\n另一种初始化当前数据域的方式是显式的设置组件的`data`属性值：\n\n\n\n### 同时配置\n\n在同时配置 **初始化接口** 和 **`data`属性** 时，数据域将会合并`data`属性值和初始化接口返回的数据\n\n## 更新数据域\n\n部分组件的某些交互或行为会对当前组件的数据域进行更新：\n\n\n\n`/api/saveForm`接口会保存当前表单提交的数据，并返回后端服务生成的`id`，并返回到前端，格式如下;\n\n\n\n这时 amis 将会把`data`数据与当前`form`组件的数据域进行**merge**，`form`组件中的`static-tpl`组件会根据更新后的数据域，显示`id`为`1`。\n\n> 具有类似特征的组件还有`Formula`等\n\n## URL 参数\n\nurl 中的参数会进入顶层数据域，比如下面的例子，可以点击看效果。\n\n\n","path":"/zh-CN/docs/concepts/datascope-and-datachain"},{"title":"事件动作","body":"\n> 1.7.0 及以上版本\n\n上一节我们介绍了如何实现联动，是比较基础和局限的，而事件动作是更简单、更灵活、更高级的用法，可以解决复杂的 UI 交互场景，支持渲染器事件监听和响应设计，无需关心组件层级关系。例如：\n\n- 传递数据\n - 点击「按钮」，发送一个远程请求，返回的数据回填给一个表单\n - 弹窗提交后，将弹窗内表单数据回填给另一个表单\n- 联动刷新\n - 下拉选择不同项，联动刷新表单数据\n- 状态控制\n - 勾选不同按钮，控制相应组件的显示/隐藏\n - 勾选不同按钮，控制相应组件的启用/禁用\n- 多个组件监听同一个事件做出不同响应\n - 下拉选择不同项，组件 A 监听后发送一个远程请求，组件 B 监听后进行刷新\n- 逻辑编排\n - 针对监听到的事件，循环执行一些动作作为响应，还可以控制循环跳出或跳过\n - 针对监听到的事件，根据条件选择性的执行动作响应\n - 针对监听到的事件，并行执行多个动作作为响应\n - 执行完当前动作后，可以选择是否继续执行后续动作，是否关闭事件默认行为的执行\n\n## 基本使用\n\n通过`onEvent`属性实现渲染器事件与响应动作的绑定。`onEvent`内配置事件和动作映射关系，`actions`是事件对应的响应动作的集合。\n\n\n\n### 运行日志\n\n可以在浏览器控制台查看运行日志，类似如下\n\n\n\n代表运行了 ajax 动作，第二行是传递的参数和数据，第三行是执行完动作之后的 `event` 值，可以用做后续动作的参数。\n\n## 事件与动作\n\n事件包含`渲染器事件`和`广播事件`，监听这些事件时，可以通过`event.data`来获取事件对象的数据。\n\n- 渲染器事件，由具体的渲染器组件提供，每个渲染器组件暴露的事件可以查看具体的；\n- 广播事件，即自定义事件，可以自定义派发的事件名称`eventName`，其他渲染器可以监听该自定义事件并配置响应动作。\n\n动作包含`通用动作`、`组件动作`、`广播动作`、`自定义动作`，可以通过配置`actionType`来指定具体执行什么动作。\n\n## 触发通用动作\n\n通用动作包含发送 http 请求、跳转链接、浏览器回退、浏览器刷新、打开/关闭弹窗、打开/关闭抽屉、打开对话框、弹出 Toast 提示、复制、发送邮件、刷新、控制显示隐藏、控制启用禁用状态、更新数据。\n\n### 发送 http 请求\n\n通过配置`actionType: 'ajax'`实现 http 请求发送，该动作需实现 `env.fetcher` 请求器。\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ----------------------------------- | ------ | ------------------------- |\n| api | | - | 接口配置 |\n| options | `object` | - | 其他配置 |\n| messages | `{success: string, failed: string}` | - | 请求成功/失败后的提示信息 |\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | ----------------------------------------------------------------------------- |\n| outputVar | `string` | - | 请求响应结果缓存在`${event.data.responseResult}`或`${event.data.{outputVar}}` |\n\n请求响应结果的结构如下：\n\n\n\n### 打开弹窗（模态）\n\n通过配置`actionType: 'dialog'`实现 Dialog 弹窗。\n\n\n\n**动作属性（args）**\n\n> `< 2.3.2 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | ----------------------- | ------ | --------------------------------------------------------- |\n| dialog | `string`/`DialogObject` | - | 指定弹框内容，格式可参考 |\n\n### 关闭弹窗（模态）\n\n通过配置`actionType: 'closeDialog'`实现关闭当前弹窗；附加配置`componentId`可以实现关闭指定弹窗。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------- |\n| componentId | `string` | - | 指定弹框组件 id |\n\n### 打开抽屉（模态）\n\n通过配置`actionType: 'drawer'`实现 Drawer 抽屉打开。\n\n\n\n**动作属性（args）**\n\n> `< 2.3.2 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | ----------------------- | ------ | --------------------------------------------------------- |\n| drawer | `string`/`DrawerObject` | - | 指定弹框内容，格式可参考 |\n\n### 关闭抽屉（模态）\n\n通过配置`actionType: 'closeDrawer'`实现关闭当前抽屉；附加配置`componentId`可以实现关闭指定抽屉。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------- |\n| componentId | `string` | - | 指定抽屉组件 id |\n\n### 打开对话框\n\n通过配置`actionType: 'alert'`或`actionType: 'confirm'`打开不同对话框，该动作分别需实现 env.alert: (msg: string) => void 和 env.confirm: (msg: string, title?: string) => boolean | Promise&lt;boolean&gt;。\n\n#### 提示对话框\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | -------------- |\n| msg | `string` | - | 对话框提示内容 |\n\n#### 确认对话框\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | -------------- |\n| title | `string` | - | 对话框标题 |\n| msg | `string` | - | 对话框提示内容 |\n\n### 跳转链接\n\n通过配置`actionType: 'url'`或`actionType: 'link'`实现链接跳转，该动作需实现 env.jumpTo(to: string, action?: any) => void 方法。\n\n#### 打开页面\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | --------- | ------- | ---------------------------------------------------------- |\n| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值 |\n| blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开 |\n| params | `object` | - | 页面参数`{key:value}`，支持数据映射，`> 1.10.0 及以上版本` |\n\n#### 打开单页\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | ----------------------------------------------------------------------------------------------------------------- |\n| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值 |\n| params | `object` | - | 页面参数`{key:value}`，支持数据映射，`> 1.9.0 及以上版本` |\n\n### 浏览器回退\n\n> 1.8.0 及以上版本\n\n通过配置`actionType: 'goBack'`实现页面回退。\n\n\n\n### 前进/后退到指定页面\n\n> 1.8.0 及以上版本\n\n通过配置`actionType: 'goPage'`实现浏览器页面的前进/后退。只有当历史记录中存在目标页面时才会生效。\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | ---- |\n| delta | `string` | `0` | 位置 |\n\n### 浏览器刷新\n\n> 1.8.0 及以上版本\n\n通过配置`actionType: 'refresh'`实现浏览器刷新。\n\n\n\n### toast 提示\n\n通过配置`actionType: 'toast'`实现弹出 toast 提示，该动作需实现 env.notify(type: ToastLevel, msg: string, conf?: ToastConf) => void 方法。\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | --------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| msgType | `string` | `\"info\"` | 消息类型 `info\\|success\\|error\\|warning` |\n| msg | `string` | - | 消息内容 |\n| position | `string` | `top-center（移动端为center）` | 提示显示位置 `top-right\\|top-center\\|top-left\\|bottom-center\\|bottom-left\\|bottom-right\\|center` |\n| closeButton | `boolean` | `false` | 是否展示关闭按钮 |\n| showIcon | `boolean` | `true` | 是否展示图标 |\n| timeout | `number` | `5000（error类型为6000，移动端为3000）` | 持续时间 |\n\n### 复制\n\n通过配置`actionType: 'copy'`和复制属性实现文本的复制操作，该动作需实现 env.copy(contents: string, options?: any) => void 方法。\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ------------------------------------ | ----------- | ---------------------------------- |\n| copyFormat | `string` | `text/html` | 复制格式 |\n| content | | - | 指定复制的内容。可用 `${xxx}` 取值 |\n\n### 发送邮件\n\n通过配置`actionType: 'email'`和邮件属性实现发送邮件操作。\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------- | -------- | ------ | ------------------------------ |\n| to | `string` | - | 收件人邮箱，可用 ${xxx} 取值 |\n| cc | `string` | - | 抄送邮箱，可用 ${xxx} 取值 |\n| bcc | `string` | - | 匿名抄送邮箱，可用 ${xxx} 取值 |\n| subject | `string` | - | 邮件主题，可用 ${xxx} 取值 |\n| body | `string` | - | 邮件正文，可用 ${xxx} 取值 |\n\n### 刷新\n\n通过配置`actionType: 'reload'`实现对指定组件的刷新（重新加载）操作，仅支持`form`、`wizard`、`service`、`page`、`app`、`chart`、`crud`，以及支持动态数据的`输入类`组件，详见组件的`动作表`。更多示例请查看。\n\n\n\n**动作属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------- | ------ | ------------------------------------------------------------------ |\n| resetPage | `boolean` | true | 当目标组件为 `crud` 时，可以控制是否重置页码，`> 2.3.2 及以上版本` |\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------------- |\n| componentId | `string` | - | 指定刷新的目标组件 id |\n\n### 显示与隐藏\n\n> 1.8.0 及以上版本\n\n通过配置`actionType: 'show'`或`'hidden'`实现对指定组件的显示和隐藏，且显隐动作的控制高于组件显隐属性的设置。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------------------- |\n| componentId | `string` | - | 指定显示或隐藏的目标组件 id |\n\n### 控制状态\n\n> 1.8.0 及以上版本\n\n通过配置`actionType: 'enabled'`或`actionType: 'disabled'`实现对指定组件的启用和禁用，仅支持实现了状态控制功能的数据`输入类`组件。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------------------- |\n| componentId | `string` | - | 指定启用或禁用的目标组件 id |\n\n### 更新数据\n\n> 1.8.0 及以上版本\n\n更新数据即更新指定组件数据域中的数据（data），通过配置`actionType: 'setValue'`实现组件`数据域变量更新`，通过它可以实现`组件间联动更新`、`数据回填`，更多示例请查看。\n\n**注意事项**\n\n- 数据类型支持范围：`基础类型`、`对象类型`、`数组类型`，数据类型取决于目标组件所需数据值类型\n- 目标组件支持范围：`form`、`dialog`、`drawer`、`wizard`、`service`、`page`、`app`、`chart`，以及数据`输入类`组件\n- < 2.3.2 及以下版本，虽然更新数据可以实现对组件数据域的更新，但如果更新数据动作的数据值来自前面的异步动作（例如 发送 http 请求、自定义 JS（异步）），则后面的动作只能通过事件变量`${event.data.xxx}`来获取异步动作产生的数据，无法通过当前数据域`${xxx}`直接获取更新后的数据。\n- 它的值通常都是对象形式，比如 form 传递的值应该是类似 `{\"user\": \"amis\"}`，这时就会更新表单里的 `user` 字段值为 `amis`\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | ------------------------------------------------------------------- |\n| value | `any` | - | 值 |\n| index | `number` | - | 当目标组件是`combo`时，可以指定更新的数据索引， `1.10.1 及以上版本` |\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------------- |\n| componentId | `string` | - | 指定赋值的目标组件 id |\n\n### 自定义 JS\n\n通过配置`actionType: 'custom'`实现自定义 JS。JS 中可以访问以下对象和方法：\n\n- context，渲染器上下文\n- doAction() 动作执行方法，用于调用任何 actionType 指定的动作\n- event，事件对象，可以调用 setData()、stopPropagation()、preventDefault()分别实现事件上下文设置、动作干预、事件干预，可以通过 event.data 获取事件上下文\n\n\n\n**动作属性（args）**\n\n> `< 2.3.2 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | ------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |\n| script | `string`/`function` | - | 自定义 JS 脚本代码，代码内可以通过调用`doAction`执行任何 ，通过事件对象`event`可以实现事件动作干预 |\n\n#### 支持异步\n\n> 2.0.3 及以上版本\n\n- 方式一：通过返回 Promise 实例的方式\n\n\n\n- 方式二：通过返回 Thunk 的方式\n\n\n\n#### 存储数据\n\n有时在执行自定义 JS 的时候，希望该过程中产生的数据可以分享给后面的动作使用，此时可以通过`event.setData()`来实现事件上下文的设置，这样后面动作都可以通过事件上下文来获取共享的数据。\n\n> 注意：直接调用`event.setData()`将修改事件的原有上下文，如果不希望覆盖可以通过`event.setData({...event.data, {xxx: xxx}})`来进行数据的合并。\n\n## 触发其他组件的动作\n\n通过配置`componentId`来触发指定组件的动作，组件动作配置通过`args`传入`(> 1.9.0 及以上版本)`，动作参数请查看对应的组件的。\n\n\n\n## 触发广播动作\n\n通过配置`actionType: 'broadcast'`实现触发一个广播。\n\n\n\n**动作属性（args）**\n\n> `< 2.3.2 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | ------------------------------------------------ |\n| eventName | `string` | - | 广播动作对应的自定义事件名称，用于广播事件的监听 |\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | -------------------------------------------------------- |\n| weight | `number` | 0 | 可以通过配置动作执行优先级来控制所有监听者的动作执行顺序 |\n\n## 自定义动作\n\n除了以上内置动作，你还可以注册自己的动作。通过对`RendererAction`的`run`方法的实现可以定制自己的动作逻辑，最后通过`registerAction`注册到 amis 事件动作中。\n\n\n\n# 编排动作\n\n通过配置不同的逻辑动作实现动作编排，支持嵌套。\n\n## 条件\n\n通过配置`expression: 表达式`来实现条件逻辑。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ------------------------------------------- | ------ | ---------------------------- |\n| expression | `boolean`\\| | - | 执行条件，不设置表示默认执行 |\n\n## 循环\n\n通过配置`actionType: 'for'`实现循环逻辑。\n\n**单层循环**\n\n\n\n**嵌套循环**\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | -------- | ------ | ------------ |\n| loopName | `string` | - | 循环变量名称 |\n\n**其他属性**\n\n> `< 2.3.2 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ---------------------------------------------------- | ------ | ------------------------------------- |\n| children | Array<> | - | 子动作，可以通过`break动作`来跳出循环 |\n\n## Break 动作\n\n通过配置`actionType: 'for'`和`actionType: 'break'`实现循环跳出。\n\n\n\n## Continue 动作\n\n通过配置`actionType: 'for'`和`actionType: 'continue'`实现循环跳过。\n\n\n\n## 排他（switch）\n\n通过配置`actionType: 'switch'`实现排他逻辑。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ---------------------------------------------------- | ------ | ------------------------------------------------------ |\n| children | Array<> | - | 子动作，每个子动作可以通过配置`expression`来匹配的条件 |\n\n## 并行\n\n通过配置`actionType: 'parallel'`实现并行执逻辑。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ---------------------------------------------------- | ------ | ------ |\n| children | Array<> | - | 子动作 |\n\n# 动作间数据传递\n\n从事件触发开始，整个数据流包含事件本身产生的事件数据和动作产生的动作数据，事件源头产生的数据在 AMIS 事件动作机制底层已经自动加入渲染器数据域，可以通过`xxx`直接获取（`< 2.3.2 及以下版本 为 event.data.xxx`），而部分动作产生的数据如何流动需要交互设计者进行介入，对于数据流动可以通过数据映射，将上一个动作产生的数据作为动作参数写入下一个动作。\n\n#### 传递数据\n\n通过 `data` 指定输入的参数数据（`< 2.3.2 及以下版本`通过`args`传递数据），它是一个键值对。\n\n\n\n#### 引用 http 请求返回的数据\n\nhttp 请求动作执行结束后，后面的动作可以通过 `${responseResult}`或`${{outputVar}}`来获取请求响应结果，响应结果的结构定义参考。\n\n> `< 2.3.2 及以下版本 需要通过 ${event.data.{xxx}}`来获取以上信息，例如：${event.data.responseResult}\n\n\n\n# 事件动作干预\n\n事件动作干预是指执行完当前动作后，干预所监听事件默认处理逻辑和后续其他动作的执行。通过`preventDefault`、`stopPropagation`分别阻止监听事件默认行为和停止下一个动作执行。\n\n## 阻止事件默认行为\n\n有些组件内置了一些逻辑来帮助用户降低配置成本，但可能这些逻辑并不符合设计者的业务需求，这时可以通过`onEvent`来监听对应的事件，并通过`preventDefault`来阻止那些默认处理逻辑来达到想要的最终效果。更多示例请查看。\n\n\n\n## 停止后续动作执行\n\n通过`onEvent`可以对监听的事件配置一组动作，这些动作是顺序执行的，有时间设计者希望执行某个/些动作后就停止继续执行后面的动作，这时候可以通过`stopPropagation`来停止执行后面配置的所有动作。\n\n\n\n# 自定义组件接入事件动作\n\n需求场景主要是想要自定义组件的内部事件暴露出去，能够通过对事件的监听来执行所需动作，并希望自定义组件自身的动作能够被其他组件调用。接入方法是通过`props.dispatchEvent`派发自身的各种事件，使其具备更灵活的交互设计能力；通过实现`doAction`方法实现其他组件对其专属动作的调用，需要注意的是，此处依赖内部的 `Scoped Context`来实现自身的注册，可以参考 。\n\n# 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------- |\n| actionType | `string` | - | 动作名称 |\n| args | `object` | - | 动作属性`{key:value}`，支持数据映射 |\n| data | `object` | - | 追加数据`{key:value}`，支持数据映射，如果是触发其他组件的动作，则该数据会传递给目标组件，`> 2.3.2 及以上版本` |\n| dataMergeMode | `string` | 'merge' | 当配置了 data 的时候，可以控制数据追加方式，支持合并(`merge`)和覆盖(`override`)两种模式，`> 2.3.2 及以上版本` |\n| preventDefault | `boolean`\\| | false | 阻止事件默认行为，`> 1.10.0 及以上版本支持表达式` |\n| stopPropagation | `boolean`\\| | false | 停止后续动作执行，`> 1.10.0 及以上版本支持表达式` |\n| expression | `boolean`\\| | - | 执行条件，不设置表示默认执行 |\n| outputVar | `string` | - | 输出数据变量名 |\n","path":"/zh-CN/docs/concepts/event-action"},{"title":"表达式","body":"\n## 使用场景\n\namis 中有很多场景会用到表达式。\n\n- 模板中变量取值。 如：`my name is ${xxx}`\n- api 地址参数取值 如 `http://mydomain.com/api/xxx?id=${id}`\n- api 发送&接收数据映射\n\n \n\n- 组件显示与隐藏条件\n\n \n\n- 表单默认值\n\n \n\n- 等等\n\namis 中表达式有两种语法：\n\n- 一种是纯 js 表达式，如 `data.xxx === 1`。\n- 另一种是用 `${` 和 `}` 包裹的表达式。如：`${ xxx === 1}`。\n\n\n\n第一种是早期的版本，偷懒直接用的 ，灵活性虽高，但是安全性欠佳。建议使用新版本规则，新规则跟 tpl 模板取值规则完全一样，不用来回切换语法。\n\n## 表达式语法\n\n表达式主要由三部分组成：开始字符、表达式内容和结束字符。其中开始字符固定是 `${` 结束字符固定是 `}`，中间内容才是表达式正文。这里说的语法主要还是表达式正文的语法。\n\n规则主要包含：\n\n- 变量名： `xxx变量`、`xxx变量.xxx属性`、`xxx变量[xxx属性]`\n- 布尔值： `true` 或者 `false`\n- null：`null`\n- undefined: `undefined`\n- 数字： `123` 或者 `123.23`\n- 字符串： `\"string\"` 或者 `'string'`\n- 字符模板\n\n ```\n `my name is ${name}`\n ```\n\n- 数组： `[1, 2, 3]`\n- 对象： `{a: 1, b: 2}`\n- 组合使用如： `{a: 1: b: [1, 2, 3], [key]: yyy变量}`\n- 三元表达式： `xx变量 == 1 ? 2 : 3`\n- 二元表达式： `xx变量 && yy 变量` 、 `xx变量 || yy 变量`、 `xx变量 == 123`\n\n - `+` 相加\n - `-` 相减\n - `*` 乘\n - `/` 除\n - `**` pow 运算\n - `||` 或者\n - `&&` 并且\n - `|` 或运算\n - `^` 异或运算\n - `&` 与运算\n - `==` 等于比较\n - `!=` 不等于\n - `===` 恒等于\n - `!==` 不恒等于\n - `<` 小于\n - `<=` 小于或等于\n - `>` 大于\n - `>=` 大于或等于\n - `<<` 左移\n - `>>` 右移\n - `>>>` 带符号位的右移运算符\n\n- 一元表达式： `!xx变量`、`~xx变量`\n\n* `+` 一元加法\n* `-` 一元减法\n* `~` 否运算符，加 1 取反\n* `!` 取反\n\n- 函数调用：`SUM(1, 2, 3)`\n- 箭头函数：`() => abc` 注意这个箭头函数只支持单表达式，不支持多条语句。主要配置其他函数使用如：`ARRAY_MAP(arr, item => item.abc)`\n- 括号包裹，修改运算优先级：`(10 - 2) * 3`\n\n示例：\n\n\n\n_特殊字符变量名_\n\n> 1.6.1 及以上版本\n\n默认变量名不支持特殊字符比如 `${ xxx.yyy }` 意思取 xxx 变量的 yyy 属性，如果变量名就是 `xxx.yyy` 怎么获取？这个时候需要用到转义语法，如：`${ xxx\\.yyy }`\n\n### 公式\n\n除了支持简单表达式外，还集成了很多公式(函数)如 `${ AVG(1, 2, 3, 4)}`：\n\n\n\n## 函数调用示例\n\n函数支持嵌套，参数支持常量及变量\n\n\n\n下面是目前所支持函数的使用手册\n\n!!!include(amis-formula/lib/doc.md)!!!\n","path":"/zh-CN/docs/concepts/expression"},{"title":"联动","body":"\n上一节我们介绍了表达式的概念，而表达式应用最多的场景，是实现页面的联动效果。\n\n## 基本联动\n\n元素的联动是页面开发中很常见的功能之一，类似于：\n\n- 某个条件下显示或隐藏某个组件\n- 某个条件下请求接口\n- 某个条件下轮询接口停止轮询\n- 等等...\n\n> 联动配置项一般都是 \n\n### 组件配置联动\n\n控制组件的显隐，表单项的禁用状态等，看下面这个例子：\n\n\n\n上面实例主要为一个表单，表单内有三个组件：一个`radio`, 两个`text`，通过配置联动配置项，实现下面联动效果：\n\n1. 只要当`radio`选中`类型1`时，才会显示`text1`；\n2. 当`radio`选中`类型2`时，`text2`将会变为`禁用状态`\n\n> **注意：**\n>\n> 在表单项联动中，为了方便数据的读取，赋值后或者修改过的表单项，通过隐藏后，并不会在当前数据域中删除掉该字段值，因此默认提交的时候可能仍然会带上已隐藏表单项的值。\n>\n> 如果想要在提交时去掉某个隐藏的字段，可以通过添加 属性实现。\n\n### 接口联动\n\n#### 基本使用\n\n接口联动是另外一种很常见的场景，查看下面这个例子：\n\n\n\n上面例子我们实现了这个逻辑：每次选择`选项1`的时候，会触发`选项2`的`source`配置的接口重新请求，并返回不同的下拉选项。\n\n是如何做到的？\n\n实际上，所有**初始化接口链接上使用数据映射获取参数的形式**时，例如下面的`query=${query}`，在当前数据域中，**所引用的变量值（即 query）发生变化时**，自动重新请求该接口。\n\n\n\n> **tip:**\n>\n> 触发所引用变量值发生变化的方式有以下几种：\n>\n> 1. 通过对表单项的修改，可以更改表单项`name`属性值所配置变量的值；\n> 2. 通过，将其他组件的值发送到目标组件，进行数据域的更新，从而触发联动效果\n>\n> 接口联动一般只适用于初始化接口，例如：\n>\n> - `form`组件中的`initApi`；\n> - `select`组件中的`source`选项源接口`url`, `data`只能用于主动联动；\n> - `service`组件中的`api`和`schemaApi`；\n> - `crud`组件中的`api`；（crud 默认是跟地址栏联动，如果要做请关闭同步地址栏 syncLocation: false）\n> - 等等...\n\n> 如果 api 地址中有变量，比如 `/api/mock2/sample/${id}`，amis 就不会自动加上分页参数，需要自己加上，改成 `/api/mock2/sample/${id}?page=${page}&perPage=${perPage}`\n\n#### 配置请求条件\n\n默认在变量变化时，总是会去请求联动的接口，你也可以配置请求条件，当只有当前数据域中某个值符合特定条件才去请求该接口。\n\n\n\n更多用法，见：\n\n#### 主动触发\n\n上面示例有个问题，就是数据一旦变化就会出发重新拉取，而输入框的频繁变化值会导致频繁的拉取？没关系，也可以配置主动拉取如：\n\n\n\n1. 通过`api`对象形式，将获取变量值配置到`data`请求体中。\n2. 配置搜索按钮，并配置该行为是刷新目标组件，并配置目标组件`target`\n3. 这样我们只有在点击搜索按钮的时候，才会将`keyword`值发送给`select`组件，重新拉取选项\n\n### 表单提交返回数据\n\n表单提交后会将返回结果合并到当前表单数据域，因此可以基于它实现提交按钮后显示结果，比如\n\n\n\n上面的例子首先用 `\"actions\": []` 将表单默认的提交按钮去掉，然后在 `input-group` 里放一个 `submit` 类型的按钮来替代表单查询。\n\n这个查询结果返回类似如下的数据\n\n\n\namis 会将返回的 `data` 写入表单数据域，因此下面的 `static` 组件就能显示了。\n\n### 其他联动\n\n还有一些组件特有的联动效果，例如 form 的 disabledOn，crud 中的 itemDraggableOn 等等，可以参考相应的组件文档。\n\n## 组件间联动\n\n联动很可能会出现跨组件的形式，思考下面这种场景：\n\n有一个表单`form`组件，还有一个列表组件`crud`，我们想要把`form`提交的数据，可以用作`crud`的查询条件，并请求`crud`的接口，由于`form`和`crud`位于同一层级，因此没法使用数据链的方式进行取值。\n\n\n\n现在更改配置如下：\n\n\n\n我们进行两个调整：\n\n1. 为`crud`组件设置了`name`属性为`my_crud`\n2. 为`form`组件配置了`target`属性为`crud`的`name`：`my_crud`\n\n更改配置后，提交表单时，amis 会寻找`target`所配置的目标组件，把`form`中所提交的数据，发送给该目标组件中，并将该数据**合并**到目标组件的数据域中，并触发目标组件的刷新操作，对于 CRUD 组件来说，刷新即重新拉取数据接口。\n\n> 当然，`crud`组件内置已经支持此功能，你只需要配置`crud`中的`filter`属性，就可以实现上面的效果，更多内容查看 文档。\n\n我们再来一个例子，这次我们实现 \n\n### 发送指定数据\n\n`target`属性支持通过配置参数来发送指定数据，例如：`\"target\" :\"xxx?a=${a}&b=${b}\"`，这样就会把当前数据域中的`a`变量和`b`变量发送给目标组件\n\n\n\n上例中我们给按钮上配置了`\"target\": \"form2?name=${name}&email=${email}\"`,可以把当前数据链中的`name`变量和`email`变量发送给`form2`\n\n### 配置多个目标\n\n`target`支持配置多个目标组件 name，用逗号隔开，例如：\n\n\n\n上例中点击按钮会刷新`target1`和`target2`组件。\n\n事实上，**组件间联动也可以实现上述任意的 （显隐联动、接口联动等其他联动）。**\n","path":"/zh-CN/docs/concepts/linkage"},{"title":"配置与组件","body":"\n## 最简单的 amis 配置\n\n一个最简单的 amis 配置看起来是这样的：\n\n\n\n请观察上面的代码，这是一段 JSON，它的含义是：\n\n1. `type` 是 amis 节点中最重要的字段，它告诉 amis 当前节点需要渲染的是`Page`组件。\n2. 而 `body` 字段会作为 `Page` 组件的属性，`Page` 组件根据这个值来渲染页面内容。\n\n这段配置的效果如下所示：\n\n\n\n上面这个配置是可以**实时修改预览**的，尝试改一下 `Hello World!` 的值。\n\n> 不过这个实时预览功能对于某些属性不生效，如果发现不符合预期，需要复制 JSON，打开另一个页面后粘贴。\n\n## 组件\n\n上面提到，`type`字段会告诉 amis 当前节点渲染的组件为`Page`，组件节点的配置永远都是由 **`type`字段** （用于标识当前是哪个组件）和 **属性** 构成的。\n\n\n\n## 组件树\n\n这次我们看一个稍微复杂一点的配置：\n\n\n\n该配置渲染页面如下：\n\n\n\n最终效果和前面的示例一样，但这次 `Page` 组件的 `body` 属性值配置了一个对象，**通过`type`指明`body`内容区内会渲染一个叫`Tpl`的组件**，它是一个模板渲染组件。\n\n在 `body` 中除了配置对象，还可以是数组，比如下面的例子:\n\n\n\n可以看到通过数组的形式，增加了 `divider` 和 `form` 组件。\n\n除了 `Page` 之外，还有很多**容器型**的组件都有 `body` 属性，通过这种树形结构，amis 就能实现复杂页面制作。\n\n> **注意：**\n>\n> `Page`是 amis 页面配置中 **必须也是唯一的顶级节点**\n\n### 通过树形来实现布局\n\n下面这个页面就是通过树形组合出来的，大体结构是这样：\n\n\n\n\n\n> amis 后续将会实现新的布局模式，将更容易实现复杂布局效果\n","path":"/zh-CN/docs/concepts/schema"},{"title":"样式","body":"\namis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。\n\n<div class=\"bg-pink-500 text-light shadow p-4 rounded-md hover:bg-pink-600\">\n <div class=\"text-lg b-b p-b-sm\">注意</div>\n <div class=\"p-t-xs\">CSS辅助类样式做了全新的升级，请点击顶部的「样式」查看新版。旧版本可以继续，但将不再更新。</div>\n</div>\n\n## 基本使用\n\n例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔\n\n\n\n1. 通过查阅按钮文档可知，按钮支持 className 配置项，也就是说可以在按钮上添加 CSS 类名；\n2. 再查阅当前页面下面 可知，我们可以添加`m-l`类名实现`margin-left: 15px;`的 CSS 效果\n3. 于是我们在`按钮2`的配置中添加`\"className\": \"m-l\"`，就能实现间距效果了\n\n\n\n绝大部分组件都支持各种形式的 CSS 类名自定义，然后搭配该文档中的各种类名可以实现各式各样的样式调整。具体请查阅组件文档；\n\n> 你可能需要掌握一些基础的 CSS 知识\n\n## 字体颜色\n\n实际颜色取决于主题，下面示例是默认主题的颜色。\n\n\n\n## 图标\n\namis 集成了 查看。\n\n## 布局\n\n水平布局可以考虑用 Bootstrap 的 或者用 `hobx` 加 `col`\n\n\n\n## 宽高\n\n\n\n\n\n## 外边距\n\n\n\n## 内边距\n\n\n\n## 边框\n\n\n\n## 圆角\n\n\n\n## 字体相关\n\n\n\n## 定位\n\n\n\n## 背景\n\n\n\n## 其他\n\n\n","path":"/zh-CN/docs/concepts/style"},{"title":"模板","body":"\n为了可以更加灵活渲染文本、数据结构，amis 借鉴其他模板引擎，实现了一套模板渲染功能。\n\n## 模板字符串\n\n### 普通文本\n\n配置一段普通文本并输出\n\n\n\n### 文本中获取变量\n\n可以支持在普通文本中，使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，如下\n\n\n\n更多`${xxx}`语法相关介绍，移步 。\n\n### 渲染 html\n\n使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，并渲染 HTML\n\n\n\n如果是变量本身有 html，则需要使用 raw 过滤\n\n\n\n### 表达式\n\n> 1.5.0 及以上版本\n\n支持简单的表达式运算以及公式调用，具体请查看\n\n\n\n## JavaScript 模板引擎\n\namis 还支持用 JavaScript 模板引擎进行组织输出，内部采用 进行实现。\n\n\n\n> 注意到了吗？\n>\n> 在 JavaScript 模板引擎中，我们获取数据域变量的方式是`data.xxx`，而不是之前的`${xxx}`，如果你熟悉 JavaScript 的话，这里模板引擎其实是将数据域，当做当前代码的数据作用域进行执行，因此需要使用`data.xxx`进行取值\n>\n> 要注意使用模板的时候在不同的场景下要使用正确的取值方式。\n\n仔细看示例不难发现，语法跟 ejs 很像，`<% 这里面是 js 语句 %>`，所以只要会写 js，做页面渲染没有什么问题。另外以下是一些可用 js 方法。\n\n- `formatDate(value, format='LLL', inputFormat='')`格式化时间格式，关于 format 请前往 文档页面。\n- `formatTimeStamp(value, format='LLL')` 格式化时间戳为字符串。\n- `formatNumber(number)` 格式化数字格式，加上千分位。\n- `countDown(value)` 倒计时，显示离指定时间还剩下多少天，只支持时间戳。\n\n下面 filters 中的方法也可以使用如： `<%= date(data.xxx, 'YYYY-MM-DD') %>`\n\n## 注意事项\n\n#### 1. 模板字符串 和 Javascript 模板引擎 不可以交叉使用\n\n例如：\n\n\n\n\n","path":"/zh-CN/docs/concepts/template"},{"title":"扩展现有组件","body":"\n除了新增组件，在 amis 中还能扩展和修改现有组件。\n\n## 扩展表单验证\n\n如果默认的表单检测规则不满足需求，还可以通过代码的方式扩展。\n\nJSSDK 中的用法：\n\n\n\n这样在配置中就能使用下面的验证方法\n\n\n\n在 React 的使用方法是类似的\n\n\n\n## 同时支持多种类型编辑\n\n在表单编辑中，每个 name 一般对应一种类型，如果这个 name 有多种类型，比如下面的例子中 id 的值有可能是字符串，也有可能是数字，但 type 只能设置为一种类型，这种情况如何处理？\n\n\n\n有两种方式：\n\n### 使用另一个名称作为状态\n\n\n\n可以看到在一个 form 中可以有两个 name 相同的组件，通过 hiddenOn 或 visibleOn 来控制同时只显示一个。\n\n### 使用 PipeIn/PipeOut 方法\n\n如果不想增加一个新的 name，在 JS SDK 或 React 还有更高级的处理方法，可以增加一个 name 同样为 id 的 switch，实现 PipeIn/PipeOut 函数来进行自动识别，下面是个示例：\n\n\n\n不过这种写法的复杂度较高\n\n## 修改组件标签\n\n有些组件可以设置 `wrapperComponent`，比如 Form 下默认使用 form 标签，在浏览器中会自带回车提交功能，如果想去掉这个功能，可以将 `wrapperComponent` 设置为 `div`。\n","path":"/zh-CN/docs/extend/addon"},{"title":"如何贡献代码","body":"\n如果发现 amis 有不满足的功能，除了发 issue 等官方升级之外，最快的方法就是自己实现它，本文将介绍 amis 代码的基本结构，一步步教会你如何新增功能。\n\n## 准备开始\n\n1. 首先，你需要对 React 有基本了解，快速看一遍就行。\n2. 在 github 上 fork amis 项目到自己的账号下。\n3. 创建分支 `git checkout -b feat-xxx`\n\n## amis 代码结构\n\namis 主要代码在 `src` 和 `scss` 目录下，这里主要介绍 `src` 下的结构：\n\n\n\n虽然文件很多，但对于组件开发而言，大部分情况下只需要关注 `components` 及 `renderers` 目录下的内容就行，如果发现某个组件不满足需求，可以先在 `renderers` 中找到这个组件，对齐进行修改就行。\n\n下面我们将以一个实际例子来介绍如果新增一个组件。\n\n## 实战：avatar 组件\n\n本文的目标是新增 avatar 头像组件，完整演示如何在 amis 中添加一个新组建，完整实现可以参考这个 ，本文基于这个例子进行了简化。\n\n### 编写 React 组件代码代码\n\n由于这个组件并不需要被其他组件复用，所以只需要在 `renderers` 目录下实现就好，整体步骤是：\n\n新增 `src/renderers/Avatar.tsx` 文件，内容如下\n\n\n\n上面这段代码中，最核心的就是 `AvatarField`，这就是一个 React 组件。\n\n接下来还需要改两处地方：\n\n- 一个是 `src/Schema.ts`，需要在 `SchemaType` 里加入刚才定义的 `avatar`。\n- 另一个是 `src/index.tsx`，增加一行 `import './renders/Avatar';`。\n\n这样就在 amis 中新增了一个组件，接下来我们编写组件所需的样式。\n\n### 编写 SCSS 代码\n\n新组件一般都需要对应的样式，首先创建 `scss/components/_avatar.scss` 文件，内容是：\n\n```css\n// 注意必须有这个 #{$ns}，它是为了方便生成主题，比如在 cxd 主题下，会转成 `.cxd-Avatar`\n.#{$ns}Avatar {\n}\n```\n\n然后修改 `scss/themes/_common.scss`，通过 `@import '../components/avatar';` 引入这个新文件。\n\namis 中的 css 命名使用 规范，请按照这个规范编写。\n\n如果样式在不同主题下有区别，则需要使用 CSS 变量，在 `scss/_properties.scss` 里定义这个变量的默认值，让后在对应的主题文件中覆盖，比如 `scss/themes/_cxd-variables.scss`。\n\n### 编写文档\n\n新组件还需要有对应的文档来方便其他人了解和使用，首先在 `docs/zh-CN/components/avatar.md` 中创建文件，然后在 `examples/components/Components.tsx` 里引用。\n\n文档编写可以参考其他示例，需要演示这个组件的所有功能。\n\n## 提交 PR\n\n使用 `git push --set-upstream origin feat-xxx` 创建远程分支。\n\n然后通过系统提示的 `https://github.com/xxx/amis/pull/new/feat-xxx` 链接来创建 PR，官方团队会在一个工作日左右回复。\n","path":"/zh-CN/docs/extend/contribute"},{"title":"自定义组件 - React","body":"\n## React 临时扩展\n\namis 的配置最终会转成 React 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 JSON 配置里写 React 代码，比如下面这个例子：\n\n\n\n其中的 `mycustom` 就是一个临时扩展，它的 `children` 属性是一个函数，它的返回内容和 React 的 Render 方法一样，即 jsx，在这个方法里你可以写任意 JavaScript 来实现自己的定制需求，这个函数有两个参数 `value` 和 `onChange`，`value` 就是组件的值，`onChange` 方法用来改变这个值，比如上面的例子中，点击链接后就会修改 `mycustom` 为一个随机数，在提交表单的时候就变成了这个随机数，而 `data` 可以拿到其它控件的值，比如 `data.username`。\n\n> 注意与 \"children\" 并列有个 \"asFormItem\" 属性，这个属性表示这个节点的渲染会自动包裹成表单项，包裹成表单项就能配置\n> \"name\"、\"description\"、\"validation\" 之类的跟表单项有关的配置了。包括其中的 value 和 onChange 自动会跟 name 关联等功能，跟下面 `@FormItem` 注解是一个功能。\n\n与之类似的还有个 `component` 属性，这个属性可以传入 React Component，如果想用 React Hooks，请通过 `component` 传递，而不是 `children`。\n\n这种扩展方式既简单又灵活，但它是写在配置中的，无法在其他地方复用，也无法在可视化编辑器里编辑，如果需要复用或在可视化编辑器中使用，请使用下面的「注册自定义类型」方式：\n\n## React 注册自定义类型\n\n首先需要了解「」，了解了基本原理后，来看个简单的例子：\n\n\n\n> 上面这个语法需要开启 Decorator 功能，如果不支持，可以改成如下写法\n\n\n\n有了以上这段代码后，就可以这样使用了。\n\n\n\n看了前面应该不难理解，这里注册一个 React 组件，当节点的 type 信息是 `my-renderer` 结尾时，交给当前组件来完成渲染。\n\n如果这个组件还能通过 `children` 属性添加子节点，则需要使用下面这种写法：\n\n\n\n有了以上这段代码后，就可以这样使用了。\n\n\n\n跟第一个例子不同的地方是，这里多了个 `render` 方法，这个方法就是专门用来渲染子节点的。来看下参数说明：\n\n- `region` 区域名称，你有可能有多个区域可以作为容器，请不要重复。\n- `node` 子节点。\n- `props` 可选，可以通过此对象跟子节点通信等。\n\n### 属性支持变量\n\n> 1.8.0 及以上版本新增配置，之前版本需要调用 amis 里的 resolveVariableAndFilter 方法\n\n前面的例子中组件参数都是静态的，但因为配置了 `autoVar: true`，使得所有组件参数将自动支持变量，比如下面例子中的 `tip` 在组件内拿到的将是解析后的值\n\n\n\n### 表单项的扩展\n\n以上是普通渲染器的注册方式，如果是表单项，为了更简单的扩充，请使用 `FormItem` 注解，而不是 `Renderer`。 原因是如果用 `FormItem` 是不用关心：label 怎么摆，表单验证器怎么实现，如何适配表单的 3 种展现方式（水平、上下和内联模式），而只用关心：有了值后如何回显，响应用户交互设置新值。\n\n\n\n有了以上这段代码后，就可以这样使用了。\n\n\n\n> 注意: 使用 FormItem 默认是严格模式，即只有必要的属性变化才会重新渲染，有可能满足不了你的需求，如果忽略性能问题，可以传入 `strictMode`: `false` 来关闭。\n\n表单项开发主要关心两件事。\n\n1. 呈现当前值。如以上例子，通过 `this.props.value` 判定如果勾选了则显示`已勾选`，否则显示`请勾选`。\n2. 接收用户交互，通过 `this.props.onChange` 修改表单项值。如以上例子，当用户点击按钮时，切换当前选中的值。\n\n至于其他功能如：label/description 的展示、表单验证功能、表单布局（常规、左右或者内联）等等，只要是通过 FormItem 注册进去的都无需自己实现。\n\n需要注意，获取或者修改的是什么值跟配置中 `type` 并列的 `name` 属性有关，也就是说直接关联某个变量，自定义中直接通过 props 下发了某个指定变量的值和修改的方法。如果你想获取其他数据，或者设置其他数据可以看下以下说明：\n\n- `获取其他数据` 可以通过 `this.props.data` 查看，作用域中所有的数据都在这了。\n- `设置其他数据` 可以通过 `this.props.onBulkChange`， 比如: `this.props.onBulkChange({a: 1, b: 2})` 等于同时设置了两个值。当做数据填充的时候，这个方法很有用。\n\n### 其它高级定制\n\n下面是一些不太常用的 amis 扩展方式及技巧。\n\n#### 自定义验证器\n\n如果 amis 能满足需求了，则不需要关心。组件可以有自己的验证逻辑。\n\n\n\n上面的例子只是简单说明，另外可以做`异步验证`，validate 方法可以返回一个 promise。\n\n#### OptionsControl\n\n如果你的表单组件性质和 amis 的 Select、Checkboxes、List 差不多，用户配置配置 source 可通过 API 拉取选项，你可以用 OptionsControl 取代 FormItem 这个注解。\n\n用法是一样，功能方面主要多了以下功能。\n\n- 可以配置 options，options 支持配置 visibleOn hiddenOn 等表达式\n- 可以配置 `source` 换成动态拉取 options 的功能，source 中有变量依赖会自动重新拉取。\n- 下发了这些 props，可以更方便选项。\n - `options` 不管是用户配置的静态 options 还是配置 source 拉取的，下发到组件已经是最终的选项了。\n - `selectedOptions` 数组类型，当前用户选中的选项。\n - `loading` 当前选项是否在加载\n - `onToggle` 切换一个选项的值\n - `onToggleAll` 切换所有选项的值，类似于全选。\n\n#### 组件间通信\n\n关于组件间通信，amis 中有个机制就是，把需要被引用的组件设置一个 name 值，然后其他组件就可以通过这个 name 与其通信，比如这个。其实内部是依赖于内部的一个 Scoped Context。你的组件希望可以被别的组件引用，你需要把自己注册进去，默认自定义的非表单类组件并没有把自己注册进去，可以参考以下代码做添加。\n\n\n\n把自己注册进去了，其他组件就能引用到了。同时，如果你想找别的组件，也同样是通过 scoped 这个 context，如： `scoped.getComponentByName(\"xxxName\")` 这样就能拿到目标组件的实例了（前提是目标组件已经配置了 name 为 `xxxName`）。\n\n#### 其他功能方法\n\n自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法。\n\n- `env.fetcher` 可以用来做 ajax 请求如： `this.props.env.fetcher('xxxAPi', this.props.data).then((result) => console.log(result))`\n- `env.confirm` 确认框，返回一个 promise 等待用户确认如： `this.props.env.confirm('你确定要这么做？').then((confirmed) => console.log(confirmed))`\n- `env.alert` 用 Modal 实现的弹框，个人觉得更美观。\n- `env.notify` toast 某个消息 如： `this.props.env.notify(\"error\", \"出错了\")`\n- `env.jumpTo` 页面跳转。\n","path":"/zh-CN/docs/extend/custom-react"},{"title":"自定义组件 - SDK","body":"\n## 使用 custom 组件临时扩展\n\n基于 custom 组件可以直接在 amis 配置实现自定义功能，它的支持面最广，是唯一支持在可视化编辑器中使用的方法。\n\n使用 custom 组件类似如下写法：\n\n\n\n注意上面的代码用到了 JavaScript 函数，无法转成 json 格式，但这三个函数还支持字符串形式，上面的代码可以改成如下形式，这样就能在可视化编辑器里支持自定义组件了：\n\n\n\n注意上面的例子中两个组件的 name 是一样的，这是为了方便示例，因为 amis 中的数据是双向绑定的，因此 onChange 修改自身的时候，另一个「姓名」输入框由于 name 一样，也会同步更新。\n\n关于 custom 组件的更多属性请参考「」。\n\n## JS SDK 注册组件\n\namis 组件都是基于 React 的，所以需要使用一个简单的 React 组件来注册，可以是函数组件也可以是类组件，下面以函数组件为例，将中的代码替换成如下示例：\n\n\n\n### 示例：引入 Element UI\n\n首先在页面中加入 Element UI 所需的依赖\n\n\n\n然后将前面的 `React.useEffect` 改成如下即可：\n\n```javascript\nReact.useEffect(function () {\n dom.current.innerHTML = `\n <el-button @click=\"visible = true\">Button</el-button>\n <el-dialog :visible.sync=\"visible\" title=\"Hello world\">\n <p>Try Element</p>\n </el-dialog>\n `;\n new Vue({\n el: dom.current,\n data: function () {\n return {visible: false};\n }\n });\n});\n```\n","path":"/zh-CN/docs/extend/custom-sdk"},{"title":"调试工具","body":"\n> 1.6.1 及以上版本\n\namis 内置了调试工具，可以查看组件内部运行日志，方便分析问题，目前在文档右侧就有显示。\n\n## 开启方法\n\n默认不会开启这个功能，可以通过下面三种方式开启：\n\n1. render 的 env 里设置 `enableAMISDebug`。\n1. 配置全局变量 `enableAMISDebug` 的值为 `true`，比如 `window.enableAMISDebug = true`。\n1. 在页面 URL 参数中加上 `amisDebug=1`，比如 `http://xxx.com/?amisDebug=1`。\n\n开启之后，在页面右侧就会显示。\n\n## 目前功能\n\n目前 Debug 工具提供了两个功能:\n\n1. 运行日志，主要是 api 及数据转换的日志\n2. 查看组件数据链，Debug 工具展开后，点击任意组件就能看到这个组件的数据链\n","path":"/zh-CN/docs/extend/debug"},{"title":"多语言","body":"\namis 中对多语言的支持有两方面：\n\n1. amis 内部组件的多语言，比如日期组件中的日期\n1. JSON 配置中的多语言，比如配置中的 label 值\n\n## amis 内部组件多语言\n\n分为 JS SDK 和 React 两种用法。\n\n### JS SDK\n\n从 1.1.0 版本开始已经自带英文翻译，所以只需要在 props 里设置 locale 即可。\n\n\n\n如果是其它语言，比如目前德语，需要单独引入文件\n\n\n\n### React\n\nReact 版本中没有内置英文翻译，需要自己 import，使用如下方法：\n\n\n\n在渲染 amis 组件的时候设置 locale 为 en-US\n\n\n\n## 全局文本替换\n\n> 1.5.0 及以上版本\n\namis 渲染的 env 参数可以配置全局文本替换，能基于它实现多语言替换功能\n\n\n\n比如下面的例子会对 `AMIS_HOST` 进行替换\n\n\n\n这个配置会对配置中的绝大部分字段进行替换，除了 `type, name, mode, target, reload` 这几个有特殊功能的字段。\n\n可以通过配置 `replaceTextIgnoreKeys` 属性来进行修改，让其它字段也避免被替换。\n\n## JSON 配置中设置多语言\n\n在 JSON 配置中，也可以设置不同语言下的不同展现，比如前面设置了 `locale` 为 `en-US`，这时在任意 JSON 配置中都能使用 `en-US` 对象来覆盖这个语言下的效果，用于实现简单的替换效果。\n\n\n\n请点击上方的切换语言下拉框切换到英文，就能看到 `label` 属性被替换了，除了 `label` 以外，还可以覆盖其他任意属性，比如将 type 换成其他。\n\n## 扩展内置组件的语言\n\n如果想扩展其他语言，首先参考 `https://github.com/baidu/amis/blob/master/src/locale/en-US.ts` 文件，然后参考后面的示例注册新语言，未翻译的文字都将使用中文。\n\n### JS SDK 扩展方法\n\n\n\n### React 扩展方法\n\n\n","path":"/zh-CN/docs/extend/i18n"},{"title":"工作原理","body":"\n实现自定义类型需要了解 amis 的工作原理。\n\n## 工作原理\n\namis 的渲染过程是将 `json` 转成对应的 React 组件。先通过 `json` 的 type 找到对应的 `Component`，然后把其他属性作为 `props` 传递过去完成渲染。\n\n拿一个表单页面来说，如果用 React 组件开发一般长这样。\n\n\n\n把以上配置方式换成 amis JSON, 则是：\n\n\n\n其实只需要把 json 节点，根据 type 信息自动转成 React Component 即可。\n\n> 原来组件注册是根据节点 path 注册，可以类型相同在不同的上下文中用不同的渲染器去渲染，后来发现这样反而增加了使用成本\n> 所以新版本直接通过 type 类型来注册组件，跟节点所在上下文无关。\n\nPage 组件的示例代码\n\n\n\nForm 组件的示例代码\n\n```jsx\n@Renderer({\n type: 'form'\n // ... 其他信息隐藏了\n})\nexport class FormRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n title,\n body,\n render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。\n } = this.props;\n return (\n <form className=\"form\">\n {body.map((control, index) => (\n <div className=\"form-item\" key={index}>\n {render(`${index}/control`, control)}\n </div>\n ))}\n </form>\n );\n }\n}\njsx\n@Renderer({\n type: 'input-text'\n // ... 其他信息隐藏了\n})\nexport class FormItemTextRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n label,\n name,\n onChange\n } = this.props;\n return (\n <div className=\"form-group\">\n <label>{label}<label>\n <input type=\"text\" onChange={(e) => onChange(e.currentTarget.value)} />\n </div>\n );\n }\n}\n```\n\n那么渲染过程就是根据节点 type 信息，跟组件池中的找到对应的组件实现，如果命中，则把当前节点转给对应组件渲染，节点中其他属性将作为目标组件的 props。需要注意的是，如果是容器组件，比如以上例子中的 `page` 组件，从 props 中拿到的 `body` 是一个子节点，由于节点类型是不固定，由使用者决定，所以不能直接完成渲染，所以交给属性中下发的 `render` 方法去完成渲染，`{render('body', body)}`，他的工作就是拿子节点的 type 信息去组件池里面找到对应的渲染器，然后交给对应组件去完成渲染。\n","path":"/zh-CN/docs/extend/internal"},{"title":"移动端展现","body":"\n## 移动端原生 UI\n\n从 1.6.0 版本开始，amis 会默认在移动端下使用仿原生 UI 的展现，比如日期选择会从底部弹出。\n\n由于这个仿原生 UI 是新开发的组件，有些 amis PC 版本的高级配置功能还不支持，比如 select 下的搜索过滤等，如果需要这些功能，可以先通过 props 里的 `useMobileUI` 属性关闭。\n\n方法 1：全局关闭\n\n\n\n方法 2：针对某个组件进行关闭\n\n\n\n## 移动端定制配置\n\n有时候我们需要在移动端下展示不同效果，可以通过 `mobile` 属性来在移动端下覆盖部分属性。\n\n\n\n请点击上方切换到移动端预览效果。\n\n`mobile` 属性可以出现在配置中的任意地方，替换父节点的任意属性，比如前面的例子可以写成放在 `form` 上替换所有 `body`\n\n\n\n> 注意这里对于移动端的判断是根据页面宽度，和 CSS 保持一致，所以即便是在 PC 上，如果页面宽度很小也会切换到 mobile 配置\n","path":"/zh-CN/docs/extend/mobile"},{"title":"页面交互行为跟踪","body":"\n从 1.5.0 版本开始，amis 内置了跟踪用户交互行为采集功能。\n\n## 使用方法\n\namis 只负责采集，对行为的存储和分析都需要外部实现。\n\n在 amis 渲染时的第三个参数 env 可以传递 tracker 函数，下面以 sdk 作为示例，具体实现可以根据实际需求修改，比如可以收集一段时间后再批量提交等。\n\n\n\n## 参数类型\n\neventTrack 的类型定义是\n\n\n\n有时候无法通过 `eventData` 区分点击行为，比如有个两个提交按钮\n\n\n\n当它触发事件的时 `EventTrack` 内容是一样的\n\n\n\n如何区分究竟是哪个事件？可以通过增加 `id` 属性，比如\n\n\n\n这样触发事件中就会包含 `id` 字段来方便区分，比如\n\n\n\n另一个方法是通过 `tracker` 的第二个参数 `props` 来判断，它可以拿到这个组件的所有属性配置\n\n## 事件示例\n\n除了下面的文档，还可以打开浏览器的控制台，在 `debug` 分类下可以看到实际操作时的例子\n\n### api\n\napi 的来源有两方面，一个是各种组件的 api 及 source 配置，另一个是 action 里的 ajax 类型请求\n\n以 crud 为例\n\n\n\n如果是 post 则类似下面的数据\n\n\n\n为了避免信息泄露在 eventData 里没有包含提交数据，要获取提交数据详情需要通过第二个参数，参考下面的例子\n\n\n\n### url\n\n这是打开外部链接事件，注意不要和 link 混淆，link 一般用来做应用内相对地址无刷新跳转\n\n示例\n\n\n\n这个事件有可能是 Link 组件触发，也有可能是 Action 组件触发，如果是 Action 这是类似下面的参数\n\n\n\nAction 组件会多些数据\n\n### link\n\n触发这个事件主要是 Action 和 Nav 组件\n\n如果是 Action，数据将会是\n\n\n\n如果是 Nav，数据将会是\n\n\n\n它们都有 label 及 link 字段\n\n### dialog\n\n这个事件主要由 action 触发，示例\n\n\n\n需要注意 dialog 里会包含所有弹框的 schema 配置，可能会导致提交数据太大，建议根据需求裁剪。\n\n### drawer\n\n这个事件主要由 action 触发，示例\n\n\n\n和前面的 dialog 示例，它的数据中会包含所有 drawer 配置，可能会内容过大，需要根据需求过滤\n\n### copy\n\n由 action 触发，示例如下\n\n\n\n### reload\n\n由 action 触发，示例\n\n\n\n### email\n\n由 action 触发，示例\n\n\n\n### prev/next\n\n可能有两个地方，一个是 Wizard 里的上一步下一步，还有可能是 Dialog 里的上一个下一个，示例\n\n\n\n### cancel\n\naction 里的取消事件，示例\n\n\n\n### close\n\naction 里的关闭事件，主要用于关闭弹框，示例\n\n\n\n### submit\n\n点击提交按钮的事件，这个事件可能还会同时触发 `api` 事件，比如表单的提交按钮。\n\n\n\n### confirm\n\naction 中的事件，主要用于关闭弹框\n\n\n\n### reset\n\n由 action 触发，主要用于重置表单数据，示例\n\n\n\n### reset-and-submit\n\n由 action 触发，会重置表单并提交数据\n\n\n\n### formItemChange\n\n表单项数据变化时，也就是用户在表单里输入和修改任何数据时触发，比如\n\n> 有一个特例是 input-password 类型的字段不会触发这个事件，避免隐私风险\n> 但在 api 中还是有可能包含隐私信息，因此建议前面 api 类的事件不记录数据提交内容\n\n\n\n事件数据里主要是 `name` `type` 和 `value`\n\n需要注意这个事件非常频繁，只要修改内容就会触发。\n\n和 action 类似，如果给表单项加上 `id` 字段也会透传到这里，方便用于区分同名输入框，比如\n\n\n\n### tabChange\n\ntab 切换事件，示例\n\n\n\n默认情况下 `key` 的值从 `0` 开始，如果 tab 上设置了 `hash` 值就会用这个值。\n\n同样，如果 tabs 设置了 id，也会输出这个 id 值方便区分\n\n### pageHidden\n\n当 tab 切换或者页面关闭时触发，可以当成用户离开页面的时间。\n\n### pageVisible\n\n当用户又切换回当前页面的时间，可以当做是用户重新访问的开始时间。\n\n由于 amis 可能被嵌入到页面中，所以 amis 无法知晓页面首次打开的时间，需要自行处理。\n","path":"/zh-CN/docs/extend/tracker"},{"title":"将 amis 当成 UI 库用","body":"\namis 不仅有纯配置的用法，还能当成 UI 库来使用，实现 90% 低代码，10% 代码开发的混合模式，在灵活性上。\n\n> 需要注意以下都需要在配置中写函数，因此不再是纯粹的 JSON，所以暂时不能在可视化编辑器的「代码」模式下使用\n> 从 1.3.0 开始按钮的 onClick 支持字符串格式，因此可以在可视化编辑器中使用\n\n## 事件监听\n\namis 提供了一些交互配置，但有时候这些交互无法满足需求，这时我们可以监听这些事件，然后用代码实现复杂交互需求，比如最常见的是表单事件。\n\n\n\n这个例子中我们监听了 3 个事件，输入框数据变化、表单提交、按钮点击，然后在这些地方使用代码实现特殊功能。\n\n## 使用 amis 公共方法\n\namis 对外还提供了一些方法，比如弹出消息通知，可以通过 `amisRequire('amis')` 获取到这些 amis 对外提供的方法。\n\n\n\n具体有哪些可以参考 `https://github.com/baidu/amis/blob/master/src/index.tsx`\n\n## React 中引入 amis 的组件\n\n在 React 环境下使用 amis，还可以直接引入 amis 内置组件，在 amis 项目源码 `src/components` 下的组件都是标准 React 组件，可以在项目中直接引用，这样就能将 amis 当成纯粹 UI 库来使用。\n\n\n","path":"/zh-CN/docs/extend/ui-library"},{"title":"介绍","body":"\n## 什么是 amis\n\namis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。\n\n## 为什么要做 amis？\n\n在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 `npm`、`webpack`、`react/vue`，必须熟悉 `ES6` 语法，最好还了解状态管理，比如 `Redux`，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的 ，相关的库有 **2347** 个，很多功能相似，挑选成本高。\n\n然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 `Hooks` 了、某个打包工具取代 `Webpack` 了……\n\n而有时候其实只想做个普通的增删改查界面，用于信息管理，类似下面这种：\n\n\n\n这个界面虽然用 `Bootstrap` 及各种前端 UI 库也能做出个大概，但仔细观察会发现它有大量细节功能，比如：\n\n- 可以对数据做筛选\n- 有按钮可以刷新数据\n- 编辑单行数据\n- 批量修改和删除\n- 按某列排序\n- 可以隐藏某些列\n- 可以调整列顺序\n- 自动生成顶部查询区域\n- 可调整列宽度\n- 开启整页内容拖拽排序\n- 表格有分页（页数还能同步到地址栏，不过这个例子中关了）\n- 有数据汇总\n- 支持导出 Excel\n- 「渲染引擎」那列的表头有提示文字\n- 鼠标移动到「平台」那列的内容时还有放大镜符号，可以展开查看更多\n- 如果往下拖动还有首行冻结来方便查看表头（因为文档页面的限制，这个功能在这里看不出来）\n\n全部实现这些需要大量的代码。\n\n但可以看到，用 amis 只需要 **157** 行 JSON 配置（其中 47 行只有一个括号），你不需要了解 `React/Vue`、`Webpack`，甚至不需要很了解 `JavaScript`，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发。\n\n这正是建立 amis 的初衷，我们认为：**对于大部分常用页面，应该使用最简单的方法来实现**，甚至不需要学习前端框架和工具。\n\n## 用 JSON 写页面有什么好处\n\n为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 来配置，它的独特好处是：\n\n- **不需要懂前端**：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 `JavaScript`，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；\n- **不受前端技术更新的影响**：百度内部最老的 amis 页面是 6 年多前创建的，至今还在使用，而当年的 `Angular/Vue/React` 版本现在都废弃了，当年流行的 `Gulp` 也被 `Webpack` 取代了，如果这些页面不是用 amis，现在的维护成本会很高；\n- **享受 amis 的不断升级**：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；\n- 可以 **完全** 使用 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。\n\n## amis 的其它亮点\n\n- **提供完整的界面解决方案**：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；\n- **大量内置组件（120+），一站式解决**：其它 UI 框架大部分都只有最通用的组件，如果遇到一些稍微不常用的组件就得自己找第三方，而这些第三方组件往往在展现和交互上不一致，整合起来效果不好，而 amis 则内置大量组件，包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后台页面开发只需要了解 amis 就足够了；\n- **支持扩展**：除了低代码模式，还可以通过 来扩充组件，实际上 amis 可以当成普通 UI 库来使用，实现 90% 低代码，10% 代码开发的混合模式，既提升了效率，又不失灵活性；\n- **容器支持无限级嵌套**：可以通过嵌套来满足各种布局及展现需求；\n- **经历了长时间的实战考验**：amis 在百度内部得到了广泛使用，**在 6 年多的时间里创建了 5 万页面**，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 JSON 配置。\n\n## amis 不适合做什么？\n\n使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：\n\n- **大量定制 UI**：JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。\n- **极为复杂或特殊的交互**：\n - 有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。\n - 但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。\n\n## 阅读建议\n\n- 如果你是第一次接触 amis，那么请 **务必认真阅读完概念部分**，它会让你对 amis 有个整体的认识\n- 如果你已经掌握 amis 基本概念，且有一定的开发经验，需要参考 amis 组件相关文档的同学，那么请移步 \n\n## 让我们马上开始吧\n\n点击页面底部的下一篇，继续阅读文档。\n","path":"/zh-CN/docs/index"},{"title":"./docs/zh-CN/start/changelog.md","body":"# 更新记录\n\n请访问 https://github.com/baidu/amis/releases\n","path":"/zh-CN/docs/start/changelog"},{"title":"常见问题","body":"\n## 如何水平垂直居中\n\n1.1.5 版本之后可以使用 flex 布局，默认就是水平垂直居中。\n\n## CRUD 顶部有重叠遮挡\n\n在初始化 amis 渲染器的时候设置 `affixOffsetTop`，或者通过 `\"affixHeader\": false` 关闭固定顶部功能。\n\n## 如何换行\n\n有时候返回结果中有 `\\n`，在页面展现的时候默认不会有换行效果，解决办法有 3 个：\n\n1. 使用 tpl、html、plain 或 static 组件，加上 `\"wrapperComponent\": \"pre\"` 配置项\n2. 引入 `helper.css`，给组件加上 `\"classname\": \"white-space-pre\"` 配置项（预计从 1.1.5 开始内置这个类，从而不需要引入 `helper.css`）\n3. 包在 `container` 容器中，使用 `style` 控制样式\n\n前两种方法比较简单，这里就只演示第三种，如果熟悉 css 可以很灵活实现各种展现控制：\n\n\n\n## 如何折行\n\n折行需要给对应的组件加上 `\"classname\": \"word-break\"`。\n\n## 如何实现左侧导航栏页面跳转？\n\n在 1.1.1 之后的版本提供了新的 app 组件，可以基于它实现导航功能，请参考 `https://github.com/aisuda/amis-admin` 项目。\n\n另外 amis 团队还开发了「」，即便完全不懂前端也能基于它开发应用。\n\n## 集成到 React 项目中报错\n\n一般都是因为 React、Mobx、mobx-react 版本有关，参考 amis 项目的 ，将版本保持一致，尤其是 Mobx，目前 amis 中使用的版本是 4，因为兼容性的考虑短期内不会升级到 5/6，使用 MobX 5/6 肯定会报错。\n\n## 有的功能在官网示例中能用，但在 React/SDK 中无法使用\n\n如果提示找不到渲染器，那肯定是版本较老，尝试以下两种方法解决：\n\n1. 使用最新 beta 版本，方法是去 查看最新版本号，比如最新版本是 1.1.2-beta.2\n ，就运行运行 `npm i amis@1.1.2-beta.2` 命令，在 `node_modules/amis/sdk` 目录中也能找到对应的 sdk 代码。\n2. 如果还是报错，可以使用最新代码自动编译的 sdk，下载地址是 `https://github.com/baidu/amis/blob/gh-pages/sdk.tar.gz`\n\n## 如何支持配置中的 URL 地址替换？\n\n> 1.5.0 及以上版本\n\n有个常用场景是在开发时使用 `localhost` 地址，而线上使用 `xxx.com`，这时可以使用 `replaceText` 属性，它是第四个参数，也就是 env 参数\n\n\n\n## 如何更新全局 data？\n\n使用下面的方式\n\n\n\n## CRUD api 分页功能失效\n\n如果 api 地址中有变量，比如 `/api/mock2/sample/${id}`，amis 就不会自动加上分页参数，需要自己加上，改成 `/api/mock2/sample/${id}?page=${page}&perPage=${perPage}`\n","path":"/zh-CN/docs/start/faq"},{"title":"快速开始","body":"\namis 有两种使用方法：\n\n- ，可以用在任意页面中\n- ，可以用在 React 项目中\n\nSDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。\n\n## SDK\n\n下载方式：\n\n1. github 的 ，文件是 sdk.tar.gz。\n1. 使用 `npm i amis` 来下载，在 `node_modules\\amis\\sdk` 目录里就能找到。\n\n新建一个 hello.html 文件，内容如下：\n\n\n\n### 切换主题\n\njssdk 版本默认使用 `sdk.css` 即云舍主题，如果你想用使用仿 Antd，请将 css 引用改成 `.antd.css`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：\n\n\n\n> 如果想使用 amis 1.2.2 之前的默认主题，名字是 ang\n\n### 初始值\n\n可以通过 props 里的 data 属性来赋予 amis 顶层数据域的值，类似下面的例子。\n\n\n\n### 控制 amis 的行为\n\n`amis.embed` 函数还支持以下配置项来控制 amis 的行为，比如在 fetcher 的时候加入自己的处理逻辑，这些函数参数的说明在后面 React 中也有介绍。\n\n\n\n同时返回的 `amisScoped` 对象可以获取到 amis 渲染的内部信息，它有如下方法：\n\n`getComponentByName(name)` 用于获取渲染出来的组件，比如下面的示例\n\n\n\n可以通过 `amisScoped.getComponentByName('page1.form1').getValues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。\n\n还可以通过 `amisScoped.getComponentByName('page1.form1').setValues({'name1': 'othername'})` 来修改表单中的值。\n\n### 更新属性\n\n可以通过 amisScoped 对象的 updateProps 方法来更新下发到 amis 的属性。\n\n\n\n### 多页模式\n\n默认 amis 渲染是单页模式，如果想实现多页应用，请使用 。\n\n### Hash 路由\n\n默认 JSSDK 不是 hash 路由，如果你想改成 hash 路由模式，请查看此处代码实现。只需要修改 `env.isCurrentUrl`、`env.jumpTo` 和 `env.updateLocation` 这几个方法，并在路由切换的时候，通过 amisScoped 对象的 `updateProps` 方法，更新 `location` 属性即可。\n\n参考：https://github.com/baidu/amis/blob/master/examples/app/index.jsx\n\n### 销毁\n\n如果是单页应用，在离开当前页面的时候通常需要销毁实例，可以通过 unmount 方法来完成。\n\n\n\n## react\n\n初始项目请参考 <https://github.com/aisuda/amis-react-starter>。\n\n如果在已有项目中，React 版本需要是 `>=16.8.6`，mobx 需要 `^4.5.0`。\n\namis 1.6.5 及以上版本支持 React 17。\n\n### 安装\n\n\n\n### webpack 配置参考\n\n如果要使用代码编辑器，需要 `monaco-editor-webpack-plugin` 插件\n\n\n\n### 主题样式\n\n目前主要支持两个主题：`cxd（云舍）` 和 `antd（仿 Antd）`\n\n1. 引入样式文件：\n\nhtml 中引入：\n\n\n\njs 中引入：\n\n\n\n> 上面只是示例，请根据自己的项目结构调整引用路径\n> 如果要支持 IE 11 请引入 amis/sdk/cxd-ie11.css，但这样就没法支持 CSS 变量了\n\n2. 渲染器使用配置主题\n\n\n\n### 使用指南\n\n可以在 React Component 这么使用（TypeScript）。\n\n1. 安装部分示例需要的插件库\n\n\n\n> 为了方便示例，上面选用了我们常用几个插件库，你完全可以选择自己喜欢的插件并重新实现\n\n2. 代码实现（React Typescript）\n\n\n\nrender 有三个参数，后面会详细说明这三个参数内的属性\n\n\n\n### schema\n\n即页面配置，请前往 了解\n\n### props\n\n一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：\n\n\n\n这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的 key 并不一定必须是 data , 你也可以是其它 key，但必须配合 schema 中的 `detectField` 属性一起使用。 如：\n\n\n\n### env\n\n环境变量，可以理解为这个渲染器工具的配置项，需要使用 amis 用户实现部分接口。他有下面若干参数：\n\n#### fetcher（必须实现）\n\n接口请求器，实现该函数才可以实现 ajax 发送，函数签名如下：\n\n\n\n> 你可以使用任何你喜欢的 ajax 请求库来实现这个接口\n\n#### notify\n\n\n\n用来实现消息提示。\n\n#### alert\n\n\n\n用来实现警告提示。\n\n#### confirm\n\n\n\n用来实现确认框。返回 boolean 值\n\n#### jumpTo\n\n\n\n用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。\n\n#### updateLocation\n\n\n\n地址替换，跟 jumpTo 类似。\n\n#### blockRouting\n\n设置阻止路由跳转的钩子函数，用来实现 form 未保存提前离开时出现确认框。\n\n\n\n#### theme: string\n\n目前支持是三种主题：`default`、`cxd` 和 `dark`\n\n#### isCurrentUrl\n\n\n\n判断目标地址是否为当前页面。\n\n#### copy\n\n\n\n用来实现内容复制，其中 `format` 可以为 text/html，或 text/plain\n\n#### tracker\n\n用户行为跟踪，请参考\n\n#### session\n\n默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。\n\n#### getModalContainer\n\n\n\n用来决定弹框容器。\n\n#### loadRenderer\n\n\n\n可以通过它懒加载自定义组件，比如： https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。\n\n#### affixOffsetTop: number\n\n固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。\n\n#### affixOffsetBottom: number\n\n固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。\n\n#### richTextToken: string\n\n内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者用免费的 Tinymce，不设置 token 默认就是 Tinymce。\n\n#### hideValidateFailedDetail: boolean\n\nForm 表单验证失败时在 notify 消息提示中是否隐藏详细信息，默认展示，设置为 true 时隐藏\n\n#### replaceText\n\n> 1.5.0 及以上版本\n\n可以用来实现变量替换及多语言功能，比如下面的例子\n\n\n\n它会替换 `api` 里的 `service` 字符串\n\n#### replaceTextIgnoreKeys\n\n> 1.5.0 及以上版本\n\n和前面的 `replaceText` 配合使用，某些字段会禁用文本替换，默认有以下：\n\n\n\n如果发现有字段被意外替换了，可以通过设置这个属性来避免\n\n#### toastPosition\n\nToast 提示弹出位置，默认为`'top-center'`。\n支持的属性值有：\n\n\n","path":"/zh-CN/docs/start/getting-started"},{"title":"CSS 变量","body":"\n目前示例中包含了一个，可以在线实时预览效果。\n\n要想使用 CSS 变量就必须知道某个组件都用到了哪些变量，目前最完善的方式是用 Chrome 开发者工具。\n\n不过如果你不知道如何使用，本文将会介绍一些常用的 CSS 变量，掌握他们也能完成大部分定制工作。\n\n## 基础颜色\n\n| 变量 | 类型 | 说明 |\n| -------------------- | ---- | ------------------------------ |\n| --black | 颜色 | 黑色颜色 |\n| --white | 颜色 | 白色颜色 |\n| --light | 颜色 | 最浅的颜色 |\n| --dark | 颜色 | 最深的颜色 |\n| --body-bg | 颜色 | 全局背景色 |\n| --background | 颜色 | table 等背景色 |\n| --primary | 颜色 | 主颜色，会影响主按钮颜色 |\n| --primary-onHover | 颜色 | 主颜色在鼠标移上去后的颜色 |\n| --primary-onActive | 颜色 | 主颜色在激活时的颜色，比如选中 |\n| --secondary | 颜色 | 次颜色，比如第二个按钮的颜色 |\n| --secondary-onHover | 颜色 | 次颜色在鼠标移上去后的颜色 |\n| --secondary-onActive | 颜色 | 次颜色在激活时的颜色 |\n| --success | 颜色 | 成功时的颜色 |\n| --success-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --success-onActive | 颜色 | 在激活时的颜色 |\n| --info | 颜色 | 显示信息的颜色，一般是蓝色 |\n| --info-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --info-onActive | 颜色 | 在激活时的颜色 |\n| --warning | 颜色 | 警告的颜色 |\n| --warning-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --warning-onActive | 颜色 | 在激活时的颜色 |\n| --danger | 颜色 | 错误的颜色 |\n| --danger-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --danger-onActive | 颜色 | 在激活时的颜色 |\n\n## 字体相关\n\n| 变量 | 类型 | 说明 |\n| --------------------- | -------- | ----------------------- |\n| --text-color | 颜色 | 文字颜色 |\n| --text--muted-color | 颜色 | 文字置灰时的颜色 |\n| --text--loud-color | 颜色 | 一般用于标题文字颜色 |\n| --button-color | 颜色 | 按钮文字颜色 |\n| --fontFamilyBase | 字体家族 | 基础字体家族 |\n| --fontFamilyMonospace | 字体家族 | 等宽字体家族 |\n| --fontSizeBase | 大小 | 基础字体大小，默认 14px |\n| --fontSizeMd | 大小 | 中等字体大小 |\n| --fontSizeLg | 大小 | 大字体大小 |\n| --fontSizeXl | 大小 | 最大字体大小 |\n| --fontSizeSm | 大小 | 小字体大小 |\n| --fontSizeXs | 大小 | 最小的字体大小 |\n| --lineHeightBase | 大小 | 基础行高 |\n\n## 边框相关\n\n| 变量 | 类型 | 说明 |\n| -------------- | ---- | ------------ |\n| --borderColor | 颜色 | 边框颜色 |\n| --borderRadius | 大小 | 默认边框圆角 |\n\n## 链接相关\n\n| 变量 | 类型 | 说明 |\n| ------------------------- | --------------- | ---------------------------------- |\n| --link-color | 颜色 | 链接颜色，默认用 --primary |\n| --link-decoration | text-decoration | 可以控制是否显示下划线 |\n| --link-onHover-color | 颜色 | 链接在鼠标移上去之后的颜色 |\n| --link-onHover-decoration | text-decoration | 可以控制鼠标移上去后是否显示下划线 |\n\n## 动画\n\n| 变量 | 类型 | 说明 |\n| -------------------- | ---- | ------------------------------------------------ |\n| --animation-duration | 时长 | 动画效果时长，默认 0.1s，可以设置为 0 来关闭动画 |\n\n## 图片\n\n| 变量 | 类型 | 说明 |\n| ------------ | ---------- | ---------------------------------- |\n| --Spinner-bg | background | 加载时的图片 url('data:image/...') |\n","path":"/zh-CN/style/css-vars"},{"title":"快速开始","body":"\n示例有个，可以在线实时预览效果。\n\n> 这是 1.1.0 版本中新增的功能\n\n在 amis 中自定义样式有四种方式：\n\n1. 使用 CSS 变量动态修改，通过这种方式修改大部分 amis 组件的样式，所有组件都会生效，注意这种方法不支持 IE11。\n2. 使用辅助 class，可以对单个组件做定制修改。\n3. 自己生成主题 CSS，可以修改所有配置，目前只能通过源码方式，请参考 `scss\\themes\\cxd.scss` 文件，修改变量后重新编译一个 css，需要注意这种方式在更新 amis 版本的时候最好重新编译，否则就会出现使用旧版 css 的情况，可能导致出错，因此不推荐使用。\n4. `wrapper` 组件可以直接写内嵌 `style`。\n\n本文主要介绍前两种方法：\n\n## CSS 变量\n\n在 page 下可以设置 cssVars 属性，通过它来动态修改 amis 内的 css 变量。\n\n\n\n具体有哪些变量请参考左侧的 说明。\n\n## 辅助 class\n\n辅助 class 参考自, 做了精简，把一些不常用的剔除了，响应式方面只保留 pc 和手机两种，css 未压缩版本大概是 800K 左右，比 tailwind 要小很多。\n\n使用方法：\n\n- JS SDK\n - 引入 sdk 中的文件 `<link rel=\"stylesheet\" href=\"sdk/helper.css\" />`\n- React\n - `import 'amis/lib/helper.css'`;\n\n目前这个文件没有和主题文件合并在一起，用户可以选择性加载。\n\n大部分 amis 组件都有 `className` 或者 `xxxClassName` 的配置，比如下面的配置给表单增加了边框、圆角和阴影\n\n\n\n还可以：\n\n- 通过 `flex` `flex-shrink-0` 来设置布局方式。\n- 通过 `bg-blue-100` `bg-white` 之类的类名设置背景色。\n- 通过 `shadow-md` 设置投影。\n- 通过 `rounded-xl` 设置圆角。\n- 通过 `text-xl`、`font-medium` 设置字体大小粗细。\n- 等等。。\n\n具体用法请查看左边的文档列表。\n","path":"/zh-CN/style/index"},{"title":"辅助类 - 响应式设计","body":"\n响应式设计目前只支持 pc 端和手机端，其他设备目前不支持，貌似也没必要支持。当什么前缀都不加时，就是给所有视图模式添加样式，包括移动端和 pc 端。如果你在 css 类名前面再加个 `m:` 前缀，就是专门给手机端设置样式。如果你在类名前面加个 `pc:` 前缀，则是给桌面端设置样式。\n\n\n","path":"/zh-CN/style/responsive-design"},{"title":"辅助类 - 状态样式","body":"\n除了给默认状态设置样式外，还支持几个特定状态的样式设置比如：hover（鼠标悬停）、active（当前选中）、focus（当前聚焦）或者 disabled（当前不可用）。\n\n\n\n## Hover\n\n在 css 类名前面添加 `hover:` 表示在 hover 时启用这个样式比如。\n\n\n\n## Group-Hover\n\n当 hover 某个元素的时候，你想要给子元素设置不同的样式，需要两步操作。\n\n1. 给容器添加 `group` 类名。\n2. 给子元素添加 `group-hover:` 前缀形式的样式类。\n\n\n\n## Focus\n\n当要给元素设置「聚焦态」样式时，类名添加 `focus:` 前缀。\n\n\n\n## Active\n\n当要给元素设置「选中态」样式时，类名添加 `active:` 前缀。\n\n\n\n## Disabled\n\n当要给元素设置「禁用态」样式时，类名添加 `disabled:` 前缀。\n\n\n\n## 结合响应式设计一起？\n\n那就先加「设备前缀」，再加「状态前缀」。如：`pc:hover:bg-pink-500`、`m:hover:bg-blue-500`\n\n\n","path":"/zh-CN/style/state"},{"title":"API","body":"\nAPI 类型用于配置请求接口的格式，涉及请求方式、请求地址、请求数据体等等相关配置\n\n## 简单配置\n\n如果你只需要配置简单的 ajax 接口，可以使用简单字符串格式，如下：\n\n\n\n- **method**：get、post、put、delete，默认为 get\n- **url**：接口地址，即模板字符串\n\n示例：\n\n\n\n## 接口返回格式（重要）\n\n所有配置在 amis 组件中的接口，都要符合下面的返回格式\n\n\n\n- **status**: 返回 `0`，表示当前接口正确返回，否则按错误请求处理；\n- **msg**: 返回接口处理信息，主要用于表单提交或请求失败时的 `toast` 显示；\n- **data**: 必须返回一个具有 `key-value` 结构的对象。\n\n**`status`**、**`msg`** 和 **`data`** 字段为接口返回的必要字段。\n\n> 1.1.7\n\n为了方便更多场景使用，还兼容了以下这些错误返回格式：\n\n1. errorCode 作为 status、errorMessage 作为 msg\n2. errno 作为 status、errmsg/errstr 作为 msg\n3. error 作为 status、errmsg 作为 msg\n4. error.code 作为 status、error.message 作为 msg\n5. message 作为 msg\n\n### 正确的格式\n\n\n\n### 错误的格式\n\n直接返回字符串或者数组都是不推荐的\n\n\n\n### 兼容格式\n\n> 1.0.19 及以上版本。\n\n为了支持多种后端，amis 支持直接返回数据的方式，无需返回 status 和将数据放在 data 字段中，比如下面的例子：\n\n\n\n但这种方式无法显示错误信息，只能通过返回 http 状态码来标识错误。\n\n### 配置弹框时间\n\n可以通过 `msgTimeout` 控制弹框时间，它的时间是毫秒\n\n\n\n## 复杂配置\n\nAPI 还支持配置对象类型\n\n### 基本用法\n\n\n\n### 配置请求方式\n\n可以配置`method`指定接口的请求方式，支持：`get`、`post`、`put`、`delete`、`patch`。\n\n> `method`值留空时：\n>\n> - 在初始化接口中，默认为`get`请求\n> - 在`form`提交接口，默认为`post`请求\n\n### 配置请求地址\n\n可以配置`url`指定接口请求地址，支持。\n\n### 配置请求数据\n\n可以配置`data`，配置自定义接口请求数据体。\n\n\n\n支持\n\n> 当`method`配置为`get`时，`data`中的值默认会添加到请求路径中\n\n需要注意一下，配置了数据发送，默认如果值是 `undefined` 也会作为空字符发送，比如以上这个例子直接提交会发送, name 和 email 两个字段，值分别为空字符。由于历史原因这个已经不能再修改了。如果你想实现没有填写的值不发送，则需要配置成。\n\n\n\n这样 `undefined` 的值不会发送了。\n\n### 不处理 key 中的路径\n\n> since 1.5.0\n\n默认请求数据体中配置 key，如果带路径会自动转成对象如：\n\n\n\n最终发送出去的数据格式为\n\n\n\n如果数据映射中的 key 不想被处理路径则需要配置 `convertKeyToPath` 为 false 如：\n\n\n\n这样发送的数据格式为\n\n\n\n### 配置请求数据格式\n\n可以配置`dataType`，来指定请求的数据体格式，默认为`json`\n\n> 下面例子中 api 没有配置`data`属性，因为`form`会默认将所有表单项的值进行提交。\n\n#### application/json\n\n默认是`application/json`，不需要额外配置。\n\n> 注意：当数据域里的 key 为 `&` 且值为 `$$` 时, 将所有原始数据打平设置到 `data` 中.\n\n\n\n#### application/x-www-form-urlencoded\n\n配置`\"dataType\": \"form\"`，可配置发送体格式为`application/x-www-form-urlencoded`\n\n\n\n#### multipart/form-data\n\n配置`\"dataType\": \"form-data\"`，可配置发送体格式为`multipart/form-data`\n\n\n\n当表单项中文件类型数据，则自动使用`multipart/form-data`数据体\n\n\n\n> `asBlob`配置项会指定当前 File 控件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。\n\n### 配置自定义请求头\n\n可以配置`headers`对象，添加自定义请求头\n\n\n\n### 配置请求条件\n\n可以配置表达式`sendOn`来实现：当符合某个条件的情况下，接口才触发请求\n\n\n\n查看 **选项 2** 的`source`属性，他是 API 类型值，支持配置`sendOn` ，实现根据条件请求接口。\n\n### 配置接口缓存\n\n当你在某种情况下，需要非常频繁的请求同一个接口，例如列表中，每一行中都有一个 Service 进行数据拉取操作，\n\n\n\n如上，如果你打开浏览器网络面板，会发现`/api/mock2/page/initData`接口将重复请求多次，次数为你当前列表的数据条数。\n\n这往往并不理想，你可以设置`cache`来设置缓存时间，单位是毫秒，在设置的缓存时间内，同样的请求将不会重复发起，而是会获取缓存好的请求响应数据。\n\n\n\n这下我们再打开网络面板，发现只有一条请求了\n\n### 配置返回数据\n\n如果接口返回的数据结构不符合预期，可以通过配置 `responseData`来修改，同样支持，可用来映射的数据为接口的实际数据（接口返回的 `data` 部分），额外加 `api` 变量。其中 `api.query` 为接口发送的 query 参数，`api.body` 为接口发送的内容体原始数据。\n\n> 注意：当数据域里的 key 为 `&` 且值为 `$$` 时, 表示将所有原始数据打平设置到 `data` 中.\n\n\n\n假如接口实际返回为：\n\n\n\n经过映射，给组件的数据为：\n\n\n\n另一个常用示例是 `\"type\": \"select\"` 的 `source` 数据源，如果接口返回的是：\n\n\n\n而 select 所需的数据格式是 `[{\"label\": \"lab\", \"value\": 1}]`，如何进行映射？\n\n方法是\n\n\n\n需要注意上面例子中 `items` 是因为数据直接放在了 `data` 中，如果是放在其他字段中就换成对应的字段名。\n\n### 配置请求适配器\n\namis 的 API 配置，如果无法配置出你想要的请求结构，那么可以配置`requestAdaptor`发送适配器\n\n**发送适配器** 是指在接口请求前，对请求进行一些自定义处理，例如修改发送数据体、添加请求头、等等，基本用法是，获取暴露的`api`参数，并且对该参数进行一些修改，并`return`出去：\n\n##### 暴露的参数\n\n发送适配器暴露以下参数以供用户进行操作:\n\n- **api**：当前请求的 api 对象，一般包含下面几个属性：\n - url：当前接口 Api 地址\n - method：当前请求的方式\n - data：请求的数据体\n - headers：请求的头部信息\n\n##### 字符串形式\n\n如果在 JSON 文件中配置的话，`requestAdaptor`只支持字符串形式。\n\n字符串形式实际上可以认为是外层包裹了一层函数，你需要补充内部的函数实现，并将修改好的 `api` 对象 `return` 出去：\n\n\n\n用法示例：\n\n\n\n上例中的适配器实际上是如下代码的字符串形式：\n\n\n\n##### 函数形式\n\n如果你的使用环境为 js 文件，则可以直接传入函数，如下：\n\n\n\n上面例子中，我们获取暴露的`api`对象中的`data`变量，并且为其添加了一个新的字段`foo`，并且一起返回出去就可以了，这样我们的请求数据体中就会加上我们这个新的字段。\n\n你也可以使用`debugger`自行进行调试。\n\n### 配置接收适配器\n\n同样的，如果后端返回的响应结构不符合 amis 的，而后端不方便调整时，可以配置`adaptor`实现接收适配器\n\n**接收适配器** 是指在接口请求后，对响应进行一些自定义处理，例如修改响应的数据结构、修改响应的数据等等。\n\n例如：接口正确返回的格式中，会返回`\"code\": 200`，而 amis 中，接口返回格式需要`\"status\": 0`，这时候就需要接收适配器进行调整结构。\n\n##### 暴露的参数\n\n接收适配器器暴露以下参数以供用户进行操作:\n\n- **payload**：当前请求的响应 payload，即 response.data\n- **response**：当前请求的原始响应\n- **api**：api 上的配置项，还可以通过 `api.data` 获得数据域里的内容\n\n##### 字符串形式\n\n如果在 JSON 文件中配置的话，`adaptor`只支持字符串形式。\n\n字符串形式实际上可以认为是外层包裹了一层函数，你需要补充内部的函数实现，并将修改好的 `payload` 对象 `return` 出去：\n\n\n\n用法示例：\n\n\n\n上例中的适配器实际上是如下代码的字符串形式：\n\n\n\n##### 函数形式\n\n如果你的使用环境为 js 文件，则可以直接传入函数，如下：\n\n\n\n### 配置文件下载\n\n如果 API 返回的是文件下载，需要加上这个配置：\n\n\n\n比如点一个按钮下载的完整示例是：\n\n\n\n还需要在这个 `/api` 返回的 header 中配置 `content-type` 和 `Content-Disposition`，比如\n\n\n\n如果只有 `Content-Type`，比如 Excel 的 `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`，则应该使用的方式来实现下载。\n\n如果是跨域请求，还需要配置\n\n\n\n### replaceData\n\n返回的数据是否替换掉当前的数据，默认为 `false`（即追加），设置为`true`就是完全替换当前数据。\n\n## 自动刷新\n\n凡是拉取类接口，默认都会开启自动刷新，比如 form 配置 initApi: `/api/initForm?tpl=${tpl}`。这个接口会在 form 初始化的请求。当接口中有参数时，amis 会监控这个接口的实际结果是否有变化，假如这个时候 form 里面有个字段名为 tpl 的表单项，它的值发生变化，这个 form 的 initApi 又会请求一次。\n\n\n\n这个功能是自动开启的，直接配置 api 地址（`/api/xxx?xx=${xxx}`），或者对象形式配置 `{method: 'get', url: '/api/xxx?xx=${xxx}'}` 都会自动启动这个功能。如果想要关闭这个功能，有两种方式。\n\n1. 把依赖的数据写在对象形式的 data 里面比如 `{method: 'get', url: '/api/xxx', data: {'xx': \"${xxx}\"}}`。\n2. 对象形式添加 `autoRefresh: false` 属性。\n\n【重点】利用这个 feature 结合 `sendOn` 接口发送条件，可以做到接口的串行加载。比如，接口 2 的地址上写上接口 1 会返回的某个字段，然后配置接口 2 的发送条件为这个字段必须存在时。这样接口 2 就会等接口 1 完了才会加载。\n\n## 跟踪数据自动刷新\n\n> since 1.1.6\n\n之前的版本，配置的 api 默认就会具备自动刷新功能，除非显式的配置 `autoRefresh: false` 来关闭。自动刷新主要通过跟踪 api 的 url 属性来完成的，如果 url 中了使用了某个变量，而这个变量发生变化则会触发自动刷新。\n也就说这个 url 地址，既能控制 api 请求的 query 参数，同时又起到跟踪变量重新刷新接口的作用。这个设定大部分情况下都是合理的，但是有时候想要跟踪 url 参数以外的变量就做不到了。所以新增了此属性 `trackExpression`，显式的配置需要跟踪的变量如：\n\n\n\n## GraphQL\n\n1.7.0 及之前的版本需要通过配置 `data` 里的 `query` 和 `variables` 字段可以实现 GraphQL 查询\n\n\n\n1.8.0 及以上版本简化了 GraphQL 的支持，增加了 `graphql` 属性，如果配置了就会自动并自动将 data 当成 `variables`，上面的例子可以简化为下面的写法，除了简化之外还方便了可视化编辑器编辑\n\n\n\n如果设置了 `data` 会被当成 `variables`，比如在 CRUD 里设置分页参数，比如下面的例子\n\n\n\n## 属性表\n\n| 字段名 | 说明 | 类型 | 备注 |\n| --------------- | ------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| method | 请求方式 | 字符串 | 支持：get、post、put、delete |\n| url | 请求地址 | | - |\n| data | 请求数据 | 对象或字符串 | 支持数据映射 |\n| dataType | 数据体格式 | 字符串 | 默认为 `json` 可以配置成 `form` 或者 `form-data`。当 `data` 中包含文件时，自动会采用 `form-data（multipart/form-data）` 格式。当配置为 `form` 时为 `application/x-www-form-urlencoded` 格式。 |\n| qsOptions | -- | 对象或字符串 | 当 dataType 为 form 或者 form-data 的时候有用。具体参数请参考这里，默认设置为: `{ arrayFormat: 'indices', encodeValuesOnly: true }` |\n| headers | 请求头 | 对象 | - |\n| sendOn | 请求条件 | | - |\n| cache | 接口缓存时间 | 整型数字 | - |\n| requestAdaptor | 发送适配器 | 字符串 | ，支持字符串串格式，或者直接就是函数如： |\n| adaptor | 接收适配器 | 字符串 | 如果接口返回不符合要求，可以通过配置一个适配器来处理成 amis 需要的。同样支持 Function 或者 字符串函数体格式 |\n| replaceData | 替换当前数据 | 布尔 | 返回的数据是否替换掉当前的数据，默认为 `false`，即：`追加`，设置成 `true` 就是完全替换。 |\n| responseType | 返回类型 | 字符串 | 如果是下载需要设置为 'blob' |\n| autoRefresh | 是否自动刷新 | 布尔 | 配置是否需要自动刷新接口。 |\n| responseData | 配置返回数据 | 对象 | 对返回结果做个映射 |\n| trackExpression | 跟踪变量 | 字符串 | 配置跟踪变量表达式 |\n","path":"/zh-CN/docs/types/api"},{"title":"ClassName","body":"\namis 中大部分的组件都支持配置 className 和 xxxClassName，他可以用来配置组件 dom 上的 css 类名，可以结合帮助类 css 来定制一些样式。具体帮助类 css 请前往。\n\n配置方式有两种：\n\n1. 直接配置字符串如：`className: \"text-danger\"` 文字标红。\n2. 采用对象配置，这个用法主要是方便写表达式如：`className: {\"text-danger\": \"this.status == 1\"}` 表示当数据 status 状态是 1 时，文字飘红。\n\n\n","path":"/zh-CN/docs/types/classname"},{"title":"Definitions","body":"\n`Definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容。\n\n> 注意 definitions 只能在顶级节点中定义。\n\n\n\n## 树形结构\n\n`Definitions` 最大的作用其实是能够实现对数据格式的递归引用，实现无限层级编辑：\n\n\n","path":"/zh-CN/docs/types/definitions"},{"title":"SchemaNode","body":"\nSchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema（配置）`以及`SchemaArray（配置数组）`三种类型\n\n## 模板\n\n\n\n上例中的`body`属性所配置的属性值`\"Hello ${text}!\"`就是一个模板\n\n更多使用说明见 \n\n## Schema 配置\n\n`Schema`，即**组件的 JSON 配置**\n\n**它至少需要一个`type`字段，用以标识当前`Schema`的类型。**\n\n\n\n`type`, `data`, `body`这三个字段组成的`JSON`对象，便是一个`Schema`，它由`type`字段作为标识，指明当前 `Schema` 是 `Page`组件节点\n\n而通过查看 可知，`body`属性类型是`SchemaNode`，即可以在`body`中，嵌套配置其他组件。我们在这里，用`type`和`tpl` JSON 对象，配置了 `Tpl` 组件，渲染了一段模板字符串。\n\n> amis 可以通过该方法，在`Schema`中嵌套配置其他`SchemaNode`，从而搭建非常复杂的页面应用。\n\n### 配置显隐\n\n所有的`Schema`类型都可以通过配置`visible`或`hidden`，`visibleOn`或`hiddenOn`来控制组件的显隐，下面是两种方式\n\n##### 静态配置\n\n通过配置`\"hidden\": true`或者`\"visible\": false`来隐藏组件\n\n\n\n下面那个表单被隐藏了。\n\n##### 通过条件配置显隐\n\n你也通过 配置`hiddenOn`，来实现在某个条件下禁用当前组件.\n\n\n\n为了方便说明，我们在 form 中演示了条件显隐，实际上，只要当前数据域中数据有变化，都可以实现组件显隐\n\n> `visible`和`hidden`，`visibleOn`和`hiddenOn`除了判断逻辑相反以外，没有任何区别\n\n## SchemaArray 配置数组\n\n明白了何为`Schema`之后，你就会很轻松理解`SchemaArray`，它其实就是支持通过数组配置`Schema`，从而在某一节点层级下，配置多个组件\n\n\n\n非常容易看出来，我们给`body`属性，配置了数组结构的`Schema`，从而实现在`body`下，渲染两个`tpl`，来输入两段文字的效果\n","path":"/zh-CN/docs/types/schemanode"}]}
Reference in New Issue View Git Blame Copy Permalink