Skip to content
On this page

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

引入 Ant Design Vue

如果需要渲染 Ant Design 样式的表单,需要引入 Ant Design Vue 组件库。

项目中目前使用的是 ant-design-vue@3.x 版本,建议在项目中使用 3.x 版本。

可以进入 Ant Design Vue 文档 ↗ 查看。

在 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.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% 来渲染。

在 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>