Skip to content

这是一个通过拖拽编辑等操作来生成表单页面的操作后台,我们可以通过css样式来自定义合成的表单页面。

Notifications You must be signed in to change notification settings

FIGHTING-TOP/form-builder

Repository files navigation

基于Vue实现自定义表单控件

新项目需要用到工作流设定 + 自定义表单控件,这里列出了自定义表单控件的代码实现,可实现自定义表单控件,可拖拽排序,自定义属性

TODO(有 ✔ 代表已完成)

  • 1、标题 是纯文本,不需要匹配数据库字段 ✔

  • 2、地址选择 应包括名称和编码 ✔

  • 3、radio 、checkbox 的 每个选择项都要能设置 value name 比如 0 男/1 女 ✔

  • 4、单选、多选 排斥处理 (无 与 别的选项,选择需互斥,包括填写的输入框都置为空) ✔

  • 5、选择字段, 字段的中文名称可编辑 ✔

  • radio 、checkbox内部 文本框 也要加判断限制(比如 文本长度,正则验证) ✔

  • table的输入框 可能是日期选择 ✔

  • table 的输入框也需要加验证 ✔

  • table 单元格 可以选单位 ✔

  • 文本框 可追加描述 ✔

  • 单选、多选 互斥,填写的输入框都置为空) ✔

  • 文本验证:中英文混合验证 比如设置字符串度,在提交时还需要验证实际长度(byte限制) ✔

  • table 的 输入框 支持 弹框选择 ✔

  • radio、checkbox 文本框输入自动选中 ✔

  • 键盘遮住页面,页面底部默认加一个键盘的高度 ✔

运行使用

npm install
npm start

文件目录

.
├── README.md
├── build
├── config
├── dist
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   │   ├── custom_form             //自定义表单组件
│   │   │   ├── FormList.js         //表单列表    
│   │   │   ├── ItemIcon.js         //表单图标配置
│   │   │   ├── Render.js           //表单列表渲染
│   │   │   ├── components          //表单公用组件
│   │   │   │   └── Uploads         //上传组件
│   │   │   │       └── upload.vue
│   │   │   ├── config              //配置文件
│   │   │   │   ├── area.js         //地区配置
│   │   │   │   └── trigger.js      //表单验证触发事件
│   │   │   ├── control             //表单控件列表
│   │   │       ├── Address.js      //地区选择
│   │   │       ├── Cascader.js     //多级联动
│   │   │       ├── CheckBox.js     //多选框
│   │   │       ├── DatePicker.js   //时间选择器
│   │   │       ├── Hr.js           //hr标签
│   │   │       ├── Input.js        //输入框
│   │   │       ├── P.js            //p标签
│   │   │       ├── Radio.js        //单选框
│   │   │       ├── Select.js       //下拉选择框
│   │   │       ├── Text.js         //文本域
│   │   │       ├── Title.js        //标题
│   │   │       └── Uploads.js      //上传控件
│   │   │   └── index.js            //控件注册
│   │   ├── index.vue               //自定义表单页面
│   │   └── render.vue              //表单渲染,数据回填页面
│   ├── main.js                     //入口文件
│   └── router                      //路由配置
│       └── index.js
└── static                          //静态数据模版
    ├── label.1.json
    ├── label.12.json
    ├── label.14.json
    ├── label.17.json
    ├── label.19.json
    ├── label.3.json
    ├── label.5.json
    ├── label.8.json
    └── label.json

相关插件:

Reference

About

这是一个通过拖拽编辑等操作来生成表单页面的操作后台,我们可以通过css样式来自定义合成的表单页面。

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages