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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
js 编写规范
Mar 03 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 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常用Output和ptions/Info函数集介绍
2013/06/19 PHP
解析link_mysql的php版
2013/06/30 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
js实现的后台左侧管理菜单代码
2015/09/11 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
python中的闭包用法实例详解
2015/05/05 Python
python查询sqlite数据表的方法
2015/05/08 Python
Python中title()方法的使用简介
2015/05/20 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python ChainMap的使用和说明详解
2019/06/11 Python
pandas 层次化索引的实现方法
2019/07/06 Python
使用python实现多维数据降维操作
2020/02/24 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
关于元旦的广播稿
2014/02/16 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
基层党支部承诺书
2015/04/30 职场文书
物业保安辞职信
2015/05/12 职场文书