vue自定义表单生成器form-create使用详解


Posted in Javascript onJuly 19, 2019

介绍

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

文档 | github

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

功能

  • 自定义组件
    • 可生成任何Vue组件
    • 自带数据验证
    • 轻松转换为表单组件
  • 通过 JSON 生成表单
  • 通过 Maker 生成表单
  • 强大的API,可快速操作表单
  • 双向数据绑定
  • 事件扩展
  • 局部更新
  • 数据验证
  • 栅格布局
  • 内置组件17种常用表单组件

对比 1.x

  • 速度更快
  • 体积更小
  • 更强大的全局配置
  • 自定义组件更容易扩展
  • 更容易支持第三方 UI 库
  • 更少的 bug

示例

通过 JSON 创建表单

vue自定义表单生成器form-create使用详解

通过 API 操作表单

vue自定义表单生成器form-create使用详解

@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

安装

npm i @form-create/element-ui

挂载

全局注册

import formCreate form '@form-create/element-ui';

Vue.use(formCreate);

局部挂载

import formCreate form '@form-create/element-ui';

export default {
  components:{
    formCreate:formCreaet.$form()
  }
}

生成表单

<template>
  <form-create v-model="$f" :rule="rule" @on-submit="onSubmit"></form-create>
</template>
export default {
 data () {
  return {
   //表单实例对象
   $f:{},
   //表单生成规则
   rule:[
    {
     type:'input',
     field:'goods_name',
     title:'商品名称'
    },
    {
     type:'datePicker',
     field:'created_at',
     title:'创建时间'
    }
   ]
  };
 },
 methods:{
   onSubmit(formData){
     //TODO 提交表单
   }
 }
};

效果

vue自定义表单生成器form-create使用详解

实例对象 $f

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

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

自定义组件

生成

通过标签生成

{
  type:'el-button',
  name: 'btn',
  props:{
    type:'primary',
    field:'btn',
    loading:true
  },
  children:['加载中']
}

通过模板生成

{
  type:'template',
  name:'btn'
  template:'<el-button :loading="loading">{{text}}<el-button>',
  vm: new Vue({
   data:{
    loading:true,
    text:'加载中'
   }
  })
}

转换为表单组件

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

预定义

props

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

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

例如:

vm = Vue({
 props:{
  value:String,
  disabled:Boolean   
 }
})

input 事件

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

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

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

挂载自定义组件

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

例如:

formCreate.component('TestComponent',component);

或者

Vue.component('TestComponent',component);

生成

表单组件必须定义field属性

JSON

{
  type:'TestComponent',
  value:'test',
  field:'testField',
  title:'自定义组件'
}

Maker

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

示例

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

formCreate.maker.template('<el-button @click="onClick" long :disabled="disabled">计数器-{{num}}</el-button>', new Vue({
 props:{
  //预定义
  disabled:Boolean,
  value:Number,
 },
 data: function () {
  return {
    num: this.value,
  }
 },
 watch:{
  value(n){
    this.num = n;
  }
 },
 methods: {
  onClick: function () {
    this.num++;
    //更新组件内部的值
    this.$emit('input',this.num);
  },
 },
}), 'tmp', '自定义 title').value(100).props('disabled',false)

完整示例

vue自定义表单生成器form-create使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List Installed Software Features
Jun 11 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
基于jquery的气泡提示效果
May 31 Javascript
js 第二代身份证号码的验证机制代码
May 12 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 #Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 #Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 #Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 #Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 #Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 #Javascript
Vue动态生成表格的行和列
Jul 18 #Javascript
You might like
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
php生成gif动画的方法
2015/11/05 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Mac下Anaconda的安装和使用教程
2018/11/29 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
详解用python自制微信机器人,定时发送天气预报
2019/03/25 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
金智子午JAVA面试题
2015/09/04 面试题
酒店经理职责
2014/01/30 职场文书
八一慰问活动方案
2014/02/07 职场文书
保密承诺书范文
2014/03/27 职场文书
商业门面租房协议书
2014/11/25 职场文书
师德先进个人材料
2014/12/20 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers