Git Product home page Git Product logo

xaboy / form-create Goto Github PK

View Code? Open in Web Editor NEW
5.5K 95.0 889.0 15.11 MB

:fire::fire::fire: 强大的动态表单生成器|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON.

Home Page: http://www.form-create.com/v2/

License: MIT License

JavaScript 81.39% HTML 2.77% CSS 2.75% Vue 9.13% TypeScript 3.96%
form-builder element-ui vuejs form-generator ant-design-vue dynamic-form json-form vue vue3 form

form-create's Introduction

form-create v3

MIT github document vue3

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持5个UI框架,并且支持生成任何 Vue 组件。内置20种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。

这个是 Vue3 版本

开源的vue可视化表单设计器组件 (功能演示)

支持

  • element-plus
  • ant-design-vue
  • naive-ui
  • arco-design
  • tdesign

如果对您有帮助,您可以点右上角 "Star" 支持一下 谢谢!本项目还在不断开发完善中,如有任何建议或问题请在这里提出

本项目QQ讨论群629709230

更新日志

  • 预览

demo1

更多
  • 操作表单

详细说明

demo2

  • group 组件

详细说明

demo3

  • control 配置项

详细说明

demo2

文档

简体中文

包说明

包名 说明
@form-create/element-ui version npm element-plus 版本
@form-create/ant-design-vue version npm ant-design-vue 版本
@form-create/arco-design version npm arco-design 版本
@form-create/naive-ui version npm naive-ui 版本
@form-create/tdesign version npm tdesign 版本
@form-create/designer version npm 表单设计器 (已适配 Vue3)

示例

图例

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

安装

根据自己使用的 UI 安装对应的版本

element-ui

npm install @form-create/element-ui@next

ant-design-vue

npm install @form-create/ant-design-vue@next

arco-design

npm install @form-create/arco-design@next

naive-ui

npm install @form-create/naive-ui@next

tdesign

npm install @form-create/tdesign@next

引入

CDN:

element-plus

<link href="https://unpkg.com/[email protected]/dist/index.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/[email protected]/dist/index.full.js"></script>
<script src="https://unpkg.com/@form-create/element-ui@next/dist/form-create.min.js"></script>

ant-design-vue

<link href="https://unpkg.com/[email protected]/dist/antd.min.css"></link>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/dayjs"></script>
<script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script>
<script src="https://unpkg.com/@form-create/ant-design-vue@next/dist/form-create.min.js"></script>

NodeJs:

element-plus ^2.0

import formCreate from '@form-create/element-ui'
app.use(formCreate)

element-plus (with unplugin-vue-components/vite & ElementPlusResolver)

import formCreate from '@form-create/element-ui'
import install from '@form-create/element-ui/auto-import'
formCreate.use(install)
app.use(formCreate)

ant-design-vue ^3.0

import formCreate from '@form-create/ant-design-vue'
app.use(formCreate)

arco-design ^2.0

import formCreate from '@form-create/arco-design'
app.use(formCreate)

naive-ui ^2.0

import formCreate from '@form-create/naive-ui'
app.use(formCreate)

tdesign ^0.17.3

import formCreate from '@form-create/tdesign'
app.use(formCreate)

使用

<form-create :rule="rule" v-model:api="fApi" :option="options" v-model="value"/>
export default {
    data(){
        return {
            fApi:{},
            value:{field1:'111',field2:'222',time:'11:11:11'},
            options:{
                onSubmit:(formData)=>{
                    alert(JSON.stringify(formData))
                }
            },
            rule:[
                {type:'input', field:'field1',title:'field1',value:'aaa'},
                {type:'input', field:'field2',title:'field2',value:'sss'},
                {type:'timePicker', field:'time',title:'time',value:'12:12:12'},
                {
                    type:'ElButton',
                    title:'修改 field1',
                    native: false,
                    on:{
                        click: ()=>{
                            this.rule[0].value+='a'
                        }
                    },
                    children: ['点击'],
                }
            ]
        }
    }
}

示例

下载项目

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

安装依赖

$ npm run bootstrap

查看 element-ui 示例

$ npm run dev:ele

查看 ant-design-vue 示例

$ npm run dev:antd

感谢

时光弧线 | wxxtqk | williamBoss | HeyMrLin | djkloop | daiwenyong | JetBrains

捐赠

donation.jpg

联系

License

MIT

Copyright (c) 2018-present xaboy

form-create's People

Contributors

daiwenyong avatar djkloop avatar djkloop95 avatar renmu123 avatar ununian avatar xaboy avatar zh925 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

form-create's Issues

type类型为checkbox, DatePicker,inputNumber时验证不通过问题

