2020-12-02 17:02:44 +08:00
|
|
|
|
{
|
|
|
|
|
|
"docs": [
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Action 行为按钮",
|
|
|
|
|
|
"body": "action 行为按钮，是触发页面行为的主要方法之一## 基本用法我们这里简单实现一个点击按钮弹框的交互。## 样式### 尺寸配置`size`，显示不同尺寸### 主题可以配置`level`或者`primary`，显示不同样式。### 图标可以配置`icon`配置项，实现按钮显示图标如果`label`配置为空字符串，可以只显示`icon`## 操作前确认可以通过配置`confirmtext`，实现在任意操作前，弹出提示框确认是否进行该操作。## ajax 请求通过配置`\"actiontype\":\"ajax\"`和`api`，可以实现 ajax 请求。### 请求成功后，跳转至某个页面##### 配置相对路径，实现单页跳转##### 配置完整路径，直接跳转指定路径### 请求成功后，显示反馈弹框更多内容查看### 请求成功后，刷新目标组件1. 目标组件需要配置 `name` 属性2. action 上添加 `\"reload\": \"xxx\"`，`xxx` 为目标组件的 `name` 属性值，如果配置多个组件，`name` 用逗号分隔> 配置 `\"reload\": \"window\"` 可刷新当前页面### 自定义 toast 文字可以通过配置`messages`，自定义接口返回`toast`信息** 属性表 **| 属性名 | 类型 | 默认值 | 说明 || -------- | -------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- || api | 格式说明。 || redirect | | - | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。 || feedback | `dialogobject` | - | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考 || messages | `object` | - | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。 |## 跳转链接### 单页跳转** 属性表 **| 属性名 | 类型 | 默认值 | 说明 || ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- || actiontype | `string` | `link` | 单页跳转 || link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值。 |### 直接跳转** 属性表 **| 属性名 | 类型 | 默认值 | 说明 || ---------- | --------- | ------- | ------------------------------------------------ || actiontype | `string` | `url` | 页面跳转 || url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值。 || blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开。 |`注意：由于 amis 平台内 http 地址会被替换成 proxy 地址，所以在 amis 平台内使用请加上 raw: 作为前缀。 比如：raw:http://www.baidu.com`## 弹框** 属性表 **| 属性名 | 类型 | 默认值 | 说明 || ------------- | ----------
|
|
|
|
|
|
"path": "/docs/components/action"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Alert 提示",
|
|
|
|
|
|
"body": "用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。## 基本使用## 显示关闭按钮配置`\"showclosebutton\": true`实现显示关闭按钮。## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | --------- | -------------------------------------------------------- || type | `string` | `\"alert\"` | 指定为 alert 渲染器 || classname | `string` | | 外层 dom 的类名 || level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` || body | | | 显示内容 || showclosebutton | `boolean` | false | 是否显示关闭按钮 |",
|
|
|
|
|
|
"path": "/docs/components/alert"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Audio 音频",
|
|
|
|
|
|
"body": "## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------- | ------------------------------------------------ | --------------------------------------- || type | `string` | `\"audio\"` | 指定为 audio 渲染器 || classname | `string` | | 外层 dom 的类名 || inline | `boolean` | true | 是否是内联模式 || src | `string` | | 音频地址 || loop | `boolean` | false | 是否循环播放 || autoplay | `boolean` | false | 是否自动播放 || rates | `array` | `[]` | 可配置音频播放倍速如：`[1.0, 1.5, 2.0]` || controls | `array` | `['rates', 'play', 'time', 'process', 'volume']` | 内部模块定制化 |",
|
|
|
|
|
|
"path": "/docs/components/audio"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "ButtonGroup 按钮组",
|
|
|
|
|
|
"body": "## 基本用法## 垂直模式配置`\"vertical\": true`，实现垂直模式## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------------------- | ---------------- | -------------------------- || type | `string` | `\"button-group\"` | 指定为 button-group 渲染器 || classname | `string` | | 外层 dom 的类名 || buttons | array<> | | 行为按钮组 || vertical | `string` | | 是否使用垂直模式 |",
|
|
|
|
|
|
"path": "/docs/components/button-group"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Button 按钮",
|
|
|
|
|
|
"body": "## 基本用法`button` 实际上是 `action` 的别名，更多用法见",
|
|
|
|
|
|
"path": "/docs/components/button"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Card 卡片",
|
|
|
|
|
|
"body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------- | ---------------------------- | ----------------------------------- | -------------------------------------- || type | `string` | `\"card\"` | 指定为 card 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || header | `object` | | card 头部内容设置 || header.classname | `string` | | 头部类名 || header.title | | | 标题 || header.subtitle | | | 副标题 || header.desc | | | 描述 || header.avatar | | | 图片 || header.avatartext | | | 如果不配置图片，则会在图片处显示该文本 || header.highlight | `boolean` | | 是否显示激活样式 || header.avatarclassname | `string` | `\"pull-left thumb avatar b-3x m-r\"` | 图片类名 || body | `array` | | 内容容器，主要用来放置非表单项组件 || bodyclassname | `string` | `\"padder m-t-sm m-b-sm\"` | 内容区域类名 || actions | array<> | | 配置按钮集合 |",
|
|
|
|
|
|
"path": "/docs/components/card"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Cards 卡片组",
|
|
|
|
|
|
"body": "卡片展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法这里我们使用手动初始数据域的方式，即配置`data`属性，进行数据域的初始化。或者你也可以使用 crud 的 ## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ------------------------------------ | ------------------- | ------------------------------ || type | `string` | | `\"cards\"` 指定为卡片组。 || title | | | 标题 || source | | `${items}` | 数据源, 获取当前数据域中的变量 || placeholder | | ‘暂无数据’ | 当没数据的时候的文字提示 || classname | `string` | | 外层 css 类名 || headerclassname | `string` | `amis-grid-header` | 顶部外层 css 类名 || footerclassname | `string` | `amis-grid-footer` | 底部外层 css 类名 || itemclassname | `string` | `col-sm-4 col-md-3` | 卡片 css 类名 || card | | | 配置卡片信息 |",
|
|
|
|
|
|
"path": "/docs/components/cards"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Carousel 轮播图",
|
|
|
|
|
|
"body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------------- | --------- | -------------------- | ------------------------------------------------------- || type | `string` | `\"carousel\"` | 指定为 carousel 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || options | `array` | `[]` | 轮播面板数据 || options.image | `string` | | 图片链接 || options.imageclassname | `string` | | 图片类名 || options.title | `string` | | 图片标题 || options.titleclassname | `string` | | 图片标题类名 || options.description | `string` | | 图片描述 || options.descriptionclassname | `string` | | 图片描述类名 || options.html | `string` | | html 自定义，同一致 || itemschema | `object` | | 自定义`schema`来展示数据 || auto | `boolean` | `true` | 是否自动轮播 || interval | `string` | `5s` | 切换动画间隔 || duration | `string` | `0.5s` | 切换动画时长 || width | `string` | `auto` | 宽度 || height | `string` | `200px` | 高度 || controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 || controlstheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 || animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |- `type` 请设置成 `carousel`- `classname` 外层 dom 的类名- `options` 轮播面板数据，默认`[]`，支持以下模式 - 图片 - `image` 图片链接 - `imageclassname` 图片类名 - `title` 图片标题 - `titleclassname` 图片标题类名 - `description` 图片描述 - `descriptionclassname` 图片描述类名 - `html` html 自定义，同一致- `itemschema` 自定义`schema`来展示数据- `auto` 是否自动轮播，默认`true`- `interval` 切换动画间隔，默认`5s`- `duration` 切换动画时长，默认`0.5s`- `width` 宽度，默认`auto`- `height` 高度，默认`200px`- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`- `controlstheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式- `animation` 切换动画效果，默认`fade`，另有`slide`模式",
|
|
|
|
|
|
"path": "/docs/components/carousel"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Chart 图表",
|
|
|
|
|
|
"body": "图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，## 基本用法## 配置静态配置项通过配置`\"config\": {}`，可以配置`echarts`配置## 配置图表点击行为可以通过配置`\"clickaction\": {}`，来指定图表节点的点击行为，支持 amis 的。> 点击下面坐标中的节点查看效果！## 远程拉取动态配置项配置`api`，来远程拉取图标配置## 通过组件间联动，更新图表## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------ | ------------------------------------ | --------- | ------------------------------------------------------------------ || type | `string` | `\"chart\"` | 指定为 chart 渲染器 || classname | `string` | | 外层 dom 的类名 || body | | | 内容容器 || api | | | 配置项接口地址 || source | | | 通过数据映射获取数据链中变量值作为配置 || initfetch | `boolean` | | 组件初始化时，是否请求接口 || interval | `number` | | 刷新时间(最低 3000) || config | `object` 或 `string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 || style | `object` | | 设置根元素的 style || width | `string` | | 设置根元素的宽度 || height | `string` | | 设置根元素的高度 || replacechartoption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |",
|
|
|
|
|
|
"path": "/docs/components/chart"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Collapse 折叠器",
|
|
|
|
|
|
"body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------------------------- | ---------------------- || type | `string` | `\"collapse\"` | 指定为 collapse 渲染器 || title | | | 标题 || body | | | 内容 || classname | `string` | `bg-white wrapper` | css 类名 || headingclassname | `string` | `font-thin b-b b-light text-lg p-b-xs` | 标题 css 类名 || bodyclassname | `string` | | 内容 css 类名。 || collapsed | `boolean` | `false` | 默认是否要收起。 |",
|
|
|
|
|
|
"path": "/docs/components/collapse"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Color 颜色",
|
|
|
|
|
|
"body": "用于展示颜色## 基本用法## 用作 field 时当用在 table 的列配置 column、list 的内容、card 卡片的内容和表单的static-xxx 中时，可以设置`name`属性，映射同名变量### table 中的列类型list 的内容、card 卡片的内容配置同上### form 中静态展示## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------- | ------ | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || value | `string` | | 显示的颜色值 || name | `string` | | 在其他组件中，时，用作变量映射 || defaultcolor | `string` | `#ccc` | 默认颜色值 || showvalue | `boolean` | `true` | 是否显示右边的颜色值 |",
|
|
|
|
|
|
"path": "/docs/components/color"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "组件介绍",
|
|
|
|
|
|
"body": "从这个章节开始，我们将会介绍 amis 中内置的所有组件的使用方法",
|
|
|
|
|
|
"path": "/docs/components/component"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Container 容器",
|
|
|
|
|
|
"body": "container 是一种容器组件，它可以渲染其他 amis 组件## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------------------------------- | --------- | ------------------- || type | `string` | `\"alert\"` | 指定为 alert 渲染器 || classname | `string` | | 外层 dom 的类名 || bodyclassname | `string` | | 容器内容区的类名 || body | | | 容器内容 |",
|
|
|
|
|
|
"path": "/docs/components/container"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "CRUD 增删改查",
|
|
|
|
|
|
"body": "crud，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。## 基本用法最基本的用法是配置 **数据源接口(api)** 以及 **展示列(columns)**## 数据源接口数据结构要求- `items`或`rows`：用于返回数据源数据，格式是数组- `total`: 用于返回数据库中一共有多少条数据，用于生成分页如果无法知道数据总数，只能知道是否有下一页，请返回如下格式，amis 会简单生成一个简单版本的分页控件。如果不需要分页，或者配置了 `loaddataonce` 则可以忽略掉 `total` 和 `hasnext` 参数。## 功能既然这个渲染器叫增删改查，那接下来分开介绍这几个功能吧。### 增其实这个渲染器并不没有包含新增功能，新增功能其实还是依靠其他位置放个弹框表单完成，弹框完事了会自动让页面里面的 crud 刷新如：当然如果你不想要自动刷新，那么给按钮配置 reload: \"none\" 就行了。### 删删除功能主要有三种实现：或者直接添加一个操作栏，在里面放个类型为 ajax 类型的按钮即可。在这个按钮里面能获得对应的行数据，而且完成后也会自动刷新这个 crud 列表。### 改改和删其实是差不多的，唯一的区别在于，配置不同的 api，按钮类型改成弹框。弹框里面可用数据自动就是点击的那一行的行数据，如果列表没有返回，可以在 form 里面再配置个 initapi 初始化数据，如果行数据里面有倒是不需要再拉取了。表单项的 name 跟数据 key 对应上便自动回显了。默认发送给表单的保存接口只会包含配置了的表单项，如果不够，请在 api 上配置数据映射，或者直接添加 hidden 类型的表单项（即隐藏域 input[type=hidden]）。### 查查，就不单独介绍了，这个文档绝大部分都是关于查的。## 展示模式crud 支持下面 3 种展示模式，默认为 table 表格模式。### table 表格模式table 模式支持 中的所有功能。### list 列表模式list 模式支持 中的所有功能。### cards 卡片模式cards 模式支持 中的所有功能。## 查询条件表单大部分表格展示有对数据进行检索的需求，crud 自身支持通过配置`filter`，实现查询条件过滤表单`filter` 配置实际上同 组件，因此支持绝大部分`form`的功能。**请注意**：在默认没有自定义配置 api 数据映射时，提交查询条件表单，会自动将表单中的表单项值，发送给`crud`所配置的接口，然后通过后端接口，实现对数据的过滤操作，前端默认是不会进行任何的数据过滤操作如果想前端实现过滤功能，请看部分。## 配置默认请求参数可以配置`defaultparams`，来指定拉取接口时的默认参数：例如上例中，配置`{ perpage: 50 }`，指定分页的默认每页数据条数为 50 条。## 数据源接口轮询可以配置`interval`来实现数据接口轮询功能，默认最低为`3000`毫秒，配置`stopautorefreshwhen`表达式，来实现满足条件，停止轮询## 列配置除了支持 以外，crud 还支持下面这些配置，帮助更好的操作数据### 排序检索可以在列上配置`\"sortable\": true`，该列表头右侧会渲染一个可点击的排序图标，可以切换`正序`和`倒序`。amis 只负责生成排序组件，并将排序参数传递给接口，而不会在前端对数据进行排序处理。参数格式如下：你可以通过，在`api`中获取这些参数。### 快速搜索可以在列上配置`\"sortable\": true`，该列表头右侧会渲染一个可点击的搜索图标，点击可以输入关键字进行该列的搜索：amis 只负责生成搜索组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下：你可以通过，在`api`中获取这些参数。### 快速过滤可以在列上配置`filterable`属性，该列表头右侧会渲染一个可点击的过滤图标，<EFBFBD><EFBFBD>
|
|
|
|
|
|
"path": "/docs/components/crud"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Date 日期时间",
|
|
|
|
|
|
"body": "用于展示日期## 基本使用## 用作 field 时当用在 table 的列配置 column、list 的内容、card 卡片的内容和表单的static-xxx 中时，可以设置`name`属性，映射同名变量### table 中的列类型list 的内容、card 卡片的内容配置同上### form 中静态展示## 配置展示格式例如你想将某一个时间值，以 `xxxx年xx月xx日 xx时xx分xx秒` 这样的格式输出，那么查找 moment 文档可知配置格式应为 `yyyy年mm月dd日 hh时mm分ss秒`，即：## 配置数据格式如果你的数据值默认不是`x`格式（即时间戳格式），那么需要配置`valueformat`参数用于解析当前时间值例如下面`value`值为：`\"2020/4/14 19:59:50\"`，查阅 moment 文档可知，需要配置数据格式为 `\"yyyy/mm/dd hh:mm:ss\"`，然后我们配置输出格式`format`，输出指定格式日期：## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ------------ | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"date\"`；在 form 中用作静态展示，为`\"static-date\"` || classname | `string` | | 外层 css 类名 || value | `string` | | 显示的颜色值 || name | `string` | | 在其他组件中，时，用作变量映射 || placeholder | `string` | `-` | 占位内容 || format | `string` | `yyyy-mm-dd` | 展示格式 || valueformat | `string` | `x` | 数据格式，默认为时间戳 || fromnow | `boolean` | `false` | fromnow || updatefrequency | `boolean` | `false` | updatefrequency |",
|
|
|
|
|
|
"path": "/docs/components/date"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Dialog 对话框",
|
|
|
|
|
|
"body": "dialog 弹框 主要由 触发，主要展示一个对话框以供用户操作。## 基本用法## 配置尺寸## 多级弹框## 行为后关闭弹框在弹框中配置行为按钮，可以在按钮上配置`\"close\": true`，在行为完成后，关闭当前弹框。## 弹框中配置表单### 基本使用### 提交表单 或 ajax 请求弹框中通过配置`form`或`ajax`行为按钮，可以实现`form`提交和`ajax`请求操作。### 提交表单 或 ajax 请求 后不关闭弹框默认情况下，当弹框中配置了 form 并进行了**提交表单操作（confirm）**或进行了**`ajax`请求**，请求成功后，会自动关闭当前弹框，你可以通过手动设置`\"close\": true` 来禁止该默认特性。## feedback 反馈弹框feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，进行反馈操作### 基本使用### 弹框中配置 feedback#### 关闭 feedback 弹框时，同时关闭上层弹框当你在弹框中配置了 feedback，操作之后，你希望关闭当前 feedback 弹框同时，关闭上层的弹框，具体有两种方式##### 1. 不请求接口，直接关闭`feedback`的`actions`中配置 `\"actiontype\": \"close\"` 的按钮##### 2. 请求接口，请求成功后，关闭所有弹框需要在 feedback 的 `body` 中添加 form 组件，并配置`\"actiontype\": \"confirm\"`，> 注意上面的例子：如果你的触发`feedback`的按钮`actiontype`为`ajax`时，为需要额外在按钮上配置`\"close\": true`#### 关闭 feedback 弹框时，不同时关闭上层弹框改场景只适用于**不请求接口关闭弹框**的场景，需要在 feedback 层添加`\"skiprestoncancel\": true`### 根据条件显示 feedback可以根据条件弹出，例如下面这个例子，只有当接口返回的时间戳可以整除 2 时才显示弹框。## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | ------------------ | ---------------------------------------------------------------------------------------- || type | `string` | | `\"dialog\"` 指定为 dialog 渲染器 || title | | | 弹出层标题 || body | | | 往 dialog 内容区加内容 || size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` || bodyclassname | `string` | `modal-body` | dialog body 区域的样式类名 || closeonesc | `boolean` | `false` | 是否支持按 `esc` 关闭 dialog || showclosebutton | `boolean` | `true` | 是否显示右上角的关闭按钮 || showerrormsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 || disabled | `boolean` | `false` | 如果设置此属性，则该 dialog 只读没有提交操作。 || actions | array<> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` || data | `object` | | 支持，如果不设定将默认将触发按钮的上下文中继承数据。 |",
|
|
|
|
|
|
"path": "/docs/components/dialog"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Divider 分割线",
|
|
|
|
|
|
"body": "## 基本用法## 不同样式## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ---------- | ----------------------------------- || type | `string` | | `\"dialog\"` 指定为 dialog 渲染器 || classname | `string` | | 外层 dom 的类名 || linestyle | `string` | `\"dashed\"` | 分割线的样式，支持`dashed`和`solid` |",
|
|
|
|
|
|
"path": "/docs/components/divider"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Drawer 抽屉",
|
|
|
|
|
|
"body": "## 基本用法## 抽屉尺寸## 指定弹出方向## 可拖拽抽屉大小配置`\"resizable\": true`，可以拖拽调整`drawer`大小## 不显示蒙层## 点击抽屉外自动关闭配置`\"closeonoutside\":true`### 显示蒙层### 不显示蒙层## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------- | --------------------------------- | ------------------ | ----------------------------------------------------------------------------------------- || type | `string` | | `\"drawer\"` 指定为 drawer 渲染器 || title | | | 弹出层标题 || body | | | 往 drawer 内容区加内容 || size | `string` | | 指定 drawer 大小，支持: `xs`、`sm`、`md`、`lg` || bodyclassname | `string` | `modal-body` | drawer body 区域的样式类名 || closeonesc | `boolean` | `false` | 是否支持按 `esc` 关闭 drawer || closeonoutside | `boolean` | `false` | 点击内容区外是否关闭 drawer || overlay | `boolean` | `true` | 是否显示蒙层 || resizable | `boolean` | `false` | 是否可通过拖拽改变 drawer 大小 || actions | array<> | 【确认】和【取消】 | 可以不设置，默认只有两个按钮。 || data | `object` | | 支持 ，如果不设定将默认将触发按钮的上下文中继承数据。 |",
|
|
|
|
|
|
"path": "/docs/components/drawer"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "DropDownButton",
|
|
|
|
|
|
"body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------- | ----------------- | ----------------------------------------- || type | `string` | `dropdown-button` | 类型 || label | `string` | | 按钮文本 || classname | `string` | | 外层 css 类名 || block | `boolean` | | 块状样式 || size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` || align | `string` | | 位置，可选`'left'`或`'right'` || buttons | `array<action>` | | 配置下拉按钮 || careticon | `string` | | careticon || icononly | `boolean` | | 只显示icon || defaultisopened | `boolean` | | 默认是否打开 || closeonoutside | `boolean` | | 点击外侧区域是否收起 |",
|
|
|
|
|
|
"path": "/docs/components/dropdown-button"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Each 循环渲染器",
|
|
|
|
|
|
"body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------ | -------- | -------- | ----------------------------------------------------------- || type | `string` | `\"each\"` | 指定为 each 组件 || value | `array` | `[]` | 用于循环的值 || name | `string` | | 获取数据域中变量，支持 || items | `object` | | 使用`value`中的数据，循环输出渲染器。 |",
|
|
|
|
|
|
"path": "/docs/components/each"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Array 数组输入框",
|
|
|
|
|
|
"body": " 的一个 flat 用法。## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------------------------------- | --------- | ------------------------------------------------------------------------ || type | `string` | `\"array\"` | 指明为`array`组件 || items | `string`或 | | 配置单项表单类型 || addable | `boolean` | | 是否可新增。 || removable | `boolean` | | 是否可删除 || draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 || draggabletip | `string` | | 可拖拽的提示文字，默认为：`\"可通过拖动每行中的【交换】按钮进行顺序调整\"` || addbuttontext | `string` | `\"新增\"` | 新增按钮文字 || minlength | `number` | | 限制最小长度 || maxlength | `number` | | 限制最大长度 |",
|
|
|
|
|
|
"path": "/docs/components/form/array"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Button-Group 按钮集合",
|
|
|
|
|
|
"body": "## 基本用法可以用作按钮组，进行按钮的合并展示。## 作为选择器表单项当不配置 `buttons` 属性时，`button-group`还可以作为 使用。更多属性查看 。## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || multiple | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | |",
|
|
|
|
|
|
"path": "/docs/components/form/button-group"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Button-Toolbar 按钮工具栏",
|
|
|
|
|
|
"body": "默认按钮独立配置的时候，是独占一行的，如果想让多个按钮在一起放置，可以使用 `button-toolbar` 组件## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------- | --------------------------- | ------------------ | ------------------------- || type | `string` | `\"button-toolbar\"` | 指定为 buttontoolbar 组件 || buttons | array<> | | 按钮组 |",
|
|
|
|
|
|
"path": "/docs/components/form/button-toolbar"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Button 按钮",
|
|
|
|
|
|
"body": "`form`中除了支持 以外，还支持一些特定的按钮。## 基本用法## 提交表单请配置`\"actiontype\": \"submit\"`或`\"type\": \"submit\"`按钮，可以触发表单提交行为，## 重置表单请配置`\"actiontype\": \"reset\"`或`\"type\": \"reset\"`按钮，可以触发表单提交行为。## 属性表见 ",
|
|
|
|
|
|
"path": "/docs/components/form/button"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Chain-Select 链式下拉框",
|
|
|
|
|
|
"body": "## 基本用法无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 api 拉取数据，只要 api 有返回结果，就能一直无限级别下拉下去。> `source`接口中配置的参数`waitseconds=1`和`maxlevel=4`是测试接口所需参数，实际使用自己接口时不需要添加这两个参数## 暴露参数为了帮助后端接口获取当前选择器状态，chained-select 会默认给 source 接口的数据域中，添加若干个参数：- `value`: 选中的表单项值；- `level`: 当前拉取数据时的层级,- `parentid`: 上一级选项的值，数据格式基于配置的`joinvalues`和`extractvalue`属性- `parent`: 上一级选项的完整的数据格式## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || autocomplete | `string`或 || delimiter | `string` | `,` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | |",
|
|
|
|
|
|
"path": "/docs/components/form/chain-select"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Checkbox 勾选框",
|
|
|
|
|
|
"body": "## 基本用法## 配置真假值默认情况：- 勾选框勾选时，表单项值为：true- 勾选框取消勾选时，表单项值为：false如果你想调整这个值，可以配置`truevalue`和`falsevalue`勾选上例中的勾选框，观察数据域变化，会发现勾选后值为`1`，而取消勾选后为`0`## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 ## 二级标题 || ---------- | -------- | --------- | ----------------------------------------------------------- || option | `string` | | 选项说明 || truevalue | `any` | `true` | 标识真值 || falsevalue | `any` | `\"false\"` | 标识假值 |",
|
|
|
|
|
|
"path": "/docs/components/form/checkbox"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Checkboxes 复选框",
|
|
|
|
|
|
"body": "## 基本用法## 展示多行可以配置`columnscount`属性调整展示列的个数## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || columnscount | `number` | `1` | 选项按几列显示，默认为一列 || checkall | `boolean` | `false` | 是否支持全选 || defaultcheckall | `boolean` | `false` | 默认是否全选 || creatable | `boolean` | `false` | || createbtnlabel | `string` | `\"新增选项\"` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | |",
|
|
|
|
|
|
"path": "/docs/components/form/checkboxes"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "City 城市选择器",
|
|
|
|
|
|
"body": "城市选择器，可用于让用户输入城市。## 基本用法观察数据域中表单项的值，存储的是位置邮编。## 配置选择级别可以通过设置 `allowdistrict` 和 `allowcity` 设置用户选择级别，例如只选择省份：## 获取更多选项信息表单项值默认格式是编码（即 `code`），如果你想要详细点的信息，可以把 `extractvalue` 设置成 `false`。## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------------------- || allowcity | `boolean` | `true` | 允许选择城市 || allowdistrict | `boolean` | `true` | 允许选择区域 || extractvalue | `boolean` | `true` | 默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。 |",
|
|
|
|
|
|
"path": "/docs/components/form/city"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Color 颜色选择器",
|
|
|
|
|
|
"body": "## 基本用法## 选择器预设颜色值颜色选择器底部预设有会写可选的颜色值，默认为：`['#d0021b', '#f5a623', '#f8e71c', '#8b572a', '#7ed321', '#417505', '#bd10e0', '#9013fe', '#4a90e2', '#50e3c2', '#b8e986', '#000000', '#4a4a4a', '#9b9b9b', '#ffffff']`你可以配置`presetcolors`数组进行自定义。## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- || format | `string` | `hex` | 请选择 `hex`、`hls`、`rgb`或者`rgba`。 || presetcolors | `array<string>` | | 选择器底部的默认颜色，数组内为空则不显示默认颜色 || allowcustomcolor | `boolean` | `true` | 为`false`时只能选择颜色，使用 `presetcolors` 设定颜色选择范围 || clearable | `boolean` | `\"label\"` | 是否显示清除按钮 || resetvalue | `string` | `\"\"` | 清除后，表单项值调整成该值 |",
|
|
|
|
|
|
"path": "/docs/components/form/color"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Combo 组合",
|
2020-12-10 17:50:24 +08:00
|
|
|
|
"body": "组合模式，支持自由组合多个表单项。当设置成单选时数据格式为对象，当设置成多选时数据格式为数组，数组成员是对象（flat 模式可以直接是某个表单单项的数值）。## 基本使用配置`controls`属性，组合多个表单项## 多行展示模式默认，combo 内表单项是横着展示一排，如果想换行展示，可以配置`\"multiline\": true`## 多选模式默认，combo 为单选模式，可以配置`\"multiple\": true`实现多选模式## 限制个数多选模式下，可以配置`minlength`和`maxlength`配置该 combo 可添加的条数## 值格式观察下例中表单数据域值的变化，可以发现：- 单选模式时，**数据格式为对象**；- 多选模式时，**数据格式为数组，数组成员是对象**### 打平值默认多选模式下，数据格式是对象数组的形式，当你配置的组合中只有一个表单项时，可以配置`\"flat\": true`，将值进行打平处理。查看上例表单数据域，可以看到打平后数据格式如下：## 唯一验证可以在配置的`controls`项上，配置`\"unique\": true`，指定当前表单项不可重复上例中，`text`和`select`都配置了`\"unique\": true`，新增多条 combo，在任意两个`text`输入框的值相同时，提交时都会报错`\"当前值不唯一\"`，而`select`选择框也不可选择重复的选项## 拖拽排序多选模式下，可以配置`\"draggable\": true`实现拖拽调整排序## 条件分支默认 combo 渲染的成员是固定表单项的，成员的类型时一致，如果不一致怎么办？这里可以设置条件分支来给不同的成员设置不同的表单项。如下面的例子，定义了两种类型：文本和数字，用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。- `conditions` array<condition> 数组，每个成员是一种类型- `conditions[x].label` 类型名称- `conditions[x].test` 表达式，目标成员数据是否属于这个类型？- `conditions[x].scaffold` 初始数据，当新增的时候直接使用此数据。- `conditions[x].controls` 该类型的表单设置。- `typeswitchable` 类型是否允许切换，如果设置成 true 会多一个类型切换的按钮。## tabs 模式默认成员是一个一个排列的，如果数据比较多有点让人眼花缭乱。所以 combo 支持了 tabs 的排列方式。- `tabsmode` boolean 用来开启此模式- `tabsstyle` string 样式，可选：`line`、`card` 或者 `radio`.- `tabslabeltpl` 用来生成标题的模板，默认为：`成员 ${index|plus}`注意：这是新引入的功能，目前还不支持拖拽组合使用。且此模式只有多选时才能生效。## 获取父级数据默认情况下，combo 内表达项无法获取父级数据域的数据，如下，我们添加 combo 表单项时，尽管 combo 内的文本框的`name`与父级数据域中的`super_text`变量同名，但是没有自动映射值。可以配置`\"canaccesssuperdata\": true`开启此特性，如下，配置了该配置项后，添加 combo 的`text`表单项会自动映射父级数据域的同名变量## 同步更新内部表单项配置`canaccesssuperdata`可以获取父级数据域值，但是为了效率，在父级数据域变化的时候，默认 combo 内部是不会进行同步的如下，添加一组 combo，然后可以看到默认会映射父级变量值`123`，但是当你在更改父级数据域`super_text`文本框值后，combo 内部文本框并没有同步更新如果想实现内部同步更新，需要如下配置：- 配置`\"strictmode\": false`- 配置`syncfields`字符串数组，数组项是需要同步的变量名以上面为例，我们在 combo 上配置`\"strictmode\": false`和`\"syncfields\": [\"super_text\"]`，即可实现同步## 设置序号默认 combo 数据域中，每一项会有一个隐藏变量`index`，可以利用 tpl 组件，显示当前项序号## 属性表当做选择器表单项使用时，除了支持 中
|
2020-12-02 17:02:44 +08:00
|
|
|
|
"path": "/docs/components/form/combo"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Date-Range 日期范围",
|
|
|
|
|
|
"body": "## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ----------- | ------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- || format | `string` | `x` | || inputformat | `string` | `yyyy-dd-mm` | || placeholder | `string` | `\"请选择日期范围\"` | 占位文本 || ranges | `array<string> 或 string` | `\"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter\"` | 日期范围快捷键，可选：today, yesterday, 1dayago, 7daysago, 90daysago, prevweek, thismonth, prevmonth, prevquarter, thisquarter` || mindate | `string` | | 限制最小日期，用法同 || maxdate | `string` | | 限制最大日期，用法同 || utc | `boolean` | `false` | || clearable | `boolean` | `true` | 是否可清除 |",
|
|
|
|
|
|
"path": "/docs/components/form/date-range"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Date 日期",
|
|
|
|
|
|
"body": "## 基本用法## 显示格式选中任意日期，可以看到默认显示日期的格式是像`2020-04-14`这样的格式，如果你想要自定义显示格式，那么可以配置`inputformat`。例如你想显示`2020年04月14日`这样的格式，查找 moment 文档可知配置格式应为 `yyyy年mm月dd日`，即：选中任意日期，观察显示格式## 值格式选中任意日期，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。如果你想要其他格式的日期值，，那么可以配置`format`参数用于调整表单项的值格式。例如你调整值为`2020-04-14`这样的格式，查找 moment 文档可知配置格式应为 `yyyy-mm-dd`，即：选中任意日期，观察数据域中表单项值的变化## 默认值可以设置`value`属性，设置日期选择器的默认值### 基本配置配置符合当前 的默认值。### 相对值`value` 还支持类似像`\"+1days\"`这样的相对值，更加便捷的配置默认值上例中配置了`\"value\": \"+1days\"`，默认就会选中明天。支持的相对值关键字有：- `today`: 当前日期- `day`或`days`: 天- `week`或`weeks`: 日- `month`或`months`: 月- `year`或`years`: 年## 限制范围可以通过配置`maxdate`和`mindate`显示可选范围### 固定时间值 ### 支持相对值范围限制也支持设置 。### 支持模板也支持通过，设置自定义值。来一个常见例子，配置两个选择`开始时间`和`结束时间`的时间选择器，需要满足：`开始时间`不能小于`结束时间`，`结束时间`也不能大于`开始时间`，。## 快捷键你也可以配置`shortcuts`属性支持快捷选择日期上例中我们配置了`\"shortcuts\": [\"yesterday\" ,\"today\", \"tomorrow\"]`，选择器顶部有将会显示快捷键`昨天`，`今天`和`明天`支持的快捷键有- `today`: 今天- `yesterday`: 昨天- `thisweek`: 本周一- `thismonth`: 本月初- `prevmonth`: 上个月初- `prevquarter`: 上个季节初- `thisquarter`: 本季度初- `tomorrow`: 明天- `endofthisweek`: 本周日- `endofthismonth`:本月底 - `{n}daysago` : n天前，例如：`1daysago`，下面用法相同- `{n}dayslater`: n天后- `{n}weeksago`: n周前- `{n}weekslater`: n周后- `{n}monthsago`: n月前- `{n}monthslater`: n月后- `{n}quartersago`: n季度前- `{n}quarterslater`: n季度后## utc## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 日期选择器值格式，更多格式类型请参考 || inputformat | `string` | `yyyy-dd-mm` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 || closeonselect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 || placeholder | `string` | `\"请选择日期\"` | 占位文本 || shortcuts | `string` | | 日期快捷键 || mindate | `string` | | 限制最小日期 || maxdate | `string` | | 限制最大日期 || utc | `boolean` | `false` | 保存utc值 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `obj
|
|
|
|
|
|
"path": "/docs/components/form/date"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Datetime-Range 日期时间范围",
|
|
|
|
|
|
"body": "## 基本用法## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ----------- | ------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- || format | `string` | `x` | || inputformat | `string` | `yyyy-dd-mm` | || placeholder | `string` | `\"请选择日期范围\"` | 占位文本 || ranges | `array<string> 或 string` | `\"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter\"` | 日期范围快捷键，可选：today, yesterday, 1dayago, 7daysago, 90daysago, prevweek, thismonth, prevmonth, prevquarter, thisquarter` || mindate | `string` | | 限制最小日期时间，用法同 || maxdate | `string` | | 限制最大日期时间，用法同 || utc | `boolean` | `false` | || clearable | `boolean` | `true` | 是否可清除 |",
|
|
|
|
|
|
"path": "/docs/components/form/datetime-range"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Datetime 日期时间",
|
|
|
|
|
|
"body": "## 基本用法## 显示格式选中任意日期时间，可以看到默认显示日期的格式是像`2020-04-14 12:20:10`这样的格式，如果你想要自定义显示格式，那么可以配置`inputformat`。例如你想显示`2020年04月14日 12时20分10秒`这样的格式，查找 moment 文档可知配置格式应为 `yyyy年mm月dd日 hh时mm分ss秒`，即：选中任意日期时间，观察显示格式## 值格式选中任意日期时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。如果你想要其他格式的日期值，，那么可以配置`format`参数用于调整表单项的值格式。例如你调整值为`2020-04-14 12:20:10`这样的格式，查找 moment 文档可知配置格式应为 `yyyy-mm-dd hh:mm:ss`，即：选中任意日期时间，观察数据域中表单项值的变化## 默认值可以设置`value`属性，设置日期选择器的默认值### 基本配置配置符合当前 的默认值。### 相对值`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后的时间。支持的相对值关键字除了 中的以外，还支持：- `now`: 当前时间- `minute`或`minutes`或`min`或`mins`: 分钟- `hour`或`hours`: 小时## 限制范围可以通过配置`maxdate`和`mindate`显示可选范围### 固定时间值### 支持相对值范围限制也支持设置 。### 支持模板也支持通过，设置自定义值。来一个常见例子，配置两个选择`开始时间`和`结束时间`的时间选择器，需要满足：`开始时间`不能小于`结束时间`，`结束时间`也不能大于`开始时间`，。## 快捷键你也可以配置`shortcuts`属性支持快捷选择日期上例中我们配置了`\"shortcuts\": [\"yesterday\" ,\"today\", \"tomorrow\"]`，选择器顶部有将会显示快捷键`昨天`，`今天`和`明天`除了支持 的快捷键有支持的快捷键除了 中的以外，还支持：- `now`: 现在- `{n}hoursago` : n 小时前，例如：`1daysago`，下面用法相同- `{n}hourslater` : n 小时前，例如：`1daysago`，下面用法相同## utc## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 日期时间选择器值格式，更多格式类型请参考 || inputformat | `string` | `yyyy-mm-dd hh:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 || placeholder | `string` | `\"请选择日期以及时间\"` | 占位文本 || shortcuts | `string` | | 日期时间快捷键 || mindate | `string` | | 限制最小日期时间 || maxdate | `string` | | 限制最大日期时间 || utc | `boolean` | `false` | 保存 utc 值 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |",
|
|
|
|
|
|
"path": "/docs/components/form/datetime"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "DiffEditor 对比编辑器",
|
|
|
|
|
|
"body": "## 基本使用## 禁用编辑器左侧编辑器始终不可编辑，右侧编辑器可以通过设置`disabled`或`disabledon`，控制是否禁用## diff 数据域中的两个变量如下例，左侧编辑器中的值，通过`\"diffvalue\": \"${value1}\"`获取，右侧编辑器的值，通过设置`\"name\": \"value2\"`，自动映射数据域中`value2`的值## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------- | ------------ | ------------------------------------------------------------------------------------------- || language | `string` | `javascript` | 编辑器高亮的语言，可选 || diffvalue | | | 左侧值 |",
|
|
|
|
|
|
"path": "/docs/components/form/diff-editor"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Editor 编辑器",
|
|
|
|
|
|
"body": "## 基本用法## 支持的语言可以设置`language`配置高亮的语言，支持的语言有：`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`、 `sol`、 `sql`、 `swift`、 `typescript`、 `vb`、 `xml`、 `yaml`当然你也可以使用`xxx-editor`这种形式，例如`\"type\": \"json-editor\"`## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || -------- | -------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ || language | `string` | `javascript` | 编辑器高亮的语言 || size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` || options | `object` | | monaco 编辑器的其它配置，比如是否显示行号等，请参考。 |",
|
|
|
|
|
|
"path": "/docs/components/form/editor"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "FieldSet 表单项集合",
|
|
|
|
|
|
"body": "fieldset 是用于分组展示表单项的一种容器型组件。## 基本用法可以通过配置标题`title`和表单项数组`controls`，实现多个表单项分组展示## 展示模式可以通过设置`mode`调整展示模式，用法同 下面`group`我们配置了`\"mode\": \"horizontal\"`，观察显示情况## 可折叠配置`\"collapsable\": true`可以实现点击标题折叠显隐表单项。### 默认是否折叠默认是展开的，如果想默认折叠，那么配置`\"collapsed\": false`默认折叠。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------------ | ------- | ------------------------------------------ || classname | `string` | | css 类名 || headingclassname | `string` | | 标题 css 类名 || bodyclassname | `string` | | 内容区域 css 类名 || title | | | 标题 || controls | array<> | | 表单项集合 || mode | `string` | | 展示默认，同 中的模式 || collapsable | `boolean` | `false` | 配置是否可折叠 || collapsed | `booelan` | | 展示默认，同 中的模式 |",
|
|
|
|
|
|
"path": "/docs/components/form/fieldset"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "File 文件上传",
|
|
|
|
|
|
"body": "## 基本用法用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了。## 限制文件类型可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`想要限制多个类型，则用逗号分隔，例如：`.csv,.md`## 手动上传如果不希望 file 组件上传，可以配置 `asblob` 或者 `asbase64`，采用这种方式后，组件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 form 表单提交的接口里面一起带上。上例中，选择任意文件，然后观察数据域变化；点击提交，amis 自动会调整接口数据格式为`formdata`## 分块上传如果文件过大，则可能需要使用分块上传## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ || reciever | | | 上传文件接口 || accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` || asbase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 || asblob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 || maxsize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`kb` || maxlength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 || multiple | `boolean` | `false` | 是否多选。 || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` |
|
|
|
|
|
|
"path": "/docs/components/form/file"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "FormItem 普通表单项",
|
|
|
|
|
|
"body": "**表单项** 是组成一个表单的基本单位，它具有的一些特性会帮助我们更好地实现表单操作。> 所有派生自`formitem`的组件，都具有`formitem`的特性。## 基本用法最基本的表单项配置像这样：- `name`: **必填属性**，标识表单数据域中，当前表单项值的`key`- `type`: **必填属性**，标识表单项类型- `label`: 标识表单项的标签> 所有表单项都只可以配置在`form`组件中，即`form`的`controls`属性中。## 表单项展示### 内联模式通过配置`\"inline\": true`，标识当前表单项使用内联模式。### 表单项尺寸可以配置`size`，来调整表单项的尺寸，支持`'xs' | 'sm' | 'md' | 'lg' | 'full'`，如下：> 不同组件的`size`效果可能会有所不同，具体请参考对应的组件文档。### 表单项标签设置`label`属性来配置表单项标签。当表单为水平布局时，左边即便是不设置`label`为了保持对齐也会留空，如果想要去掉空白，请设置成`false`。### 表单项标签提示配置`labelremark`可以实现标签描述提示### 配置禁用##### 静态配置通过配置`\"disabled\": true`来禁用表单项##### 通过条件配置是否禁用你也通过配置`disabledon`，来实现在某个条件下禁用当前表单项.### 配置显隐##### 静态配置通过配置`\"hidden\": true`或者`\"visible\": false`来禁用表单项上例中的`text2`被隐藏了。##### 通过条件配置显隐你也通过配置`hiddenon`，来实现在某个条件下禁用当前表单项.> `visible`和`hidden`，`visibleon`和`hiddenon`除了判断逻辑相反以外，没有任何区别## 表单项值表单项值，即表单项通过用户交互发生变化后，更新表单数据域中同`name`变量值.如上例，更改姓名表单项值，可以改变表单数据域中`name`变量的值。也支持链式配置 `name`属性，例如：`aaa.bbb`观察上例，这样更改表单项值，会改变数据域中`person.name`的值## 配置默认值通过配置`value`属性，可以设置表单项的默认值。`value`不支持数据映射，也就是说不可以直接配置类似于这样的语法：`${xxx}`，如果想要映射当前数据域中的某个变量，那么设置该表单项`name`为该变量名就行，如下：上例中我们表单数据域中有变量`\"text\": \"hello world!\"`，然后我们设置表达项`\"name\": \"text\"`，这样就可以自动映射值了。## 表单项必填### 静态配置通过配置`\"required\": true`来标识该表单项为必填。### 满足条件校验必填你也通过配置`requiredon`，来实现在某个条件下使当前表单项必填。## 格式校验可以配置`validations`属性，指定校验当前表单项值的格式可以通过对象形式配置同样也可以配置多个格式校验### 字符串形式（不推荐）也可以配置字符串形式来指定，如下例，输入不合法的值，点击提交会报错并显示报错信息也可以指定多个格式校验，中间用`逗号`分隔。如果需要配置参数，例如显示最大值或最小值，则在格式标识符后`:`和参数### 自定义校验信息amis 会有默认的报错信息，如果你想自定义校验信息，配置`validationerrors`属性如果需要获取当前格式校验配置的参数，可以使用`$1`### 表单项值发生变化即校验默认校验是当进行行为操作时，对表单项进行校验，如果你想每次表单项的值发生变化的时候就校验，请配置`\"validateonchange\": false`### 支持的格式校验- `isemptystring` 必须是空白字符。**注意！** 该格式校验是值，校验空白字符，而不是当前表单项是否为空，想校验是否为空，请配置 - `isemail` 必须是 email。- `isurl` 必须是 url。- `isnumeric` 必须是 数值。- `isalpha` 必须是 字母。- `isalphanumeric` 必须是 字母或者数字。- `isint` 必须是 整形。- `isfloat` 必须是 浮点形。- `islength:length` 是否长度正好等于设定值。- `minlength:length` 最小<EFBFBD>
|
|
|
|
|
|
"path": "/docs/components/form/formitem"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Formula 公式",
|
|
|
|
|
|
"body": "可以设置公式，将公式结果设置到指定表单项上。> 该表单项是隐藏的## 基本用法## 自动应用## 手动应用配置`\"autoset\": false`，然后按钮上配置`target`，配置值为`formula`的`id`值，就可以实现手动触发公式应用> 为什么设置`id`而不是设置`name`?>> 因为`name`值已经用来设置目标变量名了，这个表单项肯定已经存在了，所以不是唯一了，不能够被按钮指定。## 条件应用可以配置`condition`用来指定作用条件，有两种写法：- 用 tpl 语法，把关联的字段写上如： `${xxx} ${yyy}` 意思是当 xxx 和 yyy 的取值结果变化了就再应用一次公式结果。- 自己写判断如: `data.xxx == \"a\" && data.xxx !== data.__prev.xxx` 当 xxx 变化了，且新的值是字符 \"a\" 时应用，可以写更加复杂的判断。## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ----------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------- || name | `string` | | 需要应用的表单项`name`值，公式结果将作用到此处指定的变量中去。 || formula | | | 应用的公式 || condition | | | 公式作用条件 || initset | `boolean` | `true` | 初始化时是否设置 || autoset | `boolean` | `true` | 观察公式结果，如果计算结果有变化，则自动应用到变量上 || id | `boolean` | `true` | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoset` 为 false 时用来手动触发 |",
|
|
|
|
|
|
"path": "/docs/components/form/formula"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Grid 网格",
|
|
|
|
|
|
"body": "支持 form 内部再用 grid 布局进行渲染组件。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------------- | --------------------------------- | -------- | -------------------------------------------------------------- || type | `string` | `\"grid\"` | 指定为 grid 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns> | | 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合 || columns[x].columnclassname | `int` | | 配置列的 `classname` || columns[x].xs | `int` | | 宽度占比： 1 - 12 || columns[x].xshidden | `boolean` | | 是否隐藏 || columns[x].xsoffset | `int` | | 偏移量 1 - 12 || columns[x].xspull | `int` | | 靠左的距离占比：1 - 12 || columns[x].xspush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].sm | `int` | | 宽度占比： 1 - 12 || columns[x].smhidden | `boolean` | | 是否隐藏 || columns[x].smoffset | `int` | | 偏移量 1 - 12 || columns[x].smpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].smpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].md | `int` | | 宽度占比： 1 - 12 || columns[x].mdhidden | `boolean` | | 是否隐藏 || columns[x].mdoffset | `int` | | 偏移量 1 - 12 || columns[x].mdpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].mdpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].lg | `int` | | 宽度占比： 1 - 12 || columns[x].lghidden | `boolean` | | 是否隐藏 || columns[x].lgoffset | `int` | | 偏移量 1 - 12 || columns[x].lgpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].lgpush | `int` | | 靠右的距离
|
|
|
|
|
|
"path": "/docs/components/form/grid"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Group 表单项组",
|
|
|
|
|
|
"body": "表单项，默认都是一行显示一个，group 组件用于在一行展示多个表单项## 基本用法## 展示可以给`group`组件设置`mode`调整展示模式，用法同 下面`group`我们配置了`\"mode\": \"horizontal\"`，观察显示情况当表单在水平模式下时，如果`group`内表单项设置`\"label\": false`，会导致布局错乱，如下这时可以给`group`配置`label`属性，保持和其他表单项布局统一## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- || classname | `string` | | css 类名 || label | `string` | | group 的标签 || controls | array<> | | 表单项集合 || mode | `string` | | 展示默认，同 中的模式 || gap | `string` | | 表单项之间的间距，可选：`xs`、`sm`、`normal` || direction | `string` | `\"horizontal\"` | 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal` |",
|
|
|
|
|
|
"path": "/docs/components/form/group"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "HBox",
|
|
|
|
|
|
"body": "表单内部也可以使用 hbox 布局，实现左右排列。更推荐 ## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------- | ------------------------ | ------ | ---------------------------------------- || columns | array<> | | 列内容。每个 column 为一个独立的渲染器。 |### column 属性除了 支持属性以外，还支持以下几种属性| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------------------------- | ------ | ---------------------------------------------------------------------------- || columnclassname | `string` | | 配置列的 css 类名 || controls | array<> | | 表单项数组，如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 |",
|
|
|
|
|
|
"path": "/docs/components/form/hbox"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Hidden 隐藏字段",
|
|
|
|
|
|
"body": "## 基本用法默认表单提交，在没有 的情况下，只会发送 `controls` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件",
|
|
|
|
|
|
"path": "/docs/components/form/hidden"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Image 图片",
|
|
|
|
|
|
"body": "图片格式输入，默认 amis 会直接存储在 fex 的 hiphoto 里面，提交到 form 是直接的图片 url。## 基本用法## 限制文件类型可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`想要限制多个类型，则用逗号分隔，例如：`.jpg,.png`## 支持裁剪## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------- | ---------------------- | -------------------------------------------------------------------------------------------------- || reciever | | | 上传文件接口 || accept | `string` | `.jpeg,.jpg,.png,.gif` | 支持的图片类型格式，请配置此属性为图片后缀，例如`.jpg,.png` || maxsize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`kb` || maxlength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 || multiple | `boolean` | `false` | 是否多选。 || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || delimeter | `string` | `,` | || autoupload | `boolean` | `true` | 否选择完就自动开始上传 || hideuploadbutton | `boolean` | `false` | 隐藏上传按钮 || filefield | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 || crop | `boolean`或`{\"aspectratio\":\"\"}` | | 用来设置是否支持裁剪。 || crop.aspectratio | `number` | | 裁剪比例。浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。。 || limit | limit | | 限制图片大小，超出不让上传。 |### limit 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- || width | `number` | | 限制图片宽度。 || height | `number` | | 限制图片高度。 || minwidth | `number` | | 限制图
|
|
|
|
|
|
"path": "/docs/components/form/image"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Form 表单",
|
|
|
|
|
|
"body": "表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据。## 基本用法最基本的用法是配置 和 提交接口`api`。如下我们配置姓名和邮箱表单项，并可以填写数据并提交给接口`/api/mock2/form/saveform`。## 表单展示### 默认模式默认展示模式为文字表单项分行显示### 水平模式水平模式，左右摆放，左右比率分配。可以配置`horizontal`属性，调整偏移量，格式如下：### 内联模式使用内联模式展现表单项### 实现一行展示多个表单项使用 group 实现一行显示多个表单项### 底部按钮栏#### 隐藏默认提交按钮form 默认会在底部渲染一个提交按钮，用于执行表单的提交行为。你可以通过两种方式去掉这个默认的提交按钮：1. 配置：`\"submittext\": \"\"`2. 配置：`\"actions\": []`#### 配置若干自定义按钮同样，你可以通过 actions 属性，配置任意你想要的行为按钮。请记住，如果想触发表单提交行为，请配置`\"actiontype\": \"submit\"`或`\"type\": \"submit\"`按钮### 去掉表单边框通过配置`\"wrapwithpanel\": false`，可以去掉默认表单边框（包括标题，按钮栏以及边距样式等）。**注意！配置该属性后，`title`和`actions`属性将失效并无法渲染，请在表单内自行配置。**### 固定底部栏如果表单项较多导致表单过长，而不方便操作底部的按钮栏，可以配置`\"affixfooter\": true`属性，将底部按钮栏固定在浏览器底部## 表单项数据初始化表单可以通过配置`initapi`，实现表单初始化时请求接口，用于展示数据或初始化表单项。### 轮询初始化请求form 支持轮询初始化接口，步骤如下：1. 配置`initapi`2. 配置 `interval`：单位为`ms`，最低值`3000`，低于该值按`3000`处理如果希望在满足某个条件的情况下停止轮询，配置`stopautorefreshwhen`表达式。### 静态初始化数据域我们也可以手动设置 form 的数据域来初始化多个表单项值### 数据格式一致性问题当表单来初始化表单项值时，需要保持数据格式的一致性。如果表单初始化的值与表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，也许会导致不一致性的问题，我们看一个例子：上例中， `select` 我们配置了`\"multiple\": true`，预期中，我们希望选中 `a` 和 `c` 项时，表单项的数据格式为：`\"a,c\"`，但是我们表单数据域中，`select`默认值为`\"value\": [\"a\", \"c\"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题：1. 有可能不会默认选中 `a` 和 `c` 选项；2. 当不操作该表单项，直接提交时，预期是：`\"a,c\"`，但提交给后端的数据为：`[\"a\", \"c\"]`，导致了不一致性的问题。> 通过 `initapi` 配置默认值同理，不再赘述因此一定确保默认值与选择器表单项数据格式配置相匹配。## 表单提交配置`api`属性，当表单执行提交行为时，会默认将当前表单数据域中的数据使用`post`方式发送给所配置`api`点击提交按钮，会看到发送表单请求，请求数据体为：发送请求默认为 `post` 方式，会将所有表单项整理成一个对象发送过过去。除此之外你可以主动获取以下信息。- `diff` 只会包含 `diff` 结果- `prinstine` 原始数据 如:> 如果 返回了 `data` 对象，且是对象，会把结果 merge 到表单数据里面。当你需要配置特定的请求方式，请求体，`header`时，使用对象类型 api 配置，并使用 数据映射 进行数据配置。下面示例我们更改了请求方法为`put`，并在原提交数据的基础上添加一个字段`\"_from\"`。更多用法查看 文档触发表单提交行为有下面几种方式：1. 默认的`提交按钮`2. 为行为按钮配置`\"actiontype\": \"submit\"`3. 配置`\"type\": \"subm
|
|
|
|
|
|
"path": "/docs/components/form/index"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Input-Group 输入框组合",
|
|
|
|
|
|
"body": "**输入框组合选择器** 可用于输入框与其他组件进行组合。## 基本用法## 校验input-group 配置校验方法较为特殊，需要配置下面步骤：1. input-group 上配置任意`name`值2. input-group 的 controls 内配置的表单项上配置校验规则## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------- | ------ | ---------- || classname | `string` | | css 类名 || controls | array<> | | 表单项集合 |",
|
|
|
|
|
|
"path": "/docs/components/form/input-group"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "List 列表",
|
|
|
|
|
|
"body": "## 基本用法## 选项带图片## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || multiple | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | |",
|
|
|
|
|
|
"path": "/docs/components/form/list"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Matrix 矩阵",
|
|
|
|
|
|
"body": "矩阵类型的输入框。## 基本用法## 单选模式配置`\"multiple\": false`可以设置单选，配置`singleselectmode`可以设置单选模式## 动态选项可以配置 source 渲染动态选项以上面为例，source 接口返回格式如下：### column 模式默认为 column 模式，即每列只能单选某个单元格### cell 模式cell 模式，指全部选项中只能单选某个单元格### row 模式row 模式，每行只能单选某个单元格## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ---------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- || columns | `array<column>` | | 列信息，数组中 `label` 字段是必须给出的 || rows | `array<row>` | | 行信息， 数组中 `label` 字段是必须给出的 || rowlabel | `string` | | 行标题说明 || source | | | api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 || multiple | `boolean` | `true` | 是否多选 || singleselectmode | `string` | `\"column\"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 |",
|
|
|
|
|
|
"path": "/docs/components/form/matrix"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "NestedSelect 级联选择器",
|
|
|
|
|
|
"body": "## 基本用法## 选中父节点是否自动选中子节点默认选中父节点会自动选中子节点，可以设置`\"cascade\": true`，不自动选中子节点## 选中父节点，值是否包含子节点默认选中父节点，是不会带上子节点的值，想要自动带上子节点的值，那么配置`\"withchildren\": true`## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || delimeter | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | || cascade | `boolean` | `false` | 设置 `true`时，当选中父节点时不自动选择子节点。 || withchildren | `boolean` | `false` | 设置 `true`时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 || searchprompttext | `string` | `\"输入内容进行检索\"` | 搜索框占位文本 |",
|
|
|
|
|
|
"path": "/docs/components/form/nestedselect"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Number 数字输入框",
|
|
|
|
|
|
"body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ------------------------------- | ------ | -------------------- || min | | | 最小值 || max | | | 最大值 || step | `number` | | 步长 || precision | `number` | | 精度，即小数点后几位 |",
|
|
|
|
|
|
"path": "/docs/components/form/number"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Options 选择器表单项",
|
|
|
|
|
|
"body": "**选择器表单项** 是指那些（例如下拉选择框）具有选择器特性的表单项它派生自 ，拥有表单项所有的特性。## 选项组格式选择器表单项可以通过配置一组选项(`options`)，可以供给用户选择，如下：`options`属性配置的对象数组就是`select`选择器组件的选项组。### 标准格式标准的选项格式为对象数组，数组中的每个对象需要两个必备字段：- `label`：标识当前选项的显示文本，帮助用户选择- `value`：标识当前选项的值，用作数据保存和映射- `chlidren`：嵌套子选项，只有在 tree 或 nested-select 等支持嵌套功能的组件中才有用查看下面例子，修改选项你会发现数据域会发发生变化，改数据域中该表单项的值为选中选项的`value`值。### 简单格式也可以配置简单的字符串或数字数组，此时默认`label`和`value`保持一致## 静态选项组 options可以使用静态方式，配置一组选项组：## 动态选项组 source### 通过数据域中变量配置你也可以配置`source`属性，利用 ，获取当前数据链中的变量上例中，我们给 select 组件，配置`\"source\": \"${items}\"`，获取了当前数据域中的`items`变量作为选项组。### 远程拉取除了可以通过数据映射获取当前数据域中的变量以外，`source`还支持配置接口，格式为 ，用于动态返回选项组。远程拉取接口时，返回的数据结构除了需要满足 以外，必须用`\"options\"`作为选项组的`key`值，如下## 默认值/自动选中 value我们知道表单项可以通过配置`value`属性来设置默认值而选择器表单项如果设置`value`属性，为某一个选项中的`value`值，那么该选择器将自动选中该选项。### 静态配置静态配置同表单项默认值配置方式，直接在组件上配置`value`属性。上例我们设置默认值为`b`，则会自动匹配到选项`b`并选中。### 动态配置有时候我们想默认选中一个选项，但是`options`又是远程拉取的，无法确定默认值是啥，这时候，**需要在`source`接口中返回`value`，来动态设置默认值**，**接口返回数据结构**如下：### 数据格式一致性问题当使用 `source` 或 `value` 配置默认值的时候，需要保持数据格式的一致性。如果使用 `source` 或 `value` 配置的默认值与当前表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，可能会导致不一致性的问题，我们看一个例子：上例中， `select` 我们配置了`\"multiple\": true`，预期中，我们希望选中 `a` 和 `c` 项时，表单项的数据格式为：`\"a,c\"`，但是我们设置了`\"value\": [\"a\", \"c\"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题：1. 有可能不会默认选中 `a` 和 `c` 选项；2. 当不操作该表单项，直接提交时，预期是：`\"a,c\"`，但提交给后端的数据为：`[\"a\", \"c\"]`，导致了不一致性的问题。> 通过 `source` 配置默认值同理，不再赘述因此一定确保默认值与选择器表单项数据格式配置相匹配。## 多选 multiple大部分选择器组件默认是单选的，可以配置`\"multiple\": true`支持多选。默认多选的值格式为逗号拼接 value 值，例如：`1,2,3`，如果需要改变值格式，请阅读下面 配置项。## 拼接符 delimiter多选模式下，默认表单项值为选中的选项的`value`值，用默认拼接符`,`拼接，如下默认的拼接符是逗号`,`，但是当你的某个选项中的`value`值内包含`,`这个字符，这样会造成一些预期中的问题你可以设置`delimiter`属性，自定义拼接符，保证不与你选项中的`value`值冲突上例我们`value`中有逗号，与默认拼接符冲突，这时设置`\"delimiter\": \"|\"`，可以看到选择多个选项时，每个选项的`value`属性会用`|`拼<EFBFBD>
|
|
|
|
|
|
"path": "/docs/components/form/options"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Panel 面板",
|
|
|
|
|
|
"body": "还是为了布局，可以把一部分 合并到一个 panel 里面单独展示。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ------------------------------------ | ------ | ------------------------------------------------------------------- || title | `string` | | panel 标题 || body | | | 内容区 || bodyclassname | `string` | | body 的 classname || footer | | | 底部区 || footerclassname | `string` | | footer 的 classname || controls | array<表单项> | | `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 |- `title` panel 标题- `body` 可以是其他渲染模型。- `bodyclassname` body 的 classname.- `footer` 可以是其他渲染模型。- `footerclassname` footer 的 classname.- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。",
|
|
|
|
|
|
"path": "/docs/components/form/panel"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Picker 列表选择器",
|
|
|
|
|
|
"body": "列表选取。可以静态数据，或者通过接口拉取动态数据。## 基本用法## 配置 pickerschema可以配置 pickerschema，实现弹框 crud 选择模式，更多 crud 配置可查看 crud 文档## 内嵌模式可以配置`\"embed\": true`，实现内嵌 picker## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || multiple | `boolean` | | 是否为多选。 || delimeter | `boolean` | `false` | || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || autofill | `object` | | || modalmode | `string` | `\"dialog\"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 || pickerschema | `string` | `{mode: 'list', listitem: {title: '${label}'}}` | 即用 list 类型的渲染，来展示列表信息。更多配置参考 || embed | `boolean` | `false` | 是否使用内嵌模式 |",
|
|
|
|
|
|
"path": "/docs/components/form/picker"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Radios 单选框",
|
|
|
|
|
|
"body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || columnscount | `number` | `1` | 选项按几列显示，默认为一列 || autofill | `object` | | |",
|
|
|
|
|
|
"path": "/docs/components/form/radios"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Range 滑块",
|
|
|
|
|
|
"body": "## 基本用法## 选择范围## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------- || classname | `string` | | css 类名 || min | `number` | | 最小值 || max | `number` | | 最大值 || step | `number` | | 步长 || multiple | `boolean` | `false` | 支持选择范围 || joinvaluse | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交，开启`multiple`时有效 || delimiter | `string` | `,` | 分隔符 || unit | `string` | | 单位 || clearable | `boolean` | | 是否可清除 || showinput | `string` | | 是否显示输入框 |",
|
|
|
|
|
|
"path": "/docs/components/form/range"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Rating 评分",
|
|
|
|
|
|
"body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || -------- | --------- | ------- | ------------------ || half | `boolean` | `false` | 是否使用半星选择 || count | `number` | `5` | 共有多少星可供选择 || readonly | `boolean` | `false` | 只读 |",
|
|
|
|
|
|
"path": "/docs/components/form/rating"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Repeat 重复频率选择器",
|
|
|
|
|
|
"body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ----------------------------- | ------------------------------------------------------------------------ || options | `string` | `hourly,daily,weekly,monthly` | 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly` || placeholder | `string` | `不重复` | 当不指定值时的说明。 |",
|
|
|
|
|
|
"path": "/docs/components/form/repeat"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Rich-Text 富文本编辑器",
|
|
|
|
|
|
"body": "目前富文本编辑器基于两个库：，默认使用 tinymce。## 基本用法### tinymce 自定义配置可以设置 options 属性来自定义编辑器的展现，详细配置项请参考。注意在下面的编辑器里修改 json 配置后不会实时生效。## 使用 froala 编辑器只需要加一行 `\"vendor\": \"froala\"` 配置就行，froala 是付费产品，需要设置 才能去掉水印。### froala buttons 配置项froala 可以通过设置 buttons 参数来控制显示哪些按钮，默认是这些：## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------- | ---------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- || saveasubb | `boolean` | | 是否保存为 ubb 格式 || reciever | | | 默认的图片保存 api || size | `string` | | 框的大小，可设置为 `md` 或者 `lg` || options | `object` | | 需要参考 的文档 || buttons | `array<string>` | | froala 专用，配置显示的按钮，tinymce 可以通过前面的 options 设置 字符串 |",
|
|
|
|
|
|
"path": "/docs/components/form/rich-text"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Select 选择器",
|
|
|
|
|
|
"body": "## 基本用法更多设置项请参考 ## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | ----------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | || autocomplete | || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || checkall | `boolean` | `false` | 是否支持全选 || checkalllabel | `string` | `全选` | 全选的文字 || defaultcheckall | `boolean` | `false` | 默认是否全选 || creatable | `boolean` | `false` | || multiple | `boolean` | `false` | || searchable | `boolean` | `false` | || createbtnlabel | `string` | `\"新增选项\"` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | || autofill | `object` | | |",
|
|
|
|
|
|
"path": "/docs/components/form/select"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Service 功能容器",
|
|
|
|
|
|
"body": "## 基本用法上例中我们在`text`表单项外，嵌套一层 service，用于初始化该表单项> 一般初始化表单项是使用 form 的`initapi`配置，当你需要多个接口来初始化一个表单中的表单项时，可以考虑使用 service## 作为 formitem 的不同点除了支持非表单项时的的功能以外。作为 formitem 使用时最大的不同在于作为容器渲染器，他的孩子是优先用表单项还是非表单项。比如放置一个 `{type: 'text'}`，是渲染一个文本输入框、还是一个文本展示？两种应该都存在可能，所以作为表单项的 service, 有两种用法，当把孩子节点放在 `controls` 里面时输出表单项，如果放在 `body` 底下时输出非表单项。### 放在 body 属性下，输出纯展示类组件### 放在 controls 属性下，输出表单项## 接口联动service 中的`api`和`schemaapi`都支持**接口联动**。下面例子中，`数据模板`下拉框的值变化后，会触发 service 重新拉取 api 接口，从而更新数据源，变化表单项的值，更多用法查看 。## 动态渲染表单项默认 service 可以通过配置`schemaapi` ，但是如果想渲染表单项，请返回下面这种格式：例如下例：`schemaapi` 除了能返回表单项之外，还能同时返回表单数据，如果你这样返回接口",
|
|
|
|
|
|
"path": "/docs/components/form/service"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Static 静态展示",
|
|
|
|
|
|
"body": "用来在表单中，展示静态数据## 基本用法## 数据域变量映射除了显式配置`value`属性，来展示数据以外，支持通过配置`name`属性，来自动映射数据域中的相关变量## 展示其他组件支持通过配置`type`为`static-xxx`的形式，展示其他 **非** 组件，例如：理论上可以支持所有非表达项的所有组件，并且支持对应的配置项，下面是一些示例：想要调整展示组件的配置，请查阅相应组件的文档。",
|
|
|
|
|
|
"path": "/docs/components/form/static"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "SubForm 子表单",
|
|
|
|
|
|
"body": "## 基本用法## 多选模式可以配置`\"multiple\": true`，实现多选模式## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------- | --------------------------- | ------------------------------------------------------ || multiple | `boolean` | `false` | 是否为多选模式 || labelfield | `string` | | 当值中存在这个字段，则按钮名称将使用此字段的值来展示。 || btnlabel | `string` | `\"设置\"` | 按钮默认名称 || minlength | `number` | `0` | 限制最小长度。 || maxlength | `number` | `0` | 限制最大长度。 || addbuttonclassname | `string` | `btn-success btn-sm` | 新增按钮 css 类名 || editbuttonclassname | `string` | `btn-info btn-addon btn-sm` | 修改按钮 css 类名 || form | |",
|
|
|
|
|
|
"path": "/docs/components/form/subform"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Switch 开关",
|
|
|
|
|
|
"body": "## 基本用法## 配置真假值默认情况：- 开关打开时，表单项值为：true- 开关关闭时，表单项值为：false如果你想调整这个值，可以配置`truevalue`和`falsevalue`调整开关，观察数据域变化，会发现打开后值为`1`，而关闭后为`0`## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------- | -------- | --------- | -------- || option | `string` | | 选项说明 || truevalue | `any` | `true` | 标识真值 || falsevalue | `any` | `\"false\"` | 标识假值 |",
|
|
|
|
|
|
"path": "/docs/components/form/switch"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Table 表格",
|
|
|
|
|
|
"body": "## 基本用法可以用来展示数组类型的数据。配置`columns` 数组，来定义列信息。我们为表单数据域设置了`table`变量，配置`table`表单项可以展示该数据## 可新增行可以配置`addable`和`editable`指定可以新增且编辑行数据### 按钮触发新增行按钮上配置`\"actiontype\": \"add\"`和`target`指定表格`name`，可以实现点击按钮添加一行的效果。当表格上配置了`addapi`时，会请求该 `api`，并将返回数据添加到目标表格。### 编辑行配置还可以在列上配置`quickedit`实现编辑配置，更多配置参考 ## 可拖拽配置`\"draggable\": true`，实现可拖拽调整顺序## 非确认模式配置`\"needconfirm\": false`，不需要确认，那么就是一直就是处于编辑形态。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------------------- | ----------------------- | ---------------- | ---------------------------------------- || type | `string` | `\"table\"` | 指定为 table 渲染器 || addable | `boolean` | `false` | 是否可增加一行 || editable | `boolean` | `false` | 是否可编辑 || removable | `boolean` | `false` | 是否可删除 || showaddbtn | `boolean` | `true` | 是否显示添加按钮 || addapi | | - | 新增时提交的 api || updateapi | | - | 修改时提交的 api || deleteapi | | - | 删除时提交的 api || addbtnlabel | `string` | | 增加按钮名称 || addbtnicon | `string` | `\"fa fa-plus\"` | 增加按钮图标 || updatebtnlabel | `string` | `\"\"` | 更新按钮名称 || updatebtnicon | `string` | `\"fa fa-pencil\"` | 更新按钮图标 || deletebtnlabel | `string` | `\"\"` | 删除按钮名称 || deletebtnicon | `string` | `\"fa fa-minus\"` | 删除按钮图标 || confirmbtnlabel | `string` | `\"\"` | 确认编辑按钮名称 || confirmbtnicon | `string` | `\"fa fa-check\"` | 确认编辑按钮图标 || cancelbtnlabel | `string` | `\"\"` | 取消编辑按钮名称 || cancelbtnicon | `string` | `\"fa fa-times\"` | 取消编辑按钮图标 || columns | `array` | [] | 列信息 || columns[x].quickedit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 || columns[x].quickeditonupdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |",
|
|
|
|
|
|
"path": "/docs/components/form/table"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "TabsTransfer 组合穿梭器",
|
|
|
|
|
|
"body": "在的基础上扩充了左边的展示形式，支持 tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectmode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。## 属性表更多配置请参考。",
|
|
|
|
|
|
"path": "/docs/components/form/tabs-transfer"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Tabs 选项卡",
|
|
|
|
|
|
"body": "有多组输入框时，也可以通过选项卡来分组。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | ------------------------------------ | ------ | ------------------- || tabs | `array` | | tabs 内容 || toolbar | | | tabs 中的工具栏 || toolbarclassname | `string` | | tabs 中工具栏的类名 || tabs[x].title | `string` | | tab 标题 || tabs | | 内容容器 || tabs> | | 表单项集合。 |",
|
|
|
|
|
|
"path": "/docs/components/form/tabs"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Tag 标签选择器",
|
|
|
|
|
|
"body": "## 基本使用## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || optionstip | `array<object>`或`array<string>` | `\"最近您使用的标签\"` | 选项提示 || source | `string`或 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 || resetvalue | `string` | `\"\"` | 删除后设置此配置项给定的值。 |",
|
|
|
|
|
|
"path": "/docs/components/form/tag"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Text 输入框",
|
|
|
|
|
|
"body": "## 基本使用## 不同类型配置`type`可以支持不同格式的文本输入框## 附加组件可以配置`addon`，附带附加组件## 选择器模式配置`options`即可支持选择器模式。选择器模式下，支持部分选择器组件支持的配置项，具体请查看下面的属性表## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || autocomplete | `string`或 || multiple | `boolean` | | || delimeter | `string` | `,` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || addon | `addon` | | 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。 || addon.type | `string` | | 请选择 `text` 、`button` 或者 `submit`。 || addon.label | `string` | | 文字说明 || addon.xxx | `string` | | 其他参数请参考按钮文档 || trimcontents | `boolean` | | 是否去除首尾空白文本。 || clearable | `boolean` | | 是否可清除 || resetvalue | `string` | `\"\"` | 清除后设置此配置项给定的值。 |",
|
|
|
|
|
|
"path": "/docs/components/form/text"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Textarea 多行文本输入框",
|
|
|
|
|
|
"body": "## 基本使用## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------- | ------ | ---------------------- || minrows | `number` | | 最小行数 || maxrows | `number` | | 最大行数 || trimcontents | `boolean` | | 是否去除首尾空白文本。 |",
|
|
|
|
|
|
"path": "/docs/components/form/textarea"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Time 时间",
|
|
|
|
|
|
"body": "## 基本用法## 显示格式选中任意时间，可以看到默认显示时间的格式是像`01:01`这样的格式，如果你想要自定义显示格式，那么可以配置`inputformat`。例如你想显示`01时01分`这样的格式，查找 moment 文档可知配置格式应为 `hh时mm分`，即：调整时间，观察显示格式## 值格式选中任意时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。如果你想要其他格式的日期值，，那么可以配置`format`参数用于调整表单项的值格式。例如你调整值为`01:11`这样的格式，查找 moment 文档可知配置格式应为 `hh:mm`，即：调整时间，观察数据域中表单项值的变化## 默认值可以设置`value`属性，设置日期选择器的默认值### 基本配置配置符合当前 的默认值。### 相对值`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后。支持的相对值关键字有：- `now`: 当前时间- `hour`或`hours`: 时- `minute`或`minutes`: 分- `second`或`seconds`: 秒## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- || value | `string` | | || format | `string` | `x` | 时间选择器值格式，更多格式类型请参考 || inputformat | `string` | `hh:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 || placeholder | `string` | `\"请选择时间\"` | 占位文本 || clearable | `boolean` | `true` | 是否可清除 || timeconstrainst | `object` | `true` | 请参考： |",
|
|
|
|
|
|
"path": "/docs/components/form/time"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Transfer 穿梭器",
|
|
|
|
|
|
"body": "## 基本用法## 展示模式### 分组### 表格模式### 树形模式### 级联选择### 支持搜索### 延时加载### 关联选择模式## searchapi**发送**默认 get，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。**响应**格式要求如下：适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。## 属性表除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || delimeter | `string` | `false` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || searchable | `boolean` | `false` | 当设置为 `true` 时表示可以通过输入部分内容检索出选项。 || searchapi | | | 如果想通过接口检索，可以设置个 api。 || statistics | `boolean` | `true` | 是否显示统计数据 || selecttitle | `string` | `\"请选择\"` | 左侧的标题文字 || resulttitle | `string` | `\"当前选择\"` | 右侧结果的标题文字 || sortable | `boolean` | `false` | 结果可以进行拖拽排序 || selectmode | `string` | `list` | 可选：`list`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、<EFBFBD><EFBFBD>
|
|
|
|
|
|
"path": "/docs/components/form/transfer"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Tree 树形选择框",
|
|
|
|
|
|
"body": "## 基本使用配置的`options`中，可以通过`children`字段进行嵌套展示，实现树形选择器## 选择器样式配置`\"type\": \"tree-select\"`可以实现选择器样式## 选中父节点是否自动选中子节点默认选中父节点会自动选中子节点，可以设置`\"cascade\": true`，不自动选中子节点## 选中父节点，值是否包含子节点默认选中父节点，是不会带上子节点的值，想要自动带上子节点的值，那么配置`\"withchildren\": true`也可以设置`onlychildren`，实现只包含子节点的值## 默认展开默认是展开所有子节点的，如果不想默认展开，则配置`\"initiallyopen\": false`如果层级较多，也可以配置`unfoldedlevel`指定展开的层级数。下例中设置`\"unfoldedlevel\": 1`，默认展开第 1 层## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------- | ------------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || autocomplete | || multiple | `boolean` | `false` | 是否多选 || delimeter | `string` | `false` | || labelfield | `string` | `\"label\"` | || valuefield | `string` | `\"value\"` | || joinvalues | `boolean` | `true` | || extractvalue | `boolean` | `false` | || creatable | `boolean` | `false` | || addcontrols | array< || addapi | || editable | `boolean` | `false` | || editcontrols | array< || editapi | || removable | `boolean` | `false` | || deleteapi | || hideroot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` || rootlabel | `boolean` | `\"顶级\"` | 当 `hideroot` 不为 `false` 时有用，用来设置顶级节点的文字。 || showicon | `boolean` | `true` | 是否显示图标 || showradio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 || initiallyopen | `boolean` | `true` | 设置是否默认展开所有层级。 || unfoldedlevel | `number` | `0` | 设置默认<EFBFBD><EFBFBD>
|
|
|
|
|
|
"path": "/docs/components/form/tree"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "TreeSelect 树形选择器",
|
|
|
|
|
|
"body": "## 基本使用更多用法，见 ",
|
|
|
|
|
|
"path": "/docs/components/form/treeselect"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Grid 网格布局",
|
|
|
|
|
|
"body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------------------- | -------- | ----------------------- || type | `string` | `\"grid\"` | 指定为 grid 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns[x].xs | `int` | | 宽度占比： 1 - 12 || columns[x].xshidden | `boolean` | | 是否隐藏 || columns[x].xsoffset | `int` | | 偏移量 1 - 12 || columns[x].xspull | `int` | | 靠左的距离占比：1 - 12 || columns[x].xspush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].sm | `int` | | 宽度占比： 1 - 12 || columns[x].smhidden | `boolean` | | 是否隐藏 || columns[x].smoffset | `int` | | 偏移量 1 - 12 || columns[x].smpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].smpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].md | `int` | | 宽度占比： 1 - 12 || columns[x].mdhidden | `boolean` | | 是否隐藏 || columns[x].mdoffset | `int` | | 偏移量 1 - 12 || columns[x].mdpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].mdpush | `int` | | 靠右的距离占比： 1 - 12 || columns[x].lg | `int` | | 宽度占比： 1 - 12 || columns[x].lghidden | `boolean` | | 是否隐藏 || columns[x].lgoffset | `int` | | 偏移量 1 - 12 || columns[x].lgpull | `int` | | 靠左的距离占比：1 - 12 || columns[x].lgpush | `int` | | 靠右的距离占比： 1 - 12 |更多使用说明，请参看 ",
|
|
|
|
|
|
"path": "/docs/components/grid"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "HBox 布局",
|
|
|
|
|
|
"body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------------- | --------------------------------- | -------------- | -------------------- || type | `string` | `\"hbox\"` | 指定为 hbox 渲染器 || classname | `string` | | 外层 dom 的类名 || columns | `array` | | 列集合 || columns | | 成员可以是其他渲染器 || columns[x].columnclassname | `string` | `\"wrapper-xs\"` | 列上类名 |",
|
|
|
|
|
|
"path": "/docs/components/hbox"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Html",
|
|
|
|
|
|
"body": "## 基本用法渲染一段 html> 当需要获取数据域中变量时，使用 。",
|
|
|
|
|
|
"path": "/docs/components/html"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Icon 图标",
|
|
|
|
|
|
"body": "## 基本使用| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ------ | ------------------------------ || type | `string` | `icon` | 指定组件类型 || classname | `string` | | 外层 css 类名 || icon | `string` | | icon 名，只支持 fontawesome v4 |",
|
|
|
|
|
|
"path": "/docs/components/icon"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "iFrame",
|
|
|
|
|
|
"body": "## 基本使用内嵌外部站点，可用 iframe 来实现。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ---------- | -------------------- || type | `string` | `\"iframe\"` | 指定为 iframe 渲染器 || classname | `string` | | iframe 的类名 || frameborder | `array` | | frameborder || style | `object` | | 样式 || src | `string` | | iframe地址 || height | `string` | `\"100%\"` | iframe高 || width | `string` | `\"100%\"` | iframe宽 |",
|
|
|
|
|
|
"path": "/docs/components/iframe"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Image 图片",
|
|
|
|
|
|
"body": "## 基本使用也可以配置`value`属性## 配置标题和说明## 配置缩略图### 显示模式### 显示比例## 放大功能配置`\"enlargeable\": true`，鼠标移动到图片上会显示可点击图标，点击可放大展示可以配置`originalsrc`，来指定原图资源地址，作为放大预览的图片地址`enlargetitle`和`enlargecaption`可以配置放大预览中的标题和描述## 用作 field 时当用在 table 的列配置 column、list 的内容、card 卡片的内容和表单的static-xxx 中时，可以设置`name`属性，映射同名变量### table 中的列类型list 的内容、card 卡片的内容配置同上### form 中静态展示| 属性名 | 类型 | 默认值 | 说明 || -------------- | --------- | --------- | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || imageclassname | `string` | | 图片 css 类名 || title | `string` | | 标题 || imagecaption | `string` | | 描述 || placeholder | `string` | | 占位文本 || defaultimage | `string` | | 默认显示的图片地址 || src | `string` | | 缩略图地址 || originalsrc | `string` | | 原图地址 || enlargeable | `boolean` | | 支持放大预览 || enlargetitle | `string` | | 放大预览的标题 || enlargecaption | `string` | | 放大预览的描述 || thumbmode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` || thumbratio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |",
|
|
|
|
|
|
"path": "/docs/components/image"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Images 图片集",
|
|
|
|
|
|
"body": "图片集展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`、`form`或`crud`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法也可以直接指定`value`字段：## 图片集值是对象数组除了支持纯文本数组以外，也支持对象数组，### 配置预览图地址需要设置对象中预览图地址的`key`值为`image`如果`key`值不是`image`，也可以在 **images组件** 上，通过配置`src`，使用数据映射，来获取图片地址### 配置原图地址需要设置对象中原图地址的`key`值为`src`如果原图数据的`key`值不是`src`，也可以在 **images组件** 上，通过配置`originalsrc`，使用数据映射，来获取原图片地址### 配置标题和说明设置对象中标题的`key`值为`title`，说明的`key`为`description`或`caption`。## 配置放大预览在 **images组件** 上，配置`enlargeable`，支持放大预览## 用作 field 时当用在 table 的列配置 column、list 的内容、card 卡片的内容和表单的static-xxx 中时，可以设置`name`属性，映射同名变量### table 中的列类型list 的内容、card 卡片的内容配置同上### form 中静态展示## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------ | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------- || type | `string` | `images` | 如果在 table、card 和 list 中，为`\"images\"`；在 form 中用作静态展示，为`\"static-images\"` || classname | `string` | | 外层 css 类名 || defaultimage | `string` | | 默认展示图片 || value | `string`或`array<string>`或`array<object>` | | 图片数组 || source | `string` | | 数据源 || delimiter | `string` | `,` | 分隔符，当value为字符串时，用该值进行分隔拆分 || src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 || originalsrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 || enlargeable | `boolean` | | 支持放大预览 || thumbmode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` || thumbratio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |",
|
|
|
|
|
|
"path": "/docs/components/images"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Json",
|
|
|
|
|
|
"body": "json 展示组件## 基本用法## 主题可配置`jsontheme`，指定显示主题，可选`twilight`和`eighties`，默认为`twilight`。## 配置默认展开层级如上，`levelexpand`配置为`0`，则默认不展开。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ---------- | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"json\"`；在 form 中用作静态展示，为`\"static-json\"` || classname | `string` | | 外层 css 类名 || placeholder | `string` | `-` | 占位文本 || levelexpand | `number` | `1` | 默认展开的层级 || jsontheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` |",
|
|
|
|
|
|
"path": "/docs/components/json"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Link 链接",
|
|
|
|
|
|
"body": "## 基本用法## 新标签页打开## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------- | --------- | ------ | ------------------------------------------------------------------------------------ || type | `string` | | 如果在 table、card 和 list 中，为`\"link\"`；在 form 中用作静态展示，为`\"static-link\"` || body | `string` | | 标签内文本 || href | `string` | | 链接地址 || blank | `boolean` | | 是否在新标签页打开 || htmltarget | `string` | | a标签的target |",
|
|
|
|
|
|
"path": "/docs/components/link"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "List 列表",
|
|
|
|
|
|
"body": "列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法或者你也可以使用 crud 的 ## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------------ | ---------------------------- | --------------------- | -------------------------------------------------------------------- || type | `string` | | `\"list\"` 指定为列表展示。 || title | `string` | | 标题 || source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持 || placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 || classname | `string` | | 外层 css 类名 || headerclassname | `string` | `amis-list-header` | 顶部外层 css 类名 || footerclassname | `string` | `amis-list-footer` | 底部外层 css 类名 || listitem | `array` | | 配置单条信息 || listitem.title | | | 标题 || listitem.titleclassname | `string` | `h5` | 标题 css 类名 || listitem.subtitle | | | 副标题 || listitem.avatar | | | 图片地址 || listitem.avatarclassname | `string` | `thumb-sm avatar m-r` | 图片 css 类名 || listitem.desc | | | 描述 || listitem.body | `array` | | 内容容器，主要用来放置非表单项组件 || listitem.actions | array<> | | 按钮区域 |",
|
|
|
|
|
|
"path": "/docs/components/list"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Mapping 映射",
|
|
|
|
|
|
"body": "## 基本用法## 渲染 html## 用作 field 时当用在 table 的列配置 column、list 的内容、card 卡片的内容和表单的static-xxx 中时，可以设置`name`属性，映射同名变量### table 中的列类型list 的内容、card 卡片的内容配置同上### form 中静态展示## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || placeholder | `string` | | 占位文本 || map | `object` | | 映射配置 |",
|
|
|
|
|
|
"path": "/docs/components/mapping"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Nav 导航",
|
|
|
|
|
|
"body": "用于展示链接导航## 基本用法## 横向摆放## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------------- | -------------------------------- | ------- | -------------------------------------- || type | `string` | `\"nav\"` | 指定为 nav 渲染器 || classname | `string` | | 外层 dom 的类名 || stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 || links | `array` | | 链接集合 || links[x].label | `string` | | 名称 || links | | 链接地址 || links[x].icon | `string` | | 图标 || links[x].active | `boolean` | | 是否高亮 || links | | 是否高亮的条件，留空将自动分析链接地址 |",
|
|
|
|
|
|
"path": "/docs/components/nav"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Page 页面",
|
|
|
|
|
|
"body": "page 组件是 amis 页面 json 配置中，**唯一的** 顶级容器组件，是整个页面配置的入口组件。## 基本用法我们这里在内容区中简单渲染一段文字。## 渲染组件内容区同样可以渲染各种组件，这里我们渲染一个表单。## 在其他区域渲染组件page 默认将页面分为几个区域，分别是**内容区（`body`）**、**侧边栏（`aside`）** 和 **工具栏（`toolbar`）部分**，你可以在这些区域配置你想要的组件和内容。> 不同区域都是`page`的子节点，也就是说都可以使用`page`下数据作用域。## 页面初始化请求通过配置`initapi`，可以在初始化页面时请求所配置的接口。具体 api 规范查看 。## 轮询初始化接口想要在页面渲染后，轮询请求初始化接口，步骤如下：1. 配置 initapi；2. 配置 interval：单位为 ms，最低值 3000，低于该值按 3000 处理。如果希望在满足某个条件的情况下停止轮询，配置`stopautorefreshwhen`表达式。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | --------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------- || type | `string` | `\"page\"` | 指定为 page 组件 || title | | | 页面标题 || subtitle | | | 页面副标题 || remark | | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 || aside | | | 往页面的边栏区域加内容 || toolbar | | | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 || body | | | 往页面的内容区域加内容 || classname | `string` | | 外层 dom 类名 || toolbarclassname | `string` | `v-middle wrapper text-right bg-light b-b` | toolbar dom 类名 || bodyclassname | `string` | `wrapper` | body dom 类名 || asideclassname | `string` | `w page-aside-region bg-auto` | aside dom 类名 || headerclassname | `string` | `bg-light b-b wrapper` | header 区域 dom 类名 || initapi | | | page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 || initfetch | `boolean` | `true` | 是否起始拉取 initapi || init
|
|
|
|
|
|
"path": "/docs/components/page"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Panel 面板",
|
|
|
|
|
|
"body": "可以把相关信息以面板的形式展示到一块。## 基本用法## 底部配置按钮可以通过配置`actions`数组，实现渲染底部按钮栏## 固定底部有时 panel 内，内容过多，导致底部操作按钮不是很方便，可以配置`\"affixfooter\": true`，将底部部分贴在浏览器底部展示。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------- | -------------------------------------- | ------------------- || type | `string` | `\"panel\"` | 指定为 panel 渲染器 || classname | `string` | `\"panel-default\"` | 外层 dom 的类名 || headerclassname | `string` | `\"panel-heading\"` | header 区域的类名 || footerclassname | `string` | `\"panel-footer bg-light lter wrapper\"` | footer 区域的类名 || actionsclassname | `string` | `\"panel-footer\"` | actions 区域的类名 || bodyclassname | `string` | `\"panel-body\"` | body 区域的类名 || title | | | 标题 || header | | | 头部容器 || body | | | 内容容器 || footer | | | 底部容器 || affixfooter | `boolean` | | 是否固定底部容器 || actions | array<> | | 按钮区域 |",
|
|
|
|
|
|
"path": "/docs/components/panel"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Progress 进度条",
|
|
|
|
|
|
"body": "## 基本用法## 颜色映射可以配置`map`，指定颜色映射，例如，默认的map配置为：`['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']`它意味着将进度条分成了5份，`前20%`将会添加`bg-danger` css 类名到进度条上，`20%~40%`，将会添加`bg-warning`，以此类推，你可以自定义`map`来配置想要的进度效果## 用作 field 时当用在 table 的列配置 column、list 的内容、card 卡片的内容和表单的static-xxx 中时，可以设置`name`属性，映射同名变量### table 中的列类型list 的内容、card 卡片的内容配置同上### form 中静态展示## 属性表| 属性名 | 类型 | 默认值 | 说明 || -------------------- | --------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- || type | `string` | | 如果在 table、card 和 list 中，为`\"color\"`；在 form 中用作静态展示，为`\"static-color\"` || classname | `string` | | 外层 css 类名 || progressclassname | `string` | `progress-xs progress-striped active m-b-none` | 进度调 css 类名 || progressbarclassname | `string` | | 完成进度条 css 类名 || value | `string` | | 进度值 || placeholder | `string` | `-` | 占位文本 || showlabel | `boolean` | `true` | 是否展示进度文本 || map | `array<string>` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 |",
|
|
|
|
|
|
"path": "/docs/components/progress"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "QRCode 二维码",
|
|
|
|
|
|
"body": "## 基本用法> 根据 qr 码国际标准，二进制模式最多可存储`2953`字节的内容（1 中文汉字=2 字节）## 配置背景色## 配置前景色## 不同复杂度## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------- | ---------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `\"qr-code\"` | 指定为 qrcode 渲染器 || classname | `string` | | 外层 dom 的类名 || qrcodeclassname | `string` | | 二维码 svg 的类名 || codesize | `number` | `128` | 二维码的宽高大小 || backgroundcolor | `string` | `\"#fff\"` | 二维码背景色 || foregroundcolor | `string` | `\"#000\"` | 二维码前景色 || level | `string` | `\"l\"` | 二维码复杂级别，有（'l' 'm' 'q' 'h'）四种 || value | |",
|
|
|
|
|
|
"path": "/docs/components/qrcode"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Radios 单选框",
|
|
|
|
|
|
"body": "## 基本用法## 属性表当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置| 属性名 | 类型 | 默认值 | 说明 || ------------ | --------------------------------- | --------- | ------------------------------------------------------------------------------------------- || options | `array<object>`或`array<string>` | | || source | `string`或 || labelfield | `boolean` | `\"label\"` | || valuefield | `boolean` | `\"value\"` | || columnscount | `number` | `1` | 选项按几列显示，默认为一列 || autofill | `object` | | |",
|
|
|
|
|
|
"path": "/docs/components/radios"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Remark 标记",
|
|
|
|
|
|
"body": "用于展示颜色## 基本用法## 可配置标题## 弹出位置## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ----------------------- | ------------- || type | `string` | | `remark` || classname | `string` | | 外层 css 类名 || content | `string` | | 提示文本 || placement | `string` | | 弹出位置 || trigger | `string` | `['hover', 'focus']` | 触发条件 || icon | `string` | `fa fa-question-circle` | 图标 |",
|
|
|
|
|
|
"path": "/docs/components/remark"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Service 功能型容器",
|
|
|
|
|
|
"body": "amis 中部分组件，作为展示组件，自身没有**使用接口初始化数据域的能力**，例如：功能，在当前的 **数据链** 中获取数据，并进行数据展示。而`service`组件就是专门为该类组件而生，它的功能是：：**配置初始化接口，进行数据域的初始化，然后在`service`内容器中配置子组件，这些子组件通过数据链的方法，获取`service`所拉取到的数据**## 基本使用最基本的使用，是配置初始化接口`api`，将接口返回的数据添加到自身的数据域中，以供子组件通过进行获取使用。你可以通过查看网络面板看到，`service`接口返回的数据结构为：在`service`的子组件中，就可以使用`${title}`和`${date}`展示数据## 展示列表另外一种使用较为频繁的场景是：serivce + table 进行列表渲染上例中 service 接口返回数据结构如下：`table`中配置`source`属性为`${rows}`就可以获取到`rows`变量的数据，并用于展示。## 动态渲染页面`service` 还有个重要的功能就是支持配置 `schemaapi`，通过它可以实现动态渲染页面内容。同样观察`schemaapi接口`返回的数据结构：它将`data`返回的对象作为 amis 页面配置，进行了解析渲染，实现动态渲染页面的功能。## 接口联动`api`和`schemaapi`都支持上例可看到，变更**数据模板**的值，会触发 service 重新请求，并更新当前数据域中的数据更多相关见## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------- | --------------------------------- | -------------- | ----------------------------------------------------------------------------- || type | `string` | `\"service\"` | 指定为 service 渲染器 || classname | `string` | | 外层 dom 的类名 || body | | | 内容容器 || api | | | 初始化数据域接口地址 || initfetch | `boolean` | | 是否默认拉取 || schemaapi | | | 用来获取远程 schema 接口地址 || initfetchschema | `boolean` | | 是否默认拉取 schema || messages | `object` | | 消息提示覆写，默认消息读取的是接口返回的 toast 提示文字，但是在此可以覆写它。 || messages.fetchsuccess | `string` | | 接口请求成功时的 toast 提示文字 || messages.fetchfailed | `string` | `\"初始化失败\"` | 接口请求失败时 toast 提示文字 || interval | `number` | | 轮询时间间隔(最低 3000) || silentpolling | `boolean` | `false` | 配置轮询时是否显示加载动画 || stopautorefreshwhen | | | 配置停止轮询的条件 |",
|
|
|
|
|
|
"path": "/docs/components/service"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Spinner 加载中",
|
|
|
|
|
|
"body": "## 基本使用",
|
|
|
|
|
|
"path": "/docs/components/spinner"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Status 状态",
|
|
|
|
|
|
"body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------- | -------- | ------ | ------------------------------- || type | `string` | | `\"status\"` 指定为 status 渲染器 || classname | `string` | | 外层 dom 的类名 || placeholder | `string` | `-` | 占位文本 |",
|
|
|
|
|
|
"path": "/docs/components/status"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Switch 开关",
|
|
|
|
|
|
"body": "## 基本用法| 属性名 | 类型 | 默认值 | 说明 || --------- | -------- | ------ | ------------------------------- || type | `string` | | `\"switch\"` 指定为 dialog 渲染器 || classname | `string` | | 外层 dom 的类名 || truevalue | any | | 真值，当值为该值时，开关开启 || option | `string` | | 右侧选项文本 |",
|
|
|
|
|
|
"path": "/docs/components/switch"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Table 表格",
|
2020-12-10 17:50:24 +08:00
|
|
|
|
"body": "表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。## 基本用法## 列配置`columns`内，除了简单的配置`label`和`name`展示数据以外，还支持一些额外的配置项，可以帮助更好的展示数据。### 列类型除了简单展示数据源所返回的数据以外，`list`的列支持除表单项以外所有组件类型，例如：### 列宽可以给列配置`width`属性，控制列宽，共有两种方式：#### 固定像素可以配置数字，用于设置列宽像素，例如下面例子我们给`rendering engine`列宽设置为`100px`。#### 百分比也可以百分比来指定列宽，例如下面例子我们给`rendering engine`列宽设置为`50%`。### 默认是否显示默认 `columnstogglable` 配置为 `auto`，当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 `true` 或者 `false` 来强制开或者关。在列配置中可以通过配置 `toggled` 为 `false` 默认不展示这列，比如下面这个例子中 id 这一栏。### 可复制可以在列上配置`\"copyable\": true`，会在该列的内容区里，渲染一个复制内容的图标，点击可复制该显示内容你也可以配置对象形式，可以自定义显示内容### 弹出框可以给列上配置`popover`属性，会在该列的内容区里，渲染一个图标，点击会显示弹出框，用于展示内容可以结合 truncate 用来优化表格中的长内容展示，比如默认只展示 20 个字符，剩下的点击查看更多出现。> 示例内容没那么长，直接配置成 2 个字符了。### 表头样式可以配置`\"ishead\": true`，来让当前列以表头的样式展示。应用场景是：1. 所有列`label`配置空字符串，不显示表头2. 配置`combinenum`，合并单元格，实现左侧表头的形式3. 列上配置`\"ishead\": true`，调整样式还可以配置\"offset\"，实现弹出框位置调整自定义## 嵌套当行数据中存在 children 属性时，可以自动嵌套显示下去。## 底部展示 (footable)列太多时，内容没办法全部显示完，可以让部分信息在底部显示，可以让用户展开查看详情。配置很简单，只需要开启 `footable` 属性，同时将想在底部展示的列加个 `breakpoint` 属性为 `*` 即可。默认都不会展开，如果你想默认展开第一个就把 footable 配置成这样。当配置成 `all` 时表示全部展开。## 合并单元格只需要配置 `combinenum` 属性即可，他表示从左到右多少列内启动自动合并单元格，只要多行的同一个属性值是一样的，就会自动合并。## 超级表头超级表头意思是，表头还可以再一次进行分组。额外添加个 `groupname` 属性即可。## 固定列列太多可以让重要的几列固定，可以配置固定在左侧还是右侧，只需要给需要固定的列上配置 `fixed` 属性，配置 `left` 或者 `right`。## 属性表| 属性名 | 类型 | 默认值 | 说明 || ---------------- | --------------------------------------------- | ------------------------- | ----------------------------------------------------------------- || type | `string` | | `\"type\"` 指定为 table 渲染器 || title | `string` | | 标题 || source | `string` | `${items}` | 数据源, 绑定当前环境变量 || affixheader | `boolean`
|
2020-12-02 17:02:44 +08:00
|
|
|
|
"path": "/docs/components/table"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Tabs 选项卡",
|
|
|
|
|
|
"body": "## 基本用法## 展示模式### 线型### 卡片模式### 选择器型## 配置顶部工具栏配置`toolbar`实现顶部工具栏。## 配置 hash可以在单个`tab`下，配置`hash`属性，支持地址栏`#xxx`。## 默认显示某个选项卡主要配置`activekey`属性来实现该效果，共有下面两种方法：#### 配置 hash 值#### 配置索引值单个`tab`上不要配置`hash`属性，配置需要展示的`tab`索引值，`0`代表第一个。## unmountonexit如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`\"unmountonexit\": true`## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------------------- | --------------------------------- | ----------------------------------- | -------------------------------------------------------- || type | `string` | `\"tabs\"` | 指定为 tabs 渲染器 || classname | `string` | | 外层 dom 的类名 || tabsclassname | `string` | | tabs dom 的类名 || tabs | `array` | | tabs 内容 || toolbar | | | tabs 中的工具栏 || toolbarclassname | `string` | | tabs 中工具栏的类名 || tabs[x].title | `string` | | tab 标题 || tabs[x].icon | `icon` | | tab 的图标 || tabs | | 内容区 || tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 || tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 || tabs[x].unmountonexit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 || tabs[x].classname | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | tab 区域样式 |",
|
|
|
|
|
|
"path": "/docs/components/tabs"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Tasks 任务操作集合",
|
|
|
|
|
|
"body": "任务操作集合，类似于 orp 上线。## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || ----------------- | ------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `\"tasks\"` | 指定为 tasks 渲染器 || classname | `string` | | 外层 dom 的类名 || tableclassname | `string` | | table dom 的类名 || items | `array` | | 任务列表 || items[x].label | `string` | | 任务名称 || items[x].key | `string` | | 任务键值，请唯一区分 || items[x].remark | `string` | | 当前任务状态，支持 html || items[x].status | `string` | | 任务状态： 0: 初始状态，不可操作。1: 就绪，可操作状态。2: 进行中，还没有结束。3：有错误，不可重试。4: 已正常结束。5：有错误，且可以重试。 || checkapi | | | 返回任务列表，返回的数据请参考 items。 || submitapi | | | 提交任务使用的 api || resubmitapi | | | 如果任务失败，且可以重试，提交的时候会使用此 api || interval | `number` | `3000` | 当有任务进行中，会每隔一段时间再次检<EFBFBD><EFBFBD>
|
|
|
|
|
|
"path": "/docs/components/tasks"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Tpl 模板",
|
|
|
|
|
|
"body": "输出 的常用组件## 基本用法更多模板相关配置请看## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | ---------------------------- | ------- | --------------- || type | `string` | `\"tpl\"` | 指定为 tpl 组件 || classname | `string` | | 外层 dom 的类名 || tpl | | | 配置模板 |",
|
|
|
|
|
|
"path": "/docs/components/tpl"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Video 视频",
|
|
|
|
|
|
"body": "## 基本用法## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------- | --------- | -------------------------------------------------------- || type | `string` | `\"video\"` | 指定为 video 渲染器 || classname | `string` | | 外层 dom 的类名 || src | `string` | | 视频地址 || islive | `boolean` | false | 是否为直播，视频为直播时需要添加上，支持`flv`和`hls`格式 || poster | `string` | | 视频封面地址 || muted | `boolean` | | 是否静音 || autoplay | `boolean` | | 是否自动播放 || rates | `array` | | 倍数，格式为`[1.0, 1.5, 2.0]` |",
|
|
|
|
|
|
"path": "/docs/components/video"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Wizard 向导",
|
|
|
|
|
|
"body": "表单向导，能够配置多个步骤引导用户一步一步完成表单提交。## 基本使用## 属性表| 属性名 | 类型 | 默认值 | 说明 || ------------------- | -------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- || type | `string` | `\"wizard\"` | 指定为 `wizard` 组件 || mode | `string` | `\"horizontal\"` | 展示模式，选择：`horizontal` 或者 `vertical` || api | | | 最后一步保存的接口。 || initapi | | | 初始化数据接口 || initfetch | | | 初始是否拉取数据。 || initfetchon | | | 初始是否拉取数据，通过表达式来配置 || actionprevlabel | `string` | `上一步` | 上一步按钮文本 || actionnextlabel | `string` | `下一步` | 下一步按钮文本 || actionnextsavelabel | `string` | `保存并下一步` | 保存并下一步按钮文本 || actionfinishlabel | `string` | `完成` | 完成按钮文本 || classname | `string` | | 外层 css 类名 || actionclassname | `string` | `btn-sm btn-default` | 按钮 css 类名 || reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 || redirect | | `3000` | 操作完后跳转。 || target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存<EFBFBD>
|
|
|
|
|
|
"path": "/docs/components/wizard"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Wrapper 包裹容器",
|
|
|
|
|
|
"body": "简单的一个包裹容器组件## 基本用法## 不同内边距通过配置`size`属性，可以调整内边距## 属性表| 属性名 | 类型 | 默认值 | 说明 || --------- | --------------------------------- | ----------- | ---------------------------- || type | `string` | `\"wrapper\"` | 指定为 wrapper 渲染器 || classname | `string` | | 外层 dom 的类名 || size | `string` | | 支持: `xs`、`sm`、`md`和`lg` || body | | | 内容容器 |",
|
|
|
|
|
|
"path": "/docs/components/wrapper"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "行为",
|
|
|
|
|
|
"body": "页面的交互操作，例如：**提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板**等等操作，都可以视作页面的一种**行为**。在 amis 中，大部分 **行为** 是跟 **行为按钮组件** 进行绑定的，也就是说，当你想要配置一个行为，大部分情况下你应该遵循下面的步骤：1. 添加一个 **行为按钮组件**；2. 配置当前 **行为类型（actiontype）**；3. 根据当前行为类型，配置你想要的 **属性**。## 如何配置行为？### 通过行为按钮1. 在`page`内容区中，添加一个`action`行为按钮组件2. 配置当前行为类型是 ajax（即发送一个 ajax 请求)3. 配置请求 api，值为 api 类型现在点击该按钮，你会发现浏览器发出了这个`ajax`请求。很简单是吧？我们再来一个例子：这次我们配置`actiontype`为`dialog`，意味着点击该按钮会弹出一个模态框，并配置`dialog`内容，来显示字符串`hello world!`> `dialog`是容器，也就意味着可以在`body`属性中配置其他组件完整的行为列表可以查看 组件### 组件所支持的行为一些特殊组件，例如 chart 组件 中的图表点击行为，可以直接配置`clickaction`，来配置行为对象。",
|
|
|
|
|
|
"path": "/docs/concepts/action"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "数据映射",
|
2020-12-10 17:50:24 +08:00
|
|
|
|
"body": "数据映射支持用户通过`${xxx}`或`$xxx`获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 `api` 请求数据体格式等场景。## 模板字符串**tip：** 默认 amis 在解析模板字符串时，遇到`$`字符会尝试去解析该变量并替换改模板变量，如果你想输出纯文本`\"${xxx}\"`或`\"$xxx\"`，那么需要在`$`前加转义字符`\"\\\\\"`，即`\"\\\\${xxx}\"`## 支持链式取值可以使用`.`进行链式取值## 自定义 api 请求体数据格式在表单提交接口时，amis 默认的请求体数据格式可能不符合你的预期，不用担心，你可以使用数据映射定制想要的数据格式：查看下面这种场景：当输入姓名：`rick` 和邮箱：`rick@gmail.com` 后，`form` 获取当前的数据域，提交后端接口的数据格式应该是这样的：遗憾的是，你的后端接口只支持的如下的输入数据结构，且无法修改：这时，除了直接更改你的 姓名表单项 和 邮箱表单项 的`name`属性为相应的字段以外，你可以配置`api`的`data`属性，使用**数据映射**轻松实现**数据格式的自定义：**你可以查看网络面板，发送给后端接口的数据体应该已经成功修改为：## 复杂配置### 展开所配置的数据可以使用`\"&\"`，作为数据映射 key，展开所配置的变量，例如：下面例子中，我们想在提交的时候，除了提交 `name` 和 `email` 变量以外，还想添加 `c` 下面的所有变量 `e`,`f`,`g`，但是按照之前所讲的， api 应该这么配置：点击提交查看网络面板数据，你会发现数据是符合预期的：但是当变量字段过多的时候，你需要一一映射配置，也许有点麻烦，所以可以使用`\"&\"`标识符，来展开所配置变量：上例中我们 api.data 配置如下：`\"&\"`标识符会将所配置的`c`变量的`value`值，展开并拼接在`data`中。查看网络面板可以看到数据如下：### 数组提取值上例中的`api`的`data`配置格式如下：这个配置的意思是，只提取`table`数组中的`a`变量和`c`变量，组成新的数组，赋值给`items`变量点击提交，查看浏览器网络面板可以发现，表单的提交数据结构如下：## 过滤器过滤器是对数据映射的一种增强，它的作用是对获取数据做一些处理，基本用法如下：下面我们会逐一介绍每一个过滤器的用法。> 过滤器可以 ### html用于显示 html 文本。##### 基本用法### raw不同场景下，在使用数据映射时，amis 可能默认会使用`html`过滤器对数据进行转义显示，这时如果想要输出原始文本，请配置`raw`过滤器。##### 基本用法使用`raw`可以直接输出原始文本> **注意！！！**>> `raw`过滤器虽然支持显示原始文本，也就意味着可以输出 html 片段，但是动态渲染 html 是非常危险的，容易导致 **xss** 攻击。>> 因此在 使用`raw`过滤器的时候，请确保变量的内容可信，且永远不要渲染用户填写的内容。### json用于将数据转换为`json`格式字符串##### 基本用法##### 指定缩进数### tojson与相反，用于将`json`格式的字符串，转换为`javascript`对象对`javascript`的直接输出会显示` 来格式化显示`json`文本。### date日期格式化过滤器，用于把特定时间值按指定格式输出。##### 基本用法- **format**：需要展示的格式，默认为`'lll'`，即本地化时间格式- **inputformat**：指定该变量值的格式，默认为`'x'`，即时间戳具体参数的配置需要参考 ##### 配置输出格式例如你想将某一个时间值，以 `2020-04-14` 这样的格式输出，那么查找 moment 文档可知配置格式应为 `yyyy-mm-dd`，即：##### 配置数据格式如果你的数据值默认不是`x`格式（即时间戳格式），那么需要配置`inputformat`参数用于解析当前时间值，例如：> **注意：** 在过滤器参数中使用`:`字符，需<EFBFBD>
|
2020-12-02 17:02:44 +08:00
|
|
|
|
"path": "/docs/concepts/data-mapping"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "数据域与数据链",
|
|
|
|
|
|
"body": "## 基本的数据展示我们再看之前的 hello world 示例：目前我们只是在 `page` 组件中渲染一串固定的文本，如果我们想要 **通过接口拉取想要的数据，并展示到 `page` 组件的内容区** 呢？## 添加初始化接口接口返回的数据结构如下：渲染后页面如下：## 发生了什么?我们可以看到，输出结果不变，但是我们这次渲染的是接口返回的数据：1. 首先我们给 `page` 组件配置了`initapi`属性，该属性会在组件初始化时，请求所该属性所配置的接口2. 接口请求成功后，`page` 会把接口返回的`data`内数据存到当前的数据域中3. `page` 在渲染 `body` 所配置的文本时，会解析文本内容，当解析到模板变量`${text}`时，amis 会把尝试在当前组件的数据域中获取`text`变量值，并替换掉`${text}`，最后渲染解析后的文本。> 下一节我们会介绍，`body`属性自身支持模板语法，amis 中支持模板语法的组件还有很多## 数据域前面我们提到了**数据域**这个概念，它是 amis 中最重要的概念之一。还是通过最简单的示例进行讲解：上面的配置要做的很简单：使用 `page` 组件，在内容区内渲染一段模板文字，其中`${text}`是**模板变量**，它会去到当前组件的数据域中，获取`text`变量值。毫无疑问，`${text}`将会解析为空白文本，最终渲染的文本是 `hello`因为当前 `page` 组件的数据域中是没有任何数据的，相比之前的示例，区别在于前面我们为 `page` 组件配置了初始化接口，它会将接口返回的数据存入数据域中以供组件使用。再观察下面这段配置：再次查看渲染结果，顺利输出了 `hello world!`相信你可能已经猜到，**组件的`data`属性值是数据域的一种形式**，实际上当我们没有显式的配置数据域时，可以假想成这样：> amis 中大部分组件都具有数据域。>> 而前面我们知道 amis 的特性之一是基于组件树，因此自然数据域也会形成类似于树型结构，如何来处理这些数据域之间的联系呢，这就是我们马上要介绍到的 ****## 数据链相信通过上文，你已经基本掌握了 amis 中数据域的概念，接下来我们会介绍另一个重要概念：**数据链**。**数据链**的特性是，当前组件在遇到获取变量的场景（例如模板渲染、展示表单数据、渲染列表等等）时：1. 首先会先尝试在当前组件的数据域中寻找变量，当成功找到变量时，通过数据映射完成渲染，停止寻找过程；2. 当在当前数据域中没有找到变量时，则向上寻找，在父组件的数据域中，重复步骤`1`和`2`；3. 一直寻找，直到顶级节点，也就是`page`节点，寻找过程结束。> 为了方便讲解，我们这一章的例子统一使用的设置组件`data`属性的方式来初始化数据域，请记住，如果组件支持，你永远可以通过接口来进行数据域的初始化继续来看这个例子：上面的配置项形成了如下的组件树和数据链：组件树：数据链：> `__sub` 字段只是为了方便理解。首先，`page`组件下的`tpl`组件，在渲染`my name is ${name}`时，首先会在`page`的数据域中，尝试寻找`name`变量，在当前数据域中，`name`变量为`zhangsan`，因此寻找变量结束，通过数据映射渲染，输出：`my name is zhangsan`，渲染结束；然后，`service`组件开始渲染，`service`组件内子组件`tpl`，它配置的模板字符串是：`my name is ${name}, i'm ${age} years old`，它会在`service`的数据域中，尝试寻找`name`和`age`变量。由代码可以看出，`service`数据域中`name`变量为`lisi`，因此停止该变量的寻找，接下来寻找`age`变量。很明显在`service`数据域中寻找`age`变量会失败，因此向上查找，尝试在`page`数据域中寻找`age`变量，找到为`20`，寻找变量结束，通过数据映射渲染，输出：`my name is lisi
|
|
|
|
|
|
"path": "/docs/concepts/datascope-and-datachain"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "表达式",
|
|
|
|
|
|
"body": "一般来说，属性名类似于`xxxon`的配置项，都可以使用表达式进行配置，表达式具有如下的语法：其中：`data.show === 1` 就是表达式。## 表达式语法> 表达式语法实际上是 javascript 代码，更多 javascript 知识查看 。在 amis 的实现过程中，当正则匹配到某个组件存在`xxxon`语法的属性名时，会尝试进行下面步骤（以上面配置为例）：1. 提取`visibleon`配置项配置的 javascript 语句`data.show === 1`，并以当前组件的数据域为这段代码的数据作用域，执行这段 js 代码；2. 之后将执行结果赋值给`visible`并添加到组件属性中3. 执行渲染。当前示例中：`visible`代表着是否显示当前组件；组件不同的配置项会有不同的效果，请大家在组件文档中多留意。> 表达式的执行结果预期应该是`boolean`类型值，如果不是，amis 会根据 javascript 的规则将结果视作`boolean`类型进行判断",
|
|
|
|
|
|
"path": "/docs/concepts/expression"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "联动",
|
|
|
|
|
|
"body": "上一节我们介绍了表达式的概念，而表达式应用最多的场景，是实现页面的联动效果。## 基本联动元素的联动是页面开发中很常见的功能之一，类似于：- 某个条件下显示或隐藏某个组件- 某个条件下请求接口- 某个条件下轮询接口停止轮询- 等等...> 联动配置项一般都是 ### 组件配置联动控制组件的显隐，表单项的禁用状态等，看下面这个例子：上面实例主要为一个表单，表单内有三个组件：一个`radio`, 两个`text`，通过配置联动配置项，实现下面联动效果：1. 只要当`radio`选中`类型1`时，才会显示`text1`；2. 当`radio`选中`类型2`时，`text2`将会变为`禁用状态`> **注意：**>> 在表单项联动中，为了方便数据的读取，赋值后或者修改过的表单项，通过隐藏后，并不会在当前数据域中删除掉该字段值，因此默认提交的时候可能仍然会带上已隐藏表单项的值>> 如果想要在提交时去掉某个隐藏的字段，可以通过 配置自定义数据体### 接口联动#### 基本使用接口联动是另外一种很常见的场景，查看下面这个例子：上面例子我们实现了这个逻辑：每次选择`选项1`的时候，会触发`选项2`的`source`配置的接口重新请求，并返回不同的下拉选项。是如何做到的？实际上，所有**初始化接口链接上使用数据映射获取参数的形式**时，例如下面的`query=${query}`，在当前数据域中，**所引用的变量值（即 query）发生变化时**，自动重新请求该接口。> **tip:**>> 触发所引用变量值发生变化的方式有以下几种：>> 1. 通过对表单项的修改，可以更改表单项`name`属性值所配置变量的值；> 2. 通过，将其他组件的值发送到目标组件，进行数据域的更新，从而触发联动效果>> 接口联动一般只适用于初始化接口，例如：>> - `form`组件中的`initapi`；> - `select`组件中的`source`选项源接口；> - `service`组件中的`api`和`schemaapi`；> - `crud`组件中的`api`；> - 等等...#### 配置请求条件默认在变量变化时，总是会去请求联动的接口，你也可以配置请求条件，当只有当前数据域中某个值符合特定条件才去请求该接口。更多用法，见：#### 主动触发上面示例有个问题，就是数据一旦变化就会出发重新拉取，而输入框的频繁变化值会导致频繁的拉取？没关系，也可以配置主动拉取如：1. 通过`api`对象形式，将获取变量值配置到`data`请求体中。2. 配置搜索按钮，并配置该行为是刷新目标组件，并配置目标组件`target`3. 这样我们只有在点击搜索按钮的时候，才会将`keyword`值发送给`select`组件，重新拉取选项### 其他联动还有一些组件特有的联动效果，例如 form 的 disabledon，crud 中的 itemdraggableon 等等，可以参考相应的组件文档。## 组件间联动联动很可能会出现跨组件的形式，思考下面这种场景：有一个表单`form`组件，还有一个列表组件`crud`，我们想要把`form`提交的数据，可以用作`crud`的查询条件，并请求`crud`的接口，由于`form`和`crud`位于同一层级，因此没法使用数据链的方式进行取值。现在更改配置如下：我们进行两个调整：1. 为`crud`组件设置了`name`属性为`my_crud`2. 为`form`组件配置了`target`属性为`crud`的`name`：**`my_crud`**更改配置后，提交表单时，如果有配置提交接口，会先请求提交，之后 amis 会寻找`target`所配置的目标组件，把`form`中所提交的数据，发送给该目标组件中，并将该数据**合并**到目标组件的数据域中，并触发目标组件的刷新操作，对于 crud 组件来说，刷新即重新拉取数据接口。> 当然，`crud`组件内置已经支持此功能，你只需要配置`crud`中的`filter`属性，就可以实现上面的效果，更多内容查看 文档。我们再来一个例<EFBFBD><EFBFBD>
|
|
|
|
|
|
"path": "/docs/concepts/linkage"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "配置与组件",
|
|
|
|
|
|
"body": "## 最简单的 amis 配置一个最简单的 amis 配置看起来是这样的：请观察上面的代码，这是一段普通的 json 格式文本，它的含义是：1. `type`是每一个 amis 节点中，最重要的一个字段，它会告诉 amis 当前节点需要渲染的是`page`组件2. 而`body`字段会被看作是`page`组件的属性，将该属性值所配置的内容，渲染到`page`组件的内容区中上面配置通过 amis 的处理，会渲染出一个简单的页面，并在页面中展示文字：`hello world!`，就像下面这样：后续章节中，你会经常看到例如上面这样，支持**实时编辑配置预览效果**的页面配置预览工具，它可以帮助你更直观的看到具体配置所展示的页面效果。## 组件上面提到，`type`字段会告诉 amis 当前节点渲染的组件为`page`，`page` 属于 amis 内置组件之一。组件节点的配置永远都是由 **`type`字段** （用于标识当前是哪个组件）和 **若干属性值** 构成的。## 组件树这次我们看一个稍微复杂一点的配置：该配置渲染页面如下：看起来和之前的示例没啥区别，但是发现和之前不同的地方了吗？这次 `page` 组件的 `body` 属性值，我们配置了一个对象，**通过`type`指明`body`内容区内会渲染一个叫`tpl`的组件**，它是一个模板渲染组件，这里我们先只是配置一段固定文字。它是 `page` 的子节点。再来观察下面这个配置:我们通过数组的形式，在内容区配置`tpl`和`form`组件。没错，`body` 属性支持数组结构，这也就意味着你可以 **通过组件树的形式** 渲染出足够复杂的页面。具有`body`这类属性的组件一般称为**容器型组件**，就如名字所形容的，这类组件可以作为容器，在他们的子节点配置若干其他类型的组件，amis 中还有很多类似的组件，例如`form`、`service`等，后续我们会逐一进行介绍。> **注意：**>> `page`是一个特殊的容器组件，它是 amis 页面配置中 **必须也是唯一的顶级节点**",
|
|
|
|
|
|
"path": "/docs/concepts/schema"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "样式",
|
|
|
|
|
|
"body": "amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。## 基本使用例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔1. 通过查阅按钮文档可知，按钮支持 classname 配置项，也就是说可以在按钮上添加 css 类名；2. 再查阅当前页面下面 可知，我们可以添加`m-l`类名实现`margin-left: 15px;`的 css 效果3. 于是我们在`按钮2`的配置中添加`\"classname\": \"m-l\"`，就能实现间距效果了绝大部分组件都支持各种形式的 css 类名自定义，然后搭配该文档中的各种类名可以实现各式各样的样式调整。具体请查阅组件文档；> 你可能需要掌握一些基础的 css 知识## 图标amis 集成了 查看。## 布局水平布局可以考虑用 bootstrap 的 或者用 `hobx` 加 `col`## 宽高## 外边距## 内边距## 边框## 圆角## 字体相关## 定位## 背景## 其他",
|
|
|
|
|
|
"path": "/docs/concepts/style"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "模板",
|
|
|
|
|
|
"body": "为了可以更加灵活渲染文本、数据结构，amis 借鉴其他模板引擎，实现了一套模板渲染功能。## 模板字符串### 普通文本配置一段普通文本并输出### 文本中获取变量可以支持在普通文本中，使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，如下更多`${xxx}`语法相关介绍，移步 。### 渲染html使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，并渲染 html## javascript 模板引擎amis 还支持用 javascript 模板引擎进行组织输出，内部采用 进行实现。> 注意到了吗？> > 在 javascript 模板引擎中，我们获取数据域变量的方式是`data.xxx`，而不是之前的`${xxx}`，如果你熟悉 javascript 的话，这里模板引擎其实是将数据域，当做当前代码的数据作用域进行执行，因此需要使用`data.xxx`进行取值> > 要注意使用模板的时候在不同的场景下要使用正确的取值方式。仔细看示例不难发现，语法跟 ejs 很像，`<% 这里面是 js 语句 %>`，所以只要会写 js，做页面渲染没有什么问题。另外以下是一些可用 js 方法。- `formatdate(value, format='lll', inputformat='')`格式化时间格式，关于 format 请前往 文档页面。- `formattimestamp(value, format='lll')` 格式化时间戳为字符串。- `formatnumber(number)` 格式化数字格式，加上千分位。- `countdown(value)` 倒计时，显示离指定时间还剩下多少天，只支持时间戳。下面 filters 中的方法也可以使用如： `<%= date(data.xxx, 'yyyy-mm-dd') %>`## 注意事项#### 1. 模板字符串 和 模板引擎 不可以交叉使用例如：",
|
|
|
|
|
|
"path": "/docs/concepts/template"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "介绍",
|
|
|
|
|
|
"body": "## 什么是 amisamis 是一个低代码前端框架，它使用 json 配置来生成页面，可以减少页面开发工作量，极大提升效率。## 为什么要做 amis？在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 ui 组件库，你必须懂 `npm`、`webpack`、`react/vue`，必须熟悉 `es6` 语法，最好还了解状态管理，比如 `redux`，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的 ，相关的库有 **2347** 个，很多功能相似，挑选成本高。然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 `hooks` 了、某个打包工具取代 `webpack` 了……而有时候其实只想做个普通的增删改查界面，用于信息管理，类似下面这种：这个界面虽然用 `bootstrap` 也能快速搭起来，但要想体验好就需要加很多细节功能，比如：- 数据动态加载- 编辑单行数据- 批量修改和删除- 查询某列- 按某列排序- 隐藏某列- 开启整页内容拖拽排序- 表格有分页（页数还会同步到地址栏）- 如果往下拖动还有首行冻结来方便查看表头等全部实现这些需要大量的代码。但可以看到，用 amis 只需要 **150** 行 json 配置（嘿，其中 40 多行只有一个括号），你不需要了解 `react/vue`、`webpack`，甚至不需要很了解 `javascript`，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发。这正是建立 amis 的初衷，我们认为：**对于大部分常用页面，应该使用最简单的方法来实现**，甚至不需要学习各种框架和工具。## 用 json 写页面有什么好处为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 来配置，它的独特好处是：- **不需要懂前端**：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 `javascript`，却能做出专业且复杂的后台界面，这是所有其他前端 ui 库都无法做到的；- **不受前端技术更新的影响**：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 `angular/vue/react` 版本现在都废弃了，当年流行的 `gulp` 也被 `webpack` 取代了，如果这些页面不是用 amis，现在的维护成本会很高；- **享受 amis 的不断升级**：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 json 配置完全不需要修改；- 可以 **完全** 使用 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。## amis 的其它亮点- **提供完整的界面解决方案**：其它 ui 框架必须使用 javascript 来组装业务逻辑，而 amis 只需 json 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；- **内置 100+ 种 ui 组件**：包括其它 ui 框架都不会提供的富文本编辑器、条件组合等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 来扩充；- **容器支持无限级嵌套**：可以通过组合来满足各种布局需求；- **经历了长时间的实战考验**：amis 在百度内部得到了广泛使用，**在 4 年多的时间里创建了 3 万+ 页面**，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 json 配置。## amis 不适合做什么？使用 json 有优点但也有明显缺点，在以下场合并不适合 amis：- **大量定制 ui**：json 配置使得 amis 更适合做有大量常见 ui 组件的页面，但对于面向普通客户（toc）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 ui 组件
|
|
|
|
|
|
"path": "/docs/index"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "自定义",
|
2020-12-10 17:50:24 +08:00
|
|
|
|
"body": "如果默认的组件不能满足需求，可以通过自定义组件来进行扩展，在 amis 中有两种方法：1. 临时扩展，适合无需复用的组件。2. 注册自定义类型，适合需要在很多地方复用的组件。> 注意，自定义组件只支持 npm 方式，不支持 sdk## 临时扩展amis 的 json 配置最终会转成 react 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 json 配置里写 react 代码，比如下面这个例子：其中的 `mycustom` 就是一个临时扩展，它的 `children` 属性是一个函数，它的返回内容和 react 的 render 方法一样，即 jsx，在这个方法里你可以写任意 javascript 来实现自己的定制需求，这个函数有两个参数 `value` 和 `onchange`，`value` 就是组件的值，`onchange` 方法用来改变这个值，比如上面的例子中，点击链接后就会修改 `mycustom` 为一个随机数，在提交表单的时候就变成了这个随机数。与之类似的还有个 `component` 属性，这个属性可以传入 react component，如果想用 react hooks，请通过 `component` 传递，而不是 `children`。这种扩展方式既简单又灵活，但它是写在配置中的，如果需要在很多地方，可以使用下面的「注册自定义类型」方式：## 注册自定义类型注册自定义类型需要了解 amis 的工作原理。### 工作原理amis 的渲染过程是将 `json` 转成对应的 react 组件。先通过 `json` 的 type 找到对应的 `component` 然后，然后把其他属性作为 `props` 传递过去完成渲染。拿一个表单页面来说，如果用 react 组件开发一般长这样。把以上配置方式换成 amis json, 则是：那么，amis 是如何将 json 转成组件的呢？直接根据节点的 type 去跟组件一一对应？这样会重名，比如在表格里面展示的类型 `text` 跟表单里面的 `text` 是完全不一样的，一个负责展示，一个却负责输入。所以说一个节点要被什么组件渲染，还需要携带上下文（context）信息。如何携带上下文（context）信息？amis 中是用节点的路径（path）来作为上下文信息。从上面的例子来看，一共有三个节点，path 信息分别是。- `page` 页面节点- `page/body/form` 表单节点- `page/body/form/controls/0/text` 文本框节点。根据 path 的信息就能很容易注册组件跟节点对应了。page 组件的示例代码form 组件的示例代码```jsx@renderer({ test: /(^|\\/)form$/ // ... 其他信息隐藏了})export class formrenderer extends react.component { // ... 其他信息隐藏了 render() { const { title, controls, render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。 } = this.props; return ( <form classname=\"form\"> {controls.map((control, index) => ( <div classname=\"form-item\" key={index}> {render(`${index}/control`, control)} </div> ))} </form> ); }}jsx@renderer({ test: /(^|\\/)form(?:\\/\\d+)?\\/control(?\\/\\d+)?\\/text$/ // ... 其他信息隐藏了})export class formitemtextrenderer extends react.component { // ... 其他信息隐藏了 render() { const { label, name, onchange } = this.props; return ( <div classname=\"form-group\"> <label>{label}<label> <input type=\"text\" onchange={(e) => onchange(e.currenttarget.value)} /> </div> ); }}```那么渲染过程就是根据节点 path 信息，跟组件池中的组件 `test` (检测) 信息做匹配，如果命中，则把当前节点转给对应组件渲染，节点中其他属性将作为目标组件的 props。需要注意的是，如果是容器组件，比如以上例子中的 `page` 组件，从 props 中拿到的 `body` 是一个子节点，由于节点类型是不固定，由使用者决定，所以不能直接完成渲染，所以交给属性中下发的 `rend
|
2020-12-02 17:02:44 +08:00
|
|
|
|
"path": "/docs/start/custom"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "常见问题",
|
|
|
|
|
|
"body": "### 如何实现左侧导航栏页面跳转？为了能更容易嵌入其它平台，amis 只负责单页面渲染，不接管前端路由，因此无法只靠 amis 配置实现多页面切换功能，推荐使用以下几种方法：1. 自己实现左侧导航栏，用 amis 渲染右侧页面，类似 <https://github.com/fex-team/amis-admin> 项目里的做法。2. 使用传统的页面跳转，这样就能使用 amis 的 aside，其中通过 link 类型来跳转到另一个页面。3. 使用「」，它可以配置左侧导航，还自带了权限管理等功能。### 集成到 react 项目中报错一般都是因为 react、mobx、mobx-react 版本有关，参考 amis 项目的 ，将版本保持一致，尤其是 mobx，目前 amis 中使用的版本是 4，因为兼容性的考虑短期内不会升级到 5，使用 mobx 5 肯定会报错。",
|
|
|
|
|
|
"path": "/docs/start/faq"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "快速开始",
|
|
|
|
|
|
"body": "amis 有两种使用方法：- - npm 适合用在 react 项目中，可以完整使用 amis 的所有功能，方便扩展。sdk 适合对前端或 react 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式难以支持 ，只能使用 amis 内置的组件。## sdkjssdk 版本的代码从以下地址获取：- js： https://houtai.baidu.com/v2/jssdk- css： https://houtai.baidu.com/v2/csssdk上面的地址是一个页面跳转，会跳转到一个 cdn 地址，> 通过这种方式拿到的是最新 beta 版，如果需要固定某个版本可以从 npm 下载，拷贝其中 sdk 目录下的文件。简单示例如下，将其中的 `amis/sdk.css` 和 `amis/sdk.js` 改成实际的路径:### 控制 amis 的行为`amis.embed` 函数还支持以下配置项来控制 amis 的行为，比如在 fetcher 的时候加入自己的处理逻辑，这些函数参数的说明在前面也有介绍。同时返回的 `amisscoped` 对象可以获取到 amis 渲染的内部信息，它有如下方法：`getcomponentbyname(name)` 用于获取渲染出来的组件，比如下面的示例可以通过 `amisscoped.getcomponentbyname('page1.form1').getvalues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。## npm### 安装### 主题样式目前支持三种主题：`default（默认主题）`、`cxd（云舍）`和`dark（暗黑）`1. 引入样式文件：html 中引入：js 中引入：> 上面只是示例，请根据自己的项目结构调整引用路径2. 渲染器使用配置主题### 使用指南可以在 react component 这么使用（typescript）。1. 安装部分示例需要的插件库> 为了方便示例，上面选用了我们常用几个插件库，你完全可以选择自己喜欢的插件并重新实现2. 代码实现（react typescript）### render 函数介绍#### schema即页面配置，请前往 了解#### props一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的 key 并不一定必须是 data , 你也可以是其它 key，但必须配合 schema 中的 `detectfield` 属性一起使用。 如：#### env环境变量，可以理解为这个渲染器工具的配置项，需要使用 amis 用户实现部分接口。他有下面若干参数：##### fetcher（必须实现）接口请求器，实现该函数才可以实现 ajax 发送，函数签名如下：> 你可以使用任何你喜欢的 ajax 请求库来实现这个接口##### notify用来实现消息提示。##### alert用来实现警告提示。##### confirm用来实现确认框。返回 boolean 值##### jumpto用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。##### updatelocation地址替换，跟 jumpto 类似。##### theme: string目前支持是三种主题：`default`、`cxd` 和 `dark`##### iscurrenturl判断目标地址是否为当前页面。##### copy用来实现内容复制。##### session默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。##### getmodalcontainer用来决定弹框容器。##### loadrenderer可以通过它懒加载自定义组件，比如： https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#l64-l91。##### affixoffsettop: number固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。##### affixoffsetbottom: number固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。##### richtexttoken: string内置 rich-text 为 frolaeditor，想要使用，请自行购买，或者自己实现 rich-text 渲染器。",
|
|
|
|
|
|
"path": "/docs/start/getting-started"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "API",
|
|
|
|
|
|
"body": "api 类型用于配置请求接口的格式，涉及请求方式、请求地址、请求数据体等等相关配置## 简单配置如果你只需要配置简单的 ajax 接口，可以使用简单字符串格式，如下：- **method**：get、post、put、delete，默认为 get- **url**：接口地址，即模板字符串示例：## 接口返回格式（重要）所有配置在 amis 组件中的接口，都要符合下面的返回格式- **status**: 返回 `0`，表示当前接口正确返回，否则按错误请求处理；- **msg**: 返回接口处理信息，主要用于表单提交或请求失败时的 `toast` 显示；- **data**: 必须返回一个具有 `key-value` 结构的对象。**`status`**、**`msg`** 和 **`data`** 字段为接口返回的必要字段；### 正确的格式### 错误的格式直接返回字符串或者数组都是不推荐的### 不推荐的格式部分组件为了可以兼容，支持下面这种直接返回数组的用法，但并不推荐这种方式。## 复杂配置api 还支持配置对象类型### 基本用法### 配置请求方式可以配置`method`指定接口的请求方式，支持：`get`、`post`、`put`、`delete`。> `method`值留空时：>> - 在初始化接口中，默认为`get`请求> - 在`form`提交接口，默认为`post`请求### 配置请求地址可以配置`url`指定接口请求地址，支持。### 配置请求数据可以配置`data`，配置自定义接口请求数据体。支持> 当`method`配置为`get`时，`data`中的值默认会添加到请求路径中### 配置请求数据格式可以配置`datatype`，来指定请求的数据体格式，默认为`json`> 下面例子中 api 没有配置`data`属性，因为`form`会默认将所有表单项的值进行提交。#### application/json默认是`application/json`，不需要额外配置#### application/x-www-form-urlencoded配置`\"datatype\": \"form\"`，可配置发送体格式为`application/x-www-form-urlencoded`#### multipart/form-data配置`\"datatype\": \"form-data\"`，可配置发送体格式为`multipart/form-data`当表单项中文件类型数据，则自动使用`multipart/form-data`数据体> `asblob`配置项会指定当前 file 控件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 form 表单提交的接口里面一起带上。### 配置自定义请求头可以配置`headers`对象，添加自定义请求头### 配置请求条件可以配置表达式`sendon`来实现：当符合某个条件的情况下，接口才触发请求查看 **选项 2** 的`source`属性，他是 api 类型值，支持配置`sendon` ，实现根据条件请求接口。### 配置接口缓存当你在某种情况下，需要非常频繁的请求同一个接口，例如列表中，每一行中都有一个 service 进行数据拉取操作，如上，如果你打开浏览器网络面板，会发现`/api/mock2/page/initdata`接口将重复请求多次，次数为你当前列表的数据条数。这往往并不理想，你可以设置`cache`来设置缓存时间，单位是毫秒，在设置的缓存时间内，同样的请求将不会重复发起，而是会获取缓存好的请求响应数据。这下我们再打开网络面板，发现只有一条请求了### 配置请求适配器amis 的 api 配置，如果无法配置出你想要的请求结构，那么可以配置`requestadaptor`发送适配器**发送适配器** 是指在接口请求前，对请求进行一些自定义处理，例如修改发送数据体、添加请求头、等等，基本用法是，获取暴露的`api`参数，并且对该参数进行一些修改，并`return`出去：##### 暴露的参数发送适配器暴露以下参数以供用户进行操作:- **api**：当前请求的 api 对象，一般包含下面几个属性： - url：当前接口 api 地址 - method：当前请求的方式 - data：请求的数据体 - headers：请求的头部信息##### 字符串形式如果在 json 文件中配置的话，`requestadaptor`只支持字符串形式。字符串形式实际上可以认为是<EFBFBD><EFBFBD>
|
|
|
|
|
|
"path": "/docs/types/api"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "Definitions",
|
2020-12-10 17:50:24 +08:00
|
|
|
|
"body": "`definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容。注意 definitions 只能在顶级节点中定义，定义在其他位置，将引用不到。`definitions` 最大的作用其实是能够实现对数据格式的递归引用。来看这个例子吧。",
|
2020-12-02 17:02:44 +08:00
|
|
|
|
"path": "/docs/types/definitions"
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
"title": "SchemaNode",
|
|
|
|
|
|
"body": "schemanode 是指每一个 amis 配置节点的类型，支持`模板`、`schema（配置）`以及`schemaarray（配置数组）`三种类型## 模板上例中的`body`属性所配置的属性值`\"hello ${text}!\"`就是一个模板更多使用说明见 ## schema 配置`schema`，即**组件的 json 配置****它至少需要一个`type`字段，用以标识当前`schema`的类型。**`type`, `data`, `body`这三个字段组成的`json`对象，便是一个`schema`，它由`type`字段作为标识，指明当前 `schema` 是 `page`组件节点而通过查看 可知，`body`属性类型是`schemanode`，即可以在`body`中，嵌套配置其他组件。我们在这里，用`type`和`tpl` json 对象，配置了 `tpl` 组件，渲染了一段模板字符串。> amis 可以通过该方法，在`schema`中嵌套配置其他`schemanode`，从而搭建非常复杂的页面应用。### 配置显隐所有的`schema`类型都可以通过配置`visible`或`hidden`，`visibleon`或`hiddenon`来控制组件的显隐，下面是两种方式##### 静态配置通过配置`\"hidden\": true`或者`\"visible\": false`来隐藏组件下面那个表单被隐藏了。##### 通过条件配置显隐你也通过 配置`hiddenon`，来实现在某个条件下禁用当前组件.为了方便说明，我们在 form 中演示了条件显隐，实际上，只要当前数据域中数据有变化，都可以实现组件显隐> `visible`和`hidden`，`visibleon`和`hiddenon`除了判断逻辑相反以外，没有任何区别## schemaarray 配置数组明白了何为`schema`之后，你就会很轻松理解`schemaarray`，它其实就是支持通过数组配置`schema`，从而在某一节点层级下，配置多个组件非常容易看出来，我们给`body`属性，配置了数组结构的`schema`，从而实现在`body`下，渲染两个`tpl`，来输入两段文字的效果",
|
|
|
|
|
|
"path": "/docs/types/schemanode"
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
