基于Vue,ElementUI开发的一款表单设计器
2018-09-28 13:20
1376 查看
介绍
基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来
工具地址:http://tools.xiaoyaoji.cn/form
GitHub地址:https://github.com/GavinZhuLei/vue-form-making
特性
- 可视化配置页面
- 提供栅格布局,并采用flex实现对齐
- 一键预览配置的效果
- 一键生成配置json数据
- 一键生成代码,立即可运行
- 提供自定义组件满足用户自定义需求
- 提供远端数据接口,方便用户需要异步获取数据加载
- 提供功能强大的高级组件
- 支持表单验证
- 快速获取表单数据
CDN
[code]<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
Install
[code]npm install form-making -S
Quick Start
[code]import FormMaking from 'form-making' import 'form-making/dist/FormMaking.css' Vue.use(FormMaking) // or import { GenerateForm } from 'form-making' import 'form-making/dist/FormMaking.css' Vue.component(GenerateForm.name, GenerateForm)
Template
[code]<fm-generate-form></fm-generate-form>
功能介绍
通过 在线地址 生成的JSON,用于表单渲染
下面就是加载对应的数据用于展示,假设你已经正确加载组件
[code]<fm-generate-form :data="jsonData" :remote="remoteFuncs" :value="values" ref="generateForm"> </fm-generate-form> <script> new Vue({ ... data () { return { jsonData: {}, // 表单配置中生成的json数据 values: {}, // 表单需要显示的表单数据 remoteFuncs: { // 组件配置时配置的远端方法,保持和配置时输入的名称一致 func_test (resolve) { // 模拟接口请求 setTimeout(() => { const options = [ {id: '1', name: '1111'}, {id: '2', name: '2222'}, {id: '3', name: '3333'} ] // 获取到的值和标签可以通过配置页远端配置 // 值:id 标签:name resolve(options) // 将后端获取的数据放入回调函数中 }, 2000) }, func_test2.... } } }, methods: { ...{ // 调用此方法验证表单数据和获取表单数据 this.$refs.generateForm.getData().then(data => { // 数据校验成功 // data 为获取的表单数据 }).catch(e => { // 数据校验失败 }) } } }) </script>
问题交流
QQ群:902048874
阅读更多相关文章推荐
- 基于Ckeditor的表单设计器的开发(四)
- 基于Silverlight智能表单设计开发(二)
- 基于Ckeditor的表单设计器的开发(一)
- 基于Ckeditor的表单设计器的开发(一)
- VBox 一款基于vue开发的音乐盒 序章
- 基于Ckeditor的表单设计器的开发(二)
- JeeFast是一款基于SpringBoot+Mybatis-Plus+Bootstrap+Vue搭建的JAVA WEB快速开发平台
- 基于Ckeditor的表单设计器的开发(三)
- 基于Silverlight智能表单设计开发(一)
- 基于Silverlight智能表单设计开发(三)
- 基于UEditor上开发的表单设计器--自定义文本控件
- JeeFast是一款基于SpringBoot+Mybatis-Plus+Bootstrap+Vue搭建的JAVA WEB快速开发平台
- 基于Silverlight智能表单设计开发(四)
- 基于Ckeditor的表单设计器的开发
- 基于Ckeditor的表单设计器的开发
- 基于Hadoop开发网络云盘系统架构设计方案第一稿
- Framework的设计与应用--基于Windows Forms的应用开发实践
- 基于Boost.Asio的异步通信服务器设计与开发
- Framework的设计与应用--基于Windows Forms的应用开发实践
- 基于Eclipse下SWT的动态表单设计