2017-09-22 14:47:53 +08:00
|
|
|
|
## rendertype
|
2017-11-02 14:01:03 +08:00
|
|
|
|
在表格中提供了多种rendertype可以供选择,比如下拉框,输入框,日期等
|
2017-09-22 14:47:53 +08:00
|
|
|
|
|
2017-10-23 14:02:30 +08:00
|
|
|
|
## 如何引用
|
2017-11-02 14:01:03 +08:00
|
|
|
|
需要单独的去引用相应的js文件,目录在render文件夹,示例如下:
|
2017-10-23 14:02:30 +08:00
|
|
|
|
|
2017-11-02 14:01:03 +08:00
|
|
|
|
```js
|
2018-05-22 19:38:15 +08:00
|
|
|
|
import renderInput from "tinper-bee/lib/InputRender.js";
|
2017-11-01 15:59:26 +08:00
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
```
|
2017-11-22 10:07:10 +08:00
|
|
|
|
|
2017-09-22 14:47:53 +08:00
|
|
|
|
### InputRender
|
|
|
|
|
输入框类型render
|
|
|
|
|
|
2017-11-02 14:01:03 +08:00
|
|
|
|
#### 依赖的组件
|
2018-05-22 19:38:15 +08:00
|
|
|
|
该render依赖于`Icon`,`FormControl`,`Form`,`Tooltip`。
|
2017-11-02 14:01:03 +08:00
|
|
|
|
|
|
|
|
|
|
2017-09-22 14:47:53 +08:00
|
|
|
|
#### 配置
|
2017-11-01 15:59:26 +08:00
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
|
|
|
|
| name | 该输入框获取数据时的key值,该值不能设置重复且必填 | string | - |
|
|
|
|
|
| placeholder | 输入框的提示信息 | string | - |
|
|
|
|
|
| value | 输入框中的显示值 | string | 无 |
|
|
|
|
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
|
|
|
|
| onChange | 当值发生改变的时候触发的方法 | Function | 无 |
|
|
|
|
|
| format | 浏览态格式化类型,Currency:货币数字; | string | 无 |
|
|
|
|
|
| formItemClassName | FormItem的class | string | - |
|
|
|
|
|
| mesClassName | 校验错误信息的class | string | - |
|
|
|
|
|
| isRequire | 是否必填 | bool | false |
|
|
|
|
|
| check | 验证的回调函数,参数两个,第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function | - |
|
|
|
|
|
| method | 校验方式,change/blur | string | - |
|
|
|
|
|
| errorMessage | 错误提示信息 | dom/string | "校验失败" |
|
|
|
|
|
| htmlType | 数值类型,目前支持 email/tel/IDCard/chinese/password'类型 | string | - |
|
|
|
|
|
| reg | 校验正则,注:设置 htmlType 后 reg 无效 | regExp | - |
|
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
#### 使用
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import renderInput from "tinper-bee/lib/InputRender.js";
|
|
|
|
|
import { Icon, Form , FormControl } from 'tinper-bee';
|
|
|
|
|
const InputRender = renderInput(Form, FormControl, Icon);
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
2017-11-02 14:01:03 +08:00
|
|
|
|
### DateRender
|
|
|
|
|
日期类型render
|
|
|
|
|
|
|
|
|
|
#### 依赖的组件
|
2018-05-22 19:38:15 +08:00
|
|
|
|
该render依赖于`moment`, `Datepicker`, `Icon`
|
2017-11-02 14:01:03 +08:00
|
|
|
|
|
2017-11-06 15:38:01 +08:00
|
|
|
|
|
2017-11-02 14:01:03 +08:00
|
|
|
|
#### 配置
|
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
| ----------------- | ---------------------------------------- | ---------- | ------ |
|
2018-01-08 14:49:47 +08:00
|
|
|
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
|
|
|
|
| type | 控制日期的显示格式,DatePicker、MonthPicker或者WeekPicker,暂时不支持RangePicker | string | "DatePicker" |
|
|
|
|
|
|
2017-11-02 14:01:03 +08:00
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
注:其他参数参见Datepicker组件参数配置
|
|
|
|
|
|
|
|
|
|
#### 使用
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import renderDate from "tinper-bee/lib/DateRender.js";
|
|
|
|
|
import Datepicker from "tinper-bee/lib/Datepicker";
|
|
|
|
|
import { Icon } from 'tinper-bee';
|
|
|
|
|
const DateRender = renderDate(Datepicker, Icon);
|
|
|
|
|
|
|
|
|
|
```
|
2017-11-02 14:01:03 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### SelectRender
|
2018-05-22 19:38:15 +08:00
|
|
|
|
下拉框类型render
|
2017-11-02 14:01:03 +08:00
|
|
|
|
|
|
|
|
|
#### 依赖的组件
|
2018-05-22 19:38:15 +08:00
|
|
|
|
该render依赖于`Icon`,`Select`
|
2017-11-02 14:01:03 +08:00
|
|
|
|
|
2017-11-06 15:38:01 +08:00
|
|
|
|
|
2017-11-02 14:01:03 +08:00
|
|
|
|
#### 配置
|
2017-11-08 15:51:36 +08:00
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
| -------------- | ---------------------------------------- | ------- | ----- |
|
|
|
|
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
2018-05-11 14:43:54 +08:00
|
|
|
|
| dataSource | 数据的键值对,在表格浏览态的时候能显示真实的key值。比如`[{key:"张三",value:"01"}]` | array | - |
|
2017-11-08 15:51:36 +08:00
|
|
|
|
|
|
|
|
|
|
2017-09-22 14:47:53 +08:00
|
|
|
|
|
2018-05-22 19:38:15 +08:00
|
|
|
|
注:其他参数参见Select组件参数配置
|
|
|
|
|
|
|
|
|
|
#### 使用
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import renderSelect from "tinper-bee/lib/SelectRender.js";
|
|
|
|
|
import { Icon, Select } from 'tinper-bee';
|
|
|
|
|
const SelectRender = renderSelect(Select, Icon);
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### CheckboxRender
|
|
|
|
|
复选框类型render
|
|
|
|
|
|
|
|
|
|
#### 依赖的组件
|
|
|
|
|
该render依赖于`Icon`,`Checkbox`
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### 配置
|
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
|
|
|
| -------------- | ---------------------------------------- | ------- | ----- |
|
|
|
|
|
| onChange | 修改后触发回调函数 | function | () => {} |
|
|
|
|
|
| value | 设置是否选中值 | boolean | false |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
注:其他参数参见Checkbox组件参数配置
|
|
|
|
|
|
|
|
|
|
#### 使用
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
import renderCheckbox from "tinper-bee/lib/CheckboxRender.js";
|
|
|
|
|
import { Icon, Checkbox } from 'tinper-bee';
|
|
|
|
|
const CheckboxRender = renderCheckbox(Checkbox, Icon);
|
|
|
|
|
|
|
|
|
|
```
|