# 指南

# 介绍

基于 vue 和 element-ui 实现的表单设计器,使用了最新的前端技术栈,内置了 i18n 国际化解决方案,可以让表单开发简单而高效。

提供 表单设计器(MakingForm)和表单生成器(GenerateForm)两个组件,通过表单设计器快速设计出表单页面,生成可配置json和可直接运行的代码,使用表单生成器快速渲染出表单页面,并提供了丰富的操作API。

# 基础版本

演示地址

# CDN

目前可以通过 unpkg.com/form-making获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>

<!-- 需要在设计器中预览代码需要引入ace.js库 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

建议使用 CDN 引入 FormMaking 的用户在链接地址上锁定版本,以免将来 FormMaking 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com

# Hello world

通过 CDN 的方式我们可以很容易地使用 FormMaking 来加载表单设计页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <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 style="height: 500px;" preview generate-code generate-json>
    </fm-making-form>
  </div>
</body>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
  <!-- 需要在设计器中预览代码需要引入ace.js库 -->
  <script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
  
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</html>

# npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm install form-making -S

# 快速使用

# 引入 Element

项目中使用的是 element-ui 的组件库,在使用的时候需要引入 Element 包,具体引入方法请参考 Element 文档 快速上手

# 引入 FormMaking

# 完整引入
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.use(FormMaking)

以上代码便完成了 FormMaking 的引入。需要注意的是,样式文件需要单独引入。

# 引入部分组件
import {
  GenerateForm,
  MakingForm
} from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.component(GenerateForm.name, GenerateForm)
Vue.component(MakingForm.name, MakingForm)
/* 或写为
 * Vue.use(GenerateForm)
 * Vue.use(MakingForm)
 */
# 引入 ace.js

默认情况下没有引入ace.js,如果需要使用ace.js,需要自己引入

<!-- 需要在设计器中预览代码需要引入ace.js库 -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

# 开始使用

至此,一个基于 Vue 和 Element 的表单设计器已经搭建完毕,现在就可以编写代码了。各个组件的使用方法请参阅组件文档

# 高级版本

演示地址

高级版本需要购买使用,请 前往购买

# 下载安装

进入控制台 - 已购产品 - 下载代码;将其解压到项目中,此处以项目根目录为例查看项目结构:

# 引入 Vue

高级版本@1.2.13 后由于加入了自定义组件,需要引入Vue的完整版本(即同时包含编译器和运行时的版本)。

// 以vue-cli3.0 创建的项目为例,在vue.config.js中进行配置
chainWebpack: config => {
  config.resolve.alias.set('vue$', 'vue/dist/vue.esm.js')
}

更多方法和介绍可以参考Vue文档 安装

# 引入 Element

项目中使用的是 element-ui 的组件库,在使用的时候需要引入 Element 包,具体引入方法请参考 Element 文档 快速上手

# 引入 FormMaking

# 完整引入

import FormMaking from '~/lib/form-making-advanced'
import '~/lib/form-making-advanced/dist/FormMaking.css'

Vue.use(FormMaking)

引入路径根据安装包在项目中实际路径引入

注:在项目中使用 import 引入时,需要将 babel 的sourceType参数设置为unambiguous,如下:

"babel": {
  "sourceType": "unambiguous"
}

# 引入部分组件

import {
  GenerateForm,
  MakingForm
} from '~/lib/form-making-advanced'
import '~/lib/form-making-advanced/dist/FormMaking.css'

Vue.component(GenerateForm.name, GenerateForm)
Vue.component(MakingForm.name, MakingForm)
/* 或写为
 * Vue.use(GenerateForm)
 * Vue.use(MakingForm)
 */

# 开始使用

至此,高级版本的表单设计器引入完成,各个组件的使用方法请参阅组件文档

# 国际化

FormMaking 组件使用 vue-i18n@5.x 进行多语言支持

# 语言配置

FormMaking 组件支持中文简体(zh-CN)和英文(en-US)两种语言,默认使用中文简体,若希望使用英文,则需要进行如下配置:

Vue.use(FormMaking, {lang: 'en-US'})

如果使用的是CDN方式引入,配置如下:

<script>
  Vue.config.lang = 'zh-CN'
  new Vue({
    el: '#app'
  })
</script>

# 在多语言项目中使用

# 兼容 vue-i18n@5.x

import Vue from 'vue'
import Element from 'element-ui'
import FormMaking from 'form-making'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)
Vue.locale('zh-CN', {...zhLocale, message: 'hello'})
Vue.locale('en-US', {...enLocale, message: '你好'})
Vue.config.lang = 'zh-CN'

Vue.use(Element)

Vue.use(FormMaking, {lang: 'zh-CN', locale: Vue.locale})

new Vue({
  render: h => h(App)
}).$mount('#app')

# 兼容 vue-i18n@6.x 以上版本

import Vue from 'vue'
import Element from 'element-ui'
import FormMaking from 'form-making'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

Vue.use(VueI18n)

const messages = {
  'en-US': {
    message: 'hello',
    ...enLocale
  },
  'zh-CN': {
    message: '你好',
    ...zhLocale
  }
}

// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: 'zh-CN', // set locale
  messages, // set locale messages
})

Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value)
})

Vue.use(FormMaking, {lang: 'zh-CN', i18n})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

# Browsers support

Modern browsers and Internet Explorer 10+.

IE / Edge Firefox Chrome Safari
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions

# 插件

# 富文本编辑器

如果需要使用富文本编辑器,需要单独引入 vue2-editor

import VueEditor from "vue2-editor"

Vue.use(VueEditor)

引入后不支持 IE10

# Ant Design Vue 支持

表单生成器支持 Ant Design Vue 组件渲染,在设计器中设计好表单后,可以在 Ant Design Vue 项目中方便使用,接下来看看使用方法:

# 安装引入 antd

根据 Ant Design Vue 文档来引入即可,更多引入方式请查看 快速上手

npm install ant-design-vue -S
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

# 引入 antd 表单生成器

import {
  GenerateAntdForm,
} from '~/lib/form-making-advanced'
import '~/lib/form-making-advanced/dist/FormMaking.css'

Vue.component(GenerateAntdForm.name, GenerateAntdForm)
/* 或写为
 * Vue.use(GenerateAntdForm)
 */

注:在项目中使用 import 引入时,需要将 babel 的sourceType参数设置为unambiguous,如下:

"babel": {
  "sourceType": "unambiguous"
}

# 使用 antd 表单

查看示例