1.type为checkbox时,其中
validate:[
{ required: true, message: '请选择标签', trigger: 'change' },
]
选中后还是会提示请选择标签
2. type 为DatePicker时,其props.type分别为date和datetime时 其中
validate:[
{ required: true, message: '请选择时间', trigger: 'change' },
]
选择时间后还是会提示选择时间。
详细的mock数据

 [
    {
        type:"checkbox",
        title:"标签",//label名称
        field:"label",//字段名称
        value:[],//input值,
        options:[
            {value:"1",label:"好用",disabled:false},
            {value:"2",label:"方便",disabled:false},
            {value:"3",label:"实用",disabled:false},
            {value:"4",label:"有效",disabled:false},
        ],
        props: {
            "size":"default", //多选框组的尺寸,可选值为 large、small、default 或者不设置
        },
        event:{
            //只在单独使用时有效。在选项状态发生改变时触发,通过修改外部的数据改变时不会触发
            change:(...arg)=>{},
        },
        validate:[
            { required: true, message: '请选择标签', trigger: 'change' },
        ]
    },
    {
        type: "DatePicker",
        field: "section_day",
        title: "活动日期",
        value: '', //input值, type为daterange,datetimerange value为数组 [start_value,end_value]
        props: {
            "type": "date", //显示类型,可选值为 date、daterange、datetime、datetimerange、year、month
            "format": "yyyy-MM-dd", //展示的日期格式
            "placement": "bottom-start", //	日期选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
            "placeholder":"请选择获得时间", //占位文本
            "confirm":false, //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭
            "size":"default", //尺寸,可选值为large、small、default或者不设置
            "disabled":false, //是否禁用选择器
            "clearable":true, //是否显示清除按钮
            "readonly":false, //完全只读,开启后不会弹出选择器
            "editable":false, //文本框是否可以输入
        },
        validate:[
            { required: true, message: '请选择活动日期', trigger: 'change' },
        ]
    },
    {
        type: "DatePicker",
        field: "section_time",
        title: "活动日期和时间",
        value: '', //input值, type为timerange value为数组 [start_value,end_value]
        props: {
            "type": "datetime", //显示类型,可选值为 time、timerange
            "format": "yyyy-MM-dd HH:mm:ss", //展示的时间格式
            "steps": [], //下拉列表的时间间隔,数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时,分钟会显示:00、15、30、45。
            "placement": "bottom-start", //	时间选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
            "placeholder":"请选择获得时间", //占位文本
            "confirm":false, //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭
            "size":"default", //尺寸,可选值为large、small、default或者不设置
            "disabled":false, //是否禁用选择器
            "clearable":true, //是否显示清除按钮
            "readonly":false, //完全只读,开启后不会弹出选择器
            "editable":false, //文本框是否可以输入
        },
        validate:[
            { required: true, message: '请选择日期和时间', trigger: 'change' },
        ]
    },
    {
        type: "InputNumber",
        field: "sort",
        title: "排序",
        value: 0, //input值
        props: {
            "max": undefined, //最大值
            "min": undefined, //最小值
            "step": 1, //每次改变的步伐,可以是小数
            "size":"default", //输入框尺寸,可选值为large、small、default或者不填
            "disabled":false, //设置禁用状态
            "readonly":false, //是否设置为只读
            "editable":true, //是否可编辑
        },
        validate:[
            { required: true, message: '请选择数字', trigger: 'blur' },
        ]
    },
];

[QUESTION] - Use of Select remote method

@xaboy, the documentation is not too clear on how to use the remote method on Select.

I have this field definition:

    {
      type: 'select',
      field: 'teamTypeId',
      title: 'team type',
      props: {
        'remote': true,
        'remote-method': this._buildTypeList
      }
    }

And the _biuldTypeList function is defined as:

  _buildTypeList () {
    const options = [
      {
        'value': 1,
        'label': 'test'
      },
      {
        'value': 2,
        'label': 'test 2'
      }
    ]
    return options
  }

But, when the form renders, there are no options in the select.

iview 3.1.5

iview 3.1.5....iview Demo 全是引用CDN的,在非CND。。组件引用的时候就用不了了。加QQ群也没反应。。。

双向数据绑定是否能支持值的双向绑定?

new Vue({
data:{
formData:{}
},
mounted:function(){
...
//绑定表单数据到formData
$f.model(this.formData);
}
})

目前的双向绑定,formData的数据格式为{field: {rule: object, value: xxx}}
而实际使用过程中,form的定义和数据是分开的,实际的值并不是放在form定义里的value,所以,希望能支持value双向绑定,实现类似以下的效果:
new Vue({
data:{
formData:{
field1: value1,
field2: value2,
...
}
},
mounted:function(){
...
//绑定表单数据到formData,替换form里默认的value值
$f.model(this.formData);
}
})

上传图片预览问题

请问以前版本的上传图片之后点击预览的事件,现在是否需要自己写了,还是可以继续延续之前的方法

用vue-cli使用有问题呀

我在项目下
npm install --save form-create

然后在main.js中
引入并使用
import formCreate from 'form-create'
Vue.use(formCreate)

居然报
This dependency was not found:

  • form-create in ./src/main.js

To install it, you can run: npm install --save form-create

请问这是什么原因呢

表单时间选择器

不改变时间的情况下提交表单,后台获取不到时间字段,改变时间后,后台又可以获得.

图片查看无法关闭问题

Form::frameImageOne('image','产品主图片(305*305px)',Url::build('admin/widget.images/index',array('fodder'=>'image')))->icon('image')->width('100%')->height('550px'),

点击眼睛按钮,可查看无法关闭,哪里可以写回调?还是有其他办法

