createform用法_vue自定义表单生成器form-create使用详解
介绍
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。
文档 | github
演示项目: 开源的高品质微信商城
功能
自定义组件
可生成任何Vue组件
自带数据验证
轻松转换为表单组件
通过 JSON 生成表单
通过 Maker 生成表单
强大的API,可快速操作表单
双向数据绑定
事件扩展
局部更新
数据验证
栅格布局
内置组件17种常用表单组件
对比 1.x
速度更快
体积更小
更强大的全局配置
自定义组件更容易扩展
更容易支持第三方 UI 库
更少的 bug
示例
通过 JSON 创建表单
通过 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
安装
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()
}
}
生成表单
export default {
data () {
return {
//表单实例对象
$f:{},
//表单生成规则
rule:[
{
type:'input',
field:'goods_name',
title:'商品名称'
},
{
type:'datePicker',
field:'created_at',
title:'创建时间'
}
]
};
},
methods:{
onSubmit(formData){
//TODO 提交表单
}
}
};
效果
实例对象 $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:'{{text}}',
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('计数器-{{num}}', 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)
完整示例
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
createform用法_vue自定义表单生成器form-create使用详解相关推荐
- vue 根据字符串生成表单_vue自定义表单生成器,可根据json参数动态生成表单
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
- HTML 表单(form) 使用详解
一.表单 1.表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互. 2.表单的工作机制 3.表单定义(<form>< ...
- Python的Django框架中forms表单类的使用方法详解2
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...
- php 表单提交文件大小,PHP如何通过表单直接提交大文件详解
PHP如何通过表单直接提交大文件详解 前言 我想通过表单直接提交大文件,django 那边我就是这么干的.而对于 php 来说,我认为尽管可以设置最大上传的大小,但最大也无法超过内存大小,因为它无法把 ...
- Vue自定义表单生成器,通过Json生成表单
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
- 微信小程序form表单提交到MYSQL实例详解(PHP)
1.小程序相对于之前的WEB+PHP建站来说,个人理解为只是将web放到了微信端,用小程序固定的格式前前端进行布局.事件触发和数据的输送和读取,服务器端可以用任何后端语言写,但是所有的数据都要以JSO ...
- Python的Django框架中forms表单类的使用方法详解
Form Form的验证思路 前端:form表单 后台:创建form类,当请求到来时,先匹配,匹配出正确和错误信息. Django的Form验证实例: 创建project,进行基础配置文件配置 set ...
- 表单input标签type属性详解
目标:详解表单input标签type属性常用的属性值 一.input标签和它的type属性 PS:input 元素可以用来生成一个供用户输入数据的简单文本框. 在默认的情况下, 什么样的数据均可以输入 ...
- form表单 vue 拖拽_vue实现可视化可拖放的自定义表单(代码示例)
本篇文章给大家带来的内容是关于vue实现可视化可拖放的自定义表单(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现如例子所示的可视化可拖放表单功能.整个页面,分为左中右 ...
最新文章
- IHttpModule和IHttpHandler 应用笔记
- pytorch 单机多卡训练distributedDataParallel
- 高可用MySQL MHA介绍
- 【CSS3】将截断的文字可选的显示出来
- 算法笔记_056:蓝桥杯练习 未名湖边的烦恼(Java)
- 特斯拉将国产Model 3和Model Y后轮驱动版价格上调4752元
- Storm中Topology、Worker、Executor和Task的关系
- Confluence 6 匿名访问远程 API
- java项目中用了Disruptor之后,性能提升了10倍
- Java 表达式解析(非原创)
- 区块链优秀github开源项目
- BZOJ3668:[NOI2014]起床困难综合症(贪心)
- numpy实用技巧(二)
- MSP430G2553电子时钟实验
- 手机软件测试linux,手机终端软件测试浅析
- Spring Cloud GateWay-过滤器
- 又一家初创公司获得数千万融资进军边缘计算赛道!
- 【蜂口 | AI人工智能】三维人脸重建——龙鹏 深度学习与人脸图像应用连载(十)
- JAVA 代码块、静态代码块、构造器执行顺序
- Mac m1配置MAMP+PHPStorm环境
热门文章
- idea lombok 离线安装_Lombok与IntelliJ IDEA干了一架,完胜
- windows7远程linux,用XManager在Windows7下远程桌面连接Linux
- matlab 符号表达式 系数 小数,matlab符号表达式系数
- 基于探究式教学法的计算机网络原理课程的教学改革与实践,基于探究式教学法的“计算机网络原理”课程的教学改革与实践分析...
- java 对话框 显示图片_Java对话框上显示图片
- html5 防止脚本攻击,shell防ddos攻击脚本(二)
- linux 中 timeval结构体
- string 找出所有数字 index_发现规律,解决整数转罗马数字
- dll文件懒加载_一步步学习NHibernate(5)——多对一,一对多,懒加载(2)
- leftjoin多表联合查询_leetcode-sql练习精讲系列文章——一、多表如何连接