开源中国 2018 年度最后一场技术盛会邀你来约~错过就要等明年啦!点此立即预约

xaboy / form-createJavaScriptMIT

Watch 23 Star 49 Fork 10
Sign up for free
Explore and code with more than 2 million developers,Free private repositories !:)
Sign up
具有数据收集、校验和提交功能的表单生成器,包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能。 spread retract

Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

form-create

version npm JS gzip size

具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,树型,文件/图片上传等功能组件。


1.4.5 版本已支持 iview3

开始使用 | 原说明文档

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢!

本项目还在不断开发完善中,如有任何建议或问题请在这里提出

本项目QQ讨论群28963712

1.4 版本重大更新

  • 新增 使用标签模式生成 <form-create>
  • 优化 maker规则生成器
  • 新增 生成任意标签组件 `maker.create(componentName)
  • 新增 标签模式下支持emit触发事件
  • 新增 使用 template 快速生成自定义组件 maker.createTmp(template,vm)
  • 支持 iview>=3.1.4版本

更新说明

建议保持在最新版本

1.4.6 (2018-11-25)

  • 修复 upload 组件 onRemove 不触发bug
  • 修复 ie 下兼容性问题
  • 修复 checkbox,radio 组件不能选中 bug
  • 修复 滑块组件不传值时默认 NAN bug

1.4.5 (2018-11-12)

  • 优化 上传组件图标显示
  • 修复 上传组件图片无法删除
  • 新增 options.mounted 表单创建成功后的回调函数
  • 支持 iview>=3.1.4版本

1.4.4 (2018-11-4)

  • 优化 内部功能优化,参数优化
  • 新增 使用 reload 更新生成规则 $f.reload(newRules)
  • 新增 标签模式下生成规则发生变化时表单自动刷新
  • 修复 npm run dev命令无法有时打开 Demo

示例 在线预览

https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

Demo

使用 maker 生成器生成: demo

使用 json 生成: demo

各组件生成: demo

安装

npm install form-create

OR

git clone https://github.com/xaboy/form-create.git
cd form-create
npm install

引入

浏览器:

<!-- import Vue 2.5.16-->
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>

<!-- import iview 2.14.3-->
<link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.13.0/styles/iview.css">
<script src="https://cdn.bootcss.com/iview/2.13.0/iview.min.js"></script>

<!-- 省市区三级联动json数据,不使用三级联动不需要引入 -->
<script src="district/province_city_area.js"></script>

<!-- 模拟数据,实际使用中不需要引入 -->
<script src="demo/mock.js"></script>

<!-- import formCreate -->
<script src="dist/form-create.min.js"></script>

NodeJs:

import Vue from 'vue'
import iview from 'iview'
import 'iview/dist/styles/iview.css'
import formCreat from 'form-create'
//三级联动数据,不使用三级联动不需要引入
import 'form-create/district/province_city_area.js'
//示例规则,实际使用中不需要引入
import 'form-create/mock.js'
Vue.use(iview)
Vue.use(formCreat)

查看示例

npm run dev

OR

双击打开 demo/index.html

使用

//示例规则
let rules = window.mock;
new Vue({
    data:{
        formData:{}
    },
    mounted:function(){
        let root = document.getElementById('app'),that = this;
        $f = this.$formCreate(mock,{
            el:root,
            onSubmit:function (formData) {
                console.log(formData);
                //提交状态
                $f.btn.loading();
                //点击状态
                //$f.btn.finish();
                //创建第二个表单
                $f2 = that.$formCreate(mock,root);
            }
            });
        //动态添加表单元素
        $f.append($r,'goods_name');
        //绑定表单数据到formData
        this.formData = $f.model();

    }
})

组件模式下使用

<form-create ref="fc" :rule="rule" :option="option"></form-create>
    new Vue({
        el:'#app1',
        data:{
            formData:{},
            rule:mock,
            option:{
                //显示表单重置按钮
                resetBtn:true,
                //表单提交事件
                onSubmit:function (formData) {
                    alert(JSON.stringify(formData));
                    //按钮进入提交状态
                    $f.btn.loading();
                    //重置按钮禁用
                    $f.resetBtn.disabled();
                    //按钮进入可点击状态
//                    $f.btn.finish();
                    //创建第二个表单
                    $f = that.$formCreate(mock,root);
                }
            }
        },
        watch:{
            'formData.address':{
                handler:function (n) {
                    console.log(n);
                },
                deep:true
            }
        },
        mounted:function () {
            $f = this.$refs.fc.$f;
        }
    });

参考

iview框架: iview

validate 表单验证规则,具体配置查看: async-validator

accept 文件类型: attr-accept

icon图标: 图标

form-builder: 使用PHP快速生成现代化表单

感谢

时光弧线 | wxxtqk | williamBoss | 讨论群里的大佬们

联系

联系邮箱 : xaboy2005@qq.com

Comments ( 2 )

You need to Sign in for post a comment

Help Search