vue自定义表单生成器form-create使用详解
184 浏览量
2020-10-16
16:29:21
上传
评论
收藏 59KB PDF 举报
vue自定义表单生成器自定义表单生成器form-create使用详解使用详解
主要介绍了vue自定义表单生成器,可根据json参数动态生成表单,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
介绍介绍
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()
}
}
生成表单
<template>
资源评论
weixin_38688745
- 粉丝: 4
- 资源: 908