[QUESTION] - validate for select

@xaboy, I have a select defined with:

    {
      type: 'select',
      field: 'brandId',
      title: 'brand',
      props: {
        clearable: true,
        placeholder: null
      },
      validate: [
        {
          required: true,
          message: 'required',
          trigger: 'blur'
        }
      ]
    },

When I submit the form the required validation displays, even though I have set a value in the select:
2019-03-24_11-15-12

在页面载入后设置表单的值?

我先建立form, 然后想直接填入数据formdata={xx1:yy1m xx2:yy2, ...}。

之前用的是 $f.bind()[xx1]= yy1, 写在mounted里面, 需要设置一个timeout, 过几秒跑才行。

现在用了1.5版本, $f.bind()失败了, 看定义有个参数? ƒ (e){var n=this,i={},r=t.vm;return ..., 但文档里面还是无参数.
然后用formData设置值, 因为现在加载太快了, mounted里面加入timeout也不行.

怎样传入数据呢?

Documentation in english

Hi,

I really want to continue implementing this lib and it would be really helpful if an English version of the documentation is available.

BTW great job doing this lib.

其他项目里面使用教程

<script> import './node_modules/form-create/mock.js'; import formCreate from ('formcreate'); Vue.use(formCreate); export default { data: {}, mounted: function() { let root = document.getElementById("app"), that = this; $f = this.$formCreate(mock, { el: root, onSubmit: function(formData) { console.log(formData); alert(JSON.stringify(formData)); //按钮进入提交状态 $f.btn.loading(); //按钮进入可点击状态 // $f.btn.finish(); //创建第二个表单 $f2 = that.$formCreate(mock, root); } }); //动态添加表单元素 $f.append($r, "goods_name"); } } </script>

请问不能这样用么?只能是js引入的方式?

部分组件动态更改disabled无法立即生效

以element demo为基础,修改时发现,动态修改disabled=true,部分组件无法立即生效,需值改变后才会锁定

组件有:radio,checkbox,select,switch,DatePicker,TimePicker,InputNumber,ColorPicker,rate,slider

对于radio和checkbox,额外设置options的disabled=true也不行。
但是如果一开始json设置为true,则是可以锁定的。

看了下官方文档,有写到:

说明: 如果修改后没有生效,需要提前在生成规则里定义该规则

我的json这些rule都有定义disabled=false

代码如下:
for(let i in $f.rule){
let rule=$f.rule[i];
if(_vm.readonly){
rule.props.disabled=true;
if(rule.type=="radio" || rule.type=="checkbox2" ){
for(let z in rule.options)rule.options[z].disabled=true;
}
}
}

请问是不支持还是哪里有问题?


代码是今天刚下的版本
组件模式+json数据方式
form-create v1.6.2 elementUI
[email protected]
vue 2.5.22

PS:刚测试了一下,json定义disabled=true,通过代码动态设为false,这样是可以的

Component Language

Some of the components seems to have Chinese labels. Examples:

  • ColorPicker: OK and Cancel button
  • DatePicker: Day names

Is there a global setting to use a specific language?

radio属性结合event里的change属性问题

点击radio属性,这个change只能获取到点击之前的值,点击之后的值获取不到。。。
麻烦作者怎么能获取点击之后的值
我看了change属性是点击的时候触发,应该是改变值之前触发的,建议增加changed属性,表示点击之后。

[QUESTION] - Pre-polutaing Form Data

@xaboy, are there any helper methods to pre-populate a form with data? I want to be able to pass in an object (JSON data) to the form, and based on the field property, be populated with data from the object.

Example data object:

{
  name: 'John Smith',
  email: '[email protected]'
}

Form rules:

[{
  type: 'input',
  field: 'name',
  title: 'name',
},
  type: 'input',
  field: 'email',
  title: 'email',
}]

formCreate is not defined

在main.js 文件中 import formCreat from 'form-create'
然后在 其它vue文件中,。就报错了
能不能有一个iview 非引用CDN的DEMO吖,很想用,无奈刚手,研究了好几天,没用上

请问自定义按钮怎么设置?

大神,请问自定义按钮怎么显示出文字, 我这样设置,按钮出来了,但是没有问题,图标也没出来.
{ type: "i-button", field: "mySubmit", value: "搜索", props: { "type": "primary", "loading": true, "icon": "md-search" }, col:{ span:8 } }

setValue not work

$f.setValue(field,value) $f.setValue({ field1:value1, field2:value2, field3:value3 });
调用setValue后,通过$f.formData获取到值已经发生改变,但是控件view内容并未发生改变,请问是什么原因呢

代码注释问题

请问能把源码中的注释添加一下吗?想扩展下,但没有注释很多代码看起比较痛苦

Linkage between form controls

demand:Two form controls,Linkage between form controls
Type: pull-down selection,
Product category: pull-down selection, (the initial state is hidden)
After selecting the type, a request is sent to the background. If the type has optional product classification, the product classification will be displayed

同页面创建表单问题

我在同一个页面创建多个表单,会出现错误,事件响应最后一个。
并且我不可以在第一个创建的表单的提交事件理再次创建一个表单

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.