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|下拉备选项| [] (Arrary)|

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