介绍
基于 vue,ElementUI 开发的一款表单设计器, 提高表单开发效率的利器, 让开发者从枯燥的表单代码编写中解放出来
工具地址: http://tools.xiaoyaoji.cn/form
GitHub 地址: https://GitHub.com/GavinZhuLei/vue-form-making https://GitHub.com/GavinZhuLei/vue-form-making
特性
可视化配置页面
提供栅格布局, 并采用 flex 实现对齐
一键预览配置的效果
一键生成配置 JSON 数据
一键生成代码, 立即可运行
提供自定义组件满足用户自定义需求
提供远端数据接口, 方便用户需要异步获取数据加载
提供功能强大的高级组件
支持表单验证
快速获取表单数据
- CDN
- <!-- 引入样式 -->
- <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
- NPM install form-making -S
- Quick Start
- 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
- <fm-generate-form></fm-generate-form>
功能介绍
通过 在线地址 http://tools.xiaoyaoji.cn/form 生成的 JSON, 用于表单渲染
下面就是加载对应的数据用于展示, 假设你已经正确加载组件
- <fm-generate-form
- :data="jsonData"
- :remote="remoteFuncs"
- :value="values"
- ref="generateForm">
- </fm-generate-form>
- 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 => {
- // 数据校验失败
- })
- }
- }
- })
来源: http://www.qdfuns.com/article/51159/334115e992e52123bfc2b1cccfa5e361.html