Development

Installation

npm

It is recommended to use npm for installation, which Works better with webpack packaging tools.

npm install form-making -S

CDN

Currently, you can get the latest resource from unpkg.com/form-making, just need reference the Js and Css file as below:

<!--  import style -->
<link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
<!--  import Javascript  -->
<script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>

<!-- import ace.js for preview function in form generator  -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

It it recommended to lock version if you get the FormMaking via CDN, to prevent you current FormMaking from being affected by incompatible updates.How to lock version please refer to unpkg.com.

Hello world

With the CDN approach we can easily use FormMaking to load form design pages.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import style -->
  <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">
    <!-- Set the height of the design area -->
    <fm-making-form style="height: 500px;" preview generate-code generate-json>
    </fm-making-form>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
  <!-- import ace.js for preview function in form generator -->
  <script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>
  
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</html>

Quick start

Import Element

The component library of element-ui is used in the project, and the 'Element' package needs to be imported when using it. Please refer to the element document for the specific introduction method Quick Start

Import FormMaking

Fully import

import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.use(FormMaking)

Note:the style file needs to be imported separately.

Partly Import

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

Vue.component(GenerateForm.name, GenerateForm)
Vue.component(MakingForm.name, MakingForm)
/* or
 * Vue.use(GenerateForm)
 * Vue.use(MakingForm)
 */

Import ace.js

By default, ace.js is not imported. You need import it by yourself.

<!-- ace.js is used for preview function -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

Start to Use

MakingForm

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

You need set the height of the form generator,he default height is 100% based on the parent element.

For detailed usage of components, please refer to Components

Internationalization

Use vue-i18n@5.x for multi-language support.

Language configuration

Supports Simplified Chinese (zh-CN) and English (en-US),the default language is Simplified Chinese (zh-CN)，if you want to use English (en-US), configure the parameter as below:

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

If CDN is used for introduction, the configuration is as follows：

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

Used in multilingual projects

compatibility with `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')

compatibility with `vue-i18n@6.x` version or higher

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')

Plug-in

Rich text editor

If you need to use a rich text editor, you need to import vue2-editor

import VueEditor from "vue2-editor"

Vue.use(VueEditor)

JianZhen / vue-form-making

Development

Installation

npm

CDN

Hello world

Quick start

Import Element

Import FormMaking

Fully import

Partly Import

Import ace.js

Start to Use

MakingForm

Internationalization

Language configuration

Used in multilingual projects

compatibility with `vue-i18n@5.x`

compatibility with `vue-i18n@6.x` version or higher

Plug-in

Rich text editor

简介

发行版

贡献者

近期动态

JianZhen / vue-form-making .gitee-modal { width: 500px !important; }

Development

Installation

npm

CDN

Hello world

Quick start

Import Element

Import FormMaking

Fully import

Partly Import

Import ace.js

Start to Use

MakingForm

Internationalization

Language configuration

Used in multilingual projects

compatibility with vue-i18n@5.x

compatibility with vue-i18n@6.x version or higher

Plug-in

Rich text editor

简介

发行版

贡献者

近期动态

搜索帮助

JianZhen / vue-form-making

compatibility with `vue-i18n@5.x`

compatibility with `vue-i18n@6.x` version or higher