FormMaking 官方文档

简体中文

English

简体中文

English

Appearance

关注微信公众号，获取最新动态

FormMaking V3 ​

FormMaking V3 是 Vue 3.x 升级版本，基于 Vue 3.x 和 Element Plus 开发的可视化/低代码表单设计器，可以生成 Element 和 Antd 样式的表单。

安装 ​

下载 FormMaking V3 ​

点击这里 ↗ 下载产品（选择V3版本），下载后将其解压到项目中。

TIP

可以放于项目任何位置上，本文档以项目根目录为例，其他位置只需要修改引入路径即可

  • Import 引入 ​

javascript
import FormMakingV3 from 'form-making-v3/dist/form-making-v3.es.js'

import 'form-making-v3/dist/index.css'

  • 浏览器引入 ​

直接通过浏览器的 script 和 link 标签导入 FormMaking V3，就可以使用全局变量 FormMakingV3 了。

html
<link rel="stylesheet" href="form-making-v3/dist/index.css">

<script src="form-making/dist/form-making-v3.umd.js"></script>

引入 Element Plus ​

bash
# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

在 Vue 项目中使用 ​

Vue 配置 ​

如果需要使用 自定义组件 字段进行表单的配置，需要在项目中使用 Vue 的完整版本（同时包含编译器和运行时的版本）。

js
// vite.config.js
resolve: {
  alias: {
    'vue': 'vue/dist/vue.esm-bundler.js'
  }
}
js
// vue.config.js
chainWebpack: config => {
  config.resolve.alias.set('vue$', 'vue/dist/vue.esm-bundler.js')
}

完整引入 ​

js
import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import FormMakingV3 from '@/form-making-v3'
import '@/form-making-v3/dist/index.css'

import App from './App.vue'

createApp(App).use(ElementPlus).use(FormMakingV3).mount('#app')

引入部分组件 ​

js
import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import {
  MakingForm,
  GenerateForm
} from '@/form-making-v3'
import '@/form-making-v3/dist/index.css'

import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(MakingForm)
app.use(GenerateForm)
app.mount('#app')

开始使用 ​

vue
<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
    preview 
    generate-code 
    generate-json
  >
  </fm-making-form>
</template>

TIP

使用时需要设置设计器的高度，默认情况高度是根据父元素 100% 来渲染。

使用 Ant Design Vue ​

提醒

如果项目中没有用到 Ant Design Vue 组件库，可以忽略这里。

安装 Ant Design Vue ​

bash
# NPM
$ npm install ant-design-vue --save

# Yarn
$ yarn add ant-design-vue

# pnpm
$ pnpm install ant-design-vue

TIP

从 3.7.0 版本开始，我们已经更新到 ant-design-vue@4.x，如果需要使用 3.x 版本，可以使用之前版本。

引入Ant Design Vue ​

js
import Antd from 'ant-design-vue'
import { Form } from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'

app.use(Antd)
// 需要提供 useInjectFormItemContext 依赖，以便表单能实时校验
app.provide('useInjectFormItemContext', Form.useInjectFormItemContext)

开始使用 ​

vue
<template>
  <fm-making-form 
    ref="makingform" 
    style="height: 500px;" 
    :use-antd-form="true"
  >
  </fm-making-form>
</template>

TIP

3.7.0 版本后，设计器默认将不开启 Antd 的渲染，如果需要预览查看 Antd 样式的表单 ，需要将 use-antd-form 属性设置为 true。

在 Html 文件中使用 ​

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css">
  <link rel="stylesheet" href="form-making-v3/dist/index.css">
  <style>
    html,body,#app{
      height: 100%;
    }
  </style>
</head>
<body >
  <div id="app" >
    <fm-making-form preview generate-code generate-json>
    </fm-making-form>
  </div>
</body>
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
<script src="form-making-v3/dist/form-making-v3.umd.js"></script>

<script>
  Vue.createApp({}).use(ElementPlus).use(FormMakingV3).mount('#app')
</script>
</html>

Copyright © 2019-present FormMaking