customer-from v0.1.7200
from组件使用说明
安装
npm i customer-from --save-dev
或
yarn add customer-from
复制下面一行代码到public
文件下的index.html
,是为了引入矢量图表库
<script src='https://at.alicdn.com/t/font_1759882_i1ymt0z6028.js'></script>
在所需位置引入
import {CustomerForm} from 'customer-from'
Props
visible
- Type:
Boolean
- 是否必填: 是
- Default:
false
用户控制组件的显示与隐藏
defaultValue
- Type:
object
- 是否必填:
否
- Default:
{}
初始化数据,用作数据回显,数据结构和保存数据输出数据结构相同
onChangeDrawerStatus
- Type:
Function
- 是否必填:
是
- 参数:
无
组件调用的方法,隐藏组件
onChangeDrawerStatus =() =>{
const { visible } = this.state;
this.setState({
visible: !visible
})
}
onSave
- Type:
Function
- 是否必填:
是
- 参数:
无
点击保存,输出数据
数据说明
onSave输出数据结构
{
title: '模版标题',
fromData: [
{
name: '表单标题',
type: '表单类型',
radioValue: '具体表单类型' ,
isRequired: '是否必填',
select: [ // 下拉列表数据
{
label: '',
value: '',
}
]
}
]
}
数据结构说明 | 字段名 | 对应值 | 默认值 | |--|--|--| | title | 模版名称 | 空(String) | | name | 表单标题 | 空(String)| | type | 表单类型 |string(String) | | radioValue | 具体表单类型 | input(String) | |isRequired|是否必填|true(布尔值)| |select|下拉备选项| |
type数据对照表
字段名 | 对应值 |
---|---|
string | 文本型 |
number | 数字型 |
select | 下拉型 |
time | 日期型 |
upload | 上传型 |
radioValue数据对照表
radioValue
是type
的具体说明,例如type :string
,radioValue : TextArea
,则实际渲染表单时为一个多行文本输入框(TextArea)
,若radioValue : input
,则为一个单行文本输入框
如对照表中为仅...
,则此表单仅有这个功能
|字段名| 对应值 |
|--|--|
| image | 仅图片 |
|audio| 仅音频|
|video|仅视频|
|document|仅文档|
|file|任何文件|
|accuracyTime|时间和日期|
|time|仅时间|
|data|仅日期|
|aSpan|开始时间与结束时间|
|input|单行文本|
|TextArea|多行文本|
修改源代码说明
npm i
npm start
如需编译,记得修改package.json
中的入口文件
npm run build
如需打包,更新npm包,请先删除lib文件夹
npm run se6 // 转译es6->es5
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago