经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue自定义表单生成器,可动态生成表单
来源:cnblogs  作者:xaboy  时间:2019/7/19 9:25:41  对本文有异议

介绍

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

文档 | github

演示项目: 开源的高品质微信商城

功能

  • 自定义组件

    • 可生成任何Vue组件
    • 自带数据验证
    • 轻松转换为表单组件
  • 通过 JSON 生成表单

  • 通过 Maker 生成表单

  • 强大的API,可快速操作表单

  • 双向数据绑定

  • 事件扩展

  • 局部更新

  • 数据验证

  • 栅格布局

  • 内置组件17种常用表单组件

对比 1.x

  • 速度更快

  • 体积更小

  • 更强大的全局配置

  • 自定义组件更容易扩展

  • 更容易支持第三方 UI 库

  • 更少的 bug

示例

通过 JSON 创建表单 通过 JSON 创建表单

通过 API 操作表单 通过 API 操作表单

@form-create包说明

名称说明
@form-create/iview iview 版表单生成器
@form-create/element-ui element-ui 版表单生成器
@form-create/core form-create 核心包
@form-create/utils form-create 工具包
@form-create/data 省市区多级联动数据

使用

以element-ui版本为例介绍如何在项目中使用 form-create

安装

  1. npm i @form-create/element-ui

 

挂载

全局注册

  1. import formCreate form '@form-create/element-ui';
  2. Vue.use(formCreate);

 

局部挂载

  1. import formCreate form '@form-create/element-ui';
  2. export default {
  3. components:{
  4. formCreate:formCreaet.$form()
  5. }
  6. }

生成表单

  1. <template>
  2. <form-create v-model="$f" :rule="rule" @on-submit="onSubmit"></form-create>
  3. </template>
  4. export default {
  5. data () {
  6. return {
  7. //表单实例对象
  8. $f:{},
  9. //表单生成规则
  10. rule:[
  11. {
  12. type:'input',
  13. field:'goods_name',
  14. title:'商品名称'
  15. },
  16. {
  17. type:'datePicker',
  18. field:'created_at',
  19. title:'创建时间'
  20. }
  21. ]
  22. };
  23. },
  24. methods:{
  25. onSubmit(formData){
  26. //TODO 提交表单
  27. }
  28. }
  29. };

 

效果

form-create 效果图

实例对象 $f

可以通过 $f 快速操作表单,例如:

  • $f.hidden:隐藏指定组件
  • $f.validate:验证表单
  • $f.setValue:修改表单组件的值
  • $f.append:追加表单组件

自定义组件

生成

通过标签生成

  1. {
  2. type:'el-button',
  3. name: 'btn',
  4. props:{
  5. type:'primary',
  6. field:'btn',
  7. loading:true
  8. },
  9. children:['加载中']
  10. }

 

通过模板生成

  1. {
  2. type:'template',
  3. name:'btn'
  4. template:'<el-button :loading="loading">{{text}}<el-button>',
  5. vm: new Vue({
  6. data:{
  7. loading:true,
  8. text:'加载中'
  9. }
  10. })
  11. }

 

  1. 转换为表单组件

自定义组件转换为表单组件后,可通过$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作组件,达到和内置组件相同的效果

预定义

props

在自定义组件内部通过props接收一下属性

  • value 表单的值
  • disabled 组件的禁用状态

例如:

  1. vm = Vue({
  2. props:{
  3. value:String,
  4. disabled:Boolean
  5. }
  6. })

 

input 事件

通过input事件更新组件内部的值

当组件值发生变化后,通过 input 事件更新值.例如:

  1. vm.$emit('input',newValue);

 

挂载自定义组件

要生成的自定义组件必须通过Vue.component方法挂载到全局,或者通过formCreate.component方法挂载

例如:

  1. formCreate.component('TestComponent',component);

 

或者

  1. Vue.component('TestComponent',component);

 

生成

表单组件必须定义field属性

JSON

  1. {
  2. type:'TestComponent',
  3. value:'test',
  4. field:'testField',
  5. title:'自定义组件'
  6. }

 

Maker

  1. formCreate.maker.create('TestComponent','testField','自定义组件').value('test')

 

示例

自定义计数器按钮组件,获取按钮点击数.该组件的功能和内置组件相同

  1. formCreate.maker.template('<el-button @click="onClick" long :disabled="disabled">计数器-{{num}}</el-button>', new Vue({
  2. props:{
  3. //预定义
  4. disabled:Boolean,
  5. value:Number,
  6. },
  7. data: function () {
  8. return {
  9. num: this.value,
  10. }
  11. },
  12. watch:{
  13. value(n){
  14. this.num = n;
  15. }
  16. },
  17. methods: {
  18. onClick: function () {
  19. this.num++;
  20. //更新组件内部的值
  21. this.$emit('input',this.num);
  22. },
  23. },
  24. }), 'tmp', '自定义 title').value(100).props('disabled',false)

 

完整示例

form-create示例.png

原文链接:http://www.cnblogs.com/xaboy/p/11211138.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号