1 Star 0 Fork 1.1K

dawsonli / vue-form-making

forked from GavinZhulei / vue-form-making 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

vue-form-making

基于Vue,ElementUI快速创建表单,进行数据校验,获取表单数据

演示地址:http://tools.xiaoyaoji.cn/form-marking

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>

Hello world

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
</head>
<body>
  <div id="app">
    <fm-making-form></fm-making-form>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</html>

Install

npm install form-making -S

Quick Start

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'
Vue.use(ElementUI, { size: 'small' })
Vue.use(FormMaking)

// or
import {
  MakingForm
} from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.component(MakingForm.name, MakingForm)

Template

<fm-making-form></fm-making-form>

功能介绍

工具提供两个组件 MakingForm(表单配置),GenerateForm(表单渲染)

首先看看 MakingForm 的功能介绍

预览可以实时预览你编辑表单的表单渲染的效果,并可以查看获取到填写的数据结构

生成JSON操作为渲染组件生成JSON数据

接下来就是 GenerateForm 如何使用,这里默认你已经将该组件正确引入项目

<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 => {
                // 数据校验失败
            })
        }
    }
})

自此一个表单就制作完毕

空文件

简介

基于Vue,ElementUI快速创建生成表单,进行数据校验,获取表单数据 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/dawsonli/vue-form-making.git
git@gitee.com:dawsonli/vue-form-making.git
dawsonli
vue-form-making
vue-form-making
master

搜索帮助

14c37bed 8189591 565d56ea 8189591