{"id":20144207,"url":"https://github.com/quansitech/reactcusform","last_synced_at":"2026-05-08T20:33:27.137Z","repository":{"id":97656679,"uuid":"378092859","full_name":"quansitech/ReactCusForm","owner":"quansitech","description":"自定义表单生成器 ReactCusForm","archived":false,"fork":false,"pushed_at":"2021-10-08T02:23:12.000Z","size":232,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-11-30T17:49:15.311Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quansitech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-18T09:00:51.000Z","updated_at":"2021-10-08T02:23:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"ed8e81f4-5da9-4689-b4f6-041fb0ce2885","html_url":"https://github.com/quansitech/ReactCusForm","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/quansitech/ReactCusForm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2FReactCusForm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2FReactCusForm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2FReactCusForm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2FReactCusForm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quansitech","download_url":"https://codeload.github.com/quansitech/ReactCusForm/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quansitech%2FReactCusForm/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32795951,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T22:09:15.486Z","updated_at":"2026-05-08T20:33:27.117Z","avatar_url":"https://github.com/quansitech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n# 自定义表单生成器 ReactCusForm\n\n\t通过用户传入的配置,自动生成表单html代码\n\t组件自带样式\n\n### 使用:\n\n```html\n\u003clink href=\"dist/react-cus-form.css\" rel=\"stylesheet\"\u003e\n\u003cscript src=\"dist/index.js\"\u003e\u003c/script\u003e\n```\n\n### 可生成表单 :\n\n- 文本输入框\n\n  - type =\u003e 'text',\n  - unitText 字段单位文本\n  - inputType 输入框类型 默认为 'text',可选 number,email,search 等html5支持的输入框类型\n\n- 选择输入框 select\n\n  - type =\u003e 'select',\n  - options =\u003e 见下文 \"options配置说明\"\n\n- 单选框\n\n  - type =\u003e 'radio',\n  - options =\u003e 见下文 \"options配置说明\"\n  - showTextField 是否在最后展示文本字段,当该字段开启时,以下字段可用\n    - textFieldName  =\u003e String 字段名\n    - textFieldVal  =\u003e String 字段值\n    - textFieldPlaceHolder  =\u003e String 占位符\n\n- 多选框\n\n  - type =\u003e 'checkbox',\n  - options =\u003e 见下文 \"options配置说明\"\n  - showTextField 是否在最后展示文本字段,当该字段开启时,以下字段可用\n    - textFieldName =\u003e String 字段名\n    - textFieldVal =\u003e String 字段值\n    - textFieldPlaceHolder =\u003e String 占位符\n\n- 多行文本框\n\n  - type =\u003e 'textarea',\n  - maxTextNumber =\u003e number 最大数字限制\n\n- 隐藏域\n\n  - type =\u003e 'hiddenField', 可作初始化插件,在onMount中调用\n\n- 地址选择框\n\n  - type =\u003e 'addrSelect',\n  - showDetailAddress =\u003e Boolean 是否展示详细地址,当该字段开启时,以下字段可用\n    - textFieldName =\u003e String  字段名\n    - textFieldVal  =\u003e String 字段值\n    - textFieldPlaceHolder  =\u003e String 占位符\n\n- 图片验证码\n\n  - type =\u003e 'imgVerifyCode',\n  - verifyCodeUrl  =\u003e String\n\n- 手机验证码\n\n  - type =\u003e 'verifyCode',\n  - sendCodeRequest =\u003e function 可进行自定义获取验证码操作\n\n- 三级地址联动\n\n  - type =\u003e 'city', 必须引入ReactFullAreaSelect\n\n- 纯文本\n\n  - type =\u003e 'plainText',\n  - type =\u003e 'description',\n  - value =\u003e string\n\n- 多选框 + 文本描述\n\n  - type =\u003e 'checkboxWithTitle',\n  - onClickCheckboxTitleDesc =\u003e function\n\n- 单选框 switch\n\n  - type =\u003e 'switch',\n\n- 单选 + 文本框 radio-text(后端自定义表单)\n\n  - type =\u003e 'radio-text',\n  - onClickCheckboxTitleDesc =\u003e function\n\n- 单选 + 文本框 checkbox-text(后端自定义表单)\n\n  - type =\u003e 'checkbox-text',\n  - onClickCheckboxTitleDesc =\u003e function\n\n  tips: type字段均可接收 \"-\" 分割,eg: plainText 可传 'plain-text';\n\n\n\n\n### 用法:\n\n```javascript\nvar reactCusFormDemo;\nvar formItems = [\n    {\n        title: '每个人捐赠多少钱',\n        type: 'text',\n        value: '20',\n        placeholder: '请填写数字',\n        required: true,\n        unitText: '个',\n        inputType: 'number',\n        name: 'theme',\n        onMount: function (el ,input){\n            reactCusFormDemo.hideItemByName('sex'); //下面的 '性别' 字段将被隐藏\n        }\n    },\n    {\n        type: 'hiddenField',\n        value: '20', \n        onMount: function (el ,input){\n            console.log(input) //hiddenField可用于初始化各种插件\n        }\n    },\n    {\n        title: '性别',\n        type: 'select',\n        options: [\n            {\"title\": \"男 \",\"value\":1},\n            {\"title\": \"女\",\"value\":2},\n            {\"title\": \"未知\",\"value\":0}\n        ],\n        value: '女',\n        tips: '请填写性别',\n        placeholder: '请认真填写',\n        required: 1,\n        name: 'sex',\n        onMount: function (el ,input){\n        }\n    },\n    {\n        title: '我已阅读并同意',\n        desc: '《服务协议》',\n        onClickCheckboxTitleDesc(){\n        },\n        type: 'checkboxWithTitle',\n        options: '',\n        value: '',\n        extraClassName: '',\n        tips: '请勾选服务协议',\n        required: 1,\n        name: 'agreement',\n        onMount: function (el ,input){\n        }\n    },\n];\n\nreactCusFormDemo = ReactCusForm('form', {\n    fromItems: fromItems,\n    onMount: function(){\n        \n    }\n});\n\n//隐藏性别字段\nreactCusFormDemo.hideItemByName('sex');\n//显示性别字段\nreactCusFormDemo.showItemByName('sex');\n```\n\n### 通用配置字段:\n\n- 通用属性:\n  - title =\u003e string 标题\n  - subTitle =\u003e string 子标题\n  - desc =\u003e string 标题右侧\n    - onClickDesc =\u003e function  desc必须传入\n  - type =\u003e string 字段类型\n  - value =\u003e string 字段值\n  - extraClassName =\u003e string 自定义的样式名\n  - required =\u003e boolean 是否必填(将有* 号标记, 且表单元素 有require属性)\n  - name =\u003e string 字符名\n  - placeholder =\u003e string 占位符(隐藏域等类型将不显示)\n  - tips =\u003e string 底部输入提示,可传入html\n  - readonly =\u003e boolean 是否只读 该字段开启  样式\u0026结构 跟原来不同\n\n- 方法:\n  - onMount =\u003e function(el, input) el为整个项的dom元素  input可能为空\n\n### options配置说明:\n\noptions: string | Array[object] | object 表单选项配置\n\n  eg:\n\n - string: (key,value 均为字符串本身,一般用于后台生成的自定义表单)\n  ```javascript\n   '大专,本科,无',\n  ```\n\n  - Array[object]:\n\n  ```javascript\n  [\n    {\"title\": \"男 \",\"value\":1},\n    {\"title\": \"女\",\"value\":2},\n    {\"title\": \"未知\",\"value\":0}\n  ]\n```\n\n  - object: (排序按浏览器默认排序)\n\n  ```javascript\n    {    \n      1: '党员',  \n      2: '团员',\n      3: '无',\n    }\n  ```\n\n------------\n\n\n\n## 扩展\n\n可以把不存在的type 转成 存在的类型,\n\n或在类型初始化前后统一进行自定义操作\n\n使用方法\n\n```javascript\nReactCusForm.registerItemType(type: String, function: conifg):config\n```\n\ntype为新的自定义类型, 若type 的值与原类型相同, 可在初始化前后统一进行自定义操作\n\nfunction (config) =\u003e  config 为原配置config;\n\n返回值: 返回新的config配置\n\n可用一个js文件 在ReactCusForm后引入\n\neg:  在hiddenField 基础上 , 新增 oss上传 picture类型\n\n```javascript\nReactCusForm.registerItemType('picture',function (config) { \n\treturn Object.assign({}, config, {      \n          type: 'hiddenField',        \n          onMount: function (el, input) {     \n              var uploadOptions = {};     \n              try{            \n                  uploadOptions = JSON.parse(config.options) || {};   \n              }catch (e){       \n                  \n              }                        \n              $(input).attr('data-srcjson', config.srcjson)        \n                .ossuploaderWrapper({     \n                  url: '/extends/AliyunOss/policyGet/type/image.html',      \n                  multi_selection: false,          \n                  oss: true,           \n                  type: 'image',   \n                  limit: uploadOptions.max_upload_count || undefined,             \n                  show_msg: showMsg,     \n              });      \n          }  \n\t});});\n```\n\n\n\n## 返回值\n\ninstance: react 实例属性\n\n方法: (使用以下方法 需引入jquery)\n\n- showItemByName(name: String): 根据配置中的name字段,显示项 \n- hideItemByName(name: String): 根据配置中的name字段,隐藏项\n\n根据 表单字段 name 隐藏/显示 字段\n\n\n\n## css\n\n```css\n--cus-form__input-bg-color: #f1f1f1; //输入框背景色\n--cus-form__active-color: #1890ff;  //插件主题色(蓝色),如switch背景,采用该颜色\n```\n\n可通过变量修改颜色\n\n\n\n\n------------\n\n# 调试\n\nnode 10, 12 均可运行, 其他版本请自行尝试\n\n1.  运行yarn\n2.  yarn run start\n3.  调试代码在 src/app.js\n\n## 打包\n\n2. yarn run build\n2. src/index.js 将被打包\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquansitech%2Freactcusform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquansitech%2Freactcusform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquansitech%2Freactcusform/lists"}