Formnic

页面快速生成系统

控制台

https://formnic.faas.elenet.me

文档

https://formnic.faas.elenet.me/docs/#/

安装

npm install formnic -S

使用

在控制台制作表单，之后在项目中使用

以 Class 的方式

Formnic 默认导出了一个 Class：

HTML

<div id="form"></div>

JavaScript

import Formnic from 'formnic'
import 'formnic/lib/index.css'
 
const form = new Formnic('#form', {
  formId: '59391db161e4722ff7f4d2c0',
  onSubmit(data) {
    // process data
  },
  showSubmit: false, // whether to show the submit button, default true
  // provide data to initial the form
  model: {
    name: 'jack',
    age: 30,
    sex: 'female'
    // ....
  }
})
form.getModel()  // get current form model
form.reset() // reset form
form.validate(isValid => { console.log(isValid); }); // validate form
form.submit() // submit form

以组件的方式

如果你的项目使用了 Vue，还可以使用 Formnic 组件：

<template>
  <Formnic
    :model="model"
    form-id="59391db161e4722ff7f4d2c0"
    :on-submit="submit"
    ref="form" />
</template>
<script>
  import { Formnic } from 'formnic'
  import 'formnic/lib/index.css'
 
  export default {
    components: {
      Formnic
    },
 
    data() {
      return {
        model: {}
      }
    },
 
    methods: {
      submit(data) {
        // process data
      },
      reset() {
        this.$refs.form.reset()
      },
      validate() {
        this.$refs.form.validate(valid => {
          console.log(valid)
        })
      }
    }
  }
</script>