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 相关文章推荐
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
Vue精简版风格概述
Jan 30 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
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
写一个用户在线显示的程序
2006/10/09 PHP
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
Yii2框架BootStrap样式的深入理解
2016/11/07 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
js的event详解。
2006/09/06 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
2013/11/15 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
详解Python的Django框架中的templates设置
2015/05/11 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python实现动态创建类的方法分析
2019/06/25 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Python如何创建装饰器时保留函数元信息
2020/08/07 Python
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
简历中自我评价范文3则
2013/12/14 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
体育课课后反思
2014/04/24 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
农村老人去世追悼词
2015/06/23 职场文书
导游词之昭君岛
2020/01/17 职场文书