FormMaking

English

简体中文

English

简体中文

Appearance

Developer Guide ​

Installation Package ​

Install Via npm ​

The npm installation is recommended, which works better with the webpack ↗ wrapper.

bash
npm install form-making -S

CDN ​

The latest version of the resource is currently available at  unpkg.com/form-making ↗, and you can start using it by import js and css files on the page.

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

<!-- If you need to preview the code in the designer, you need to import the ace.js library-->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

It is recommended that users who use CDN to import FormMaking lock the version at the linked address to avoid being affected by incompatible updates in future FormMaking upgrades. See unpkg.com ↗ for ways to lock versions.

Hello World ​

Through the CDN, we can easily use FormMaking to load the form design page.

html
<!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">
    <!-- You need to set the height of the edit area -->
    <fm-making-form style="height: 500px;" preview generate-code generate-json>
    </fm-making-form>
  </div>
</body>
  <!-- import component libraries-->
  <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>
  <!-- If you need to preview the code in the designer, you need to import the ace.js library -->
  <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 import when it is used. Specific introduction of Element method please refer to the document [Quick Start ↗] (https://element.eleme.io/#/zh-CN/component/quickstart).

Import FormMaking ​

Complete Import ​

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

Vue.use(FormMaking)

The above code completes the import of FormMaking. Note that style files need to be imported separately.

Partial Import ​

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

Vue.component(GenerateForm.name, GenerateForm)
Vue.component(MakingForm.name, MakingForm)
/* or you can import as below
 * Vue.use(GenerateForm)
 * Vue.use(MakingForm)
 */

Import ace.js ​

ace.js is not imported by default. If you need to use ace.js, you need to import it yourself

html
<!-- If you need to preview the code in the designer requires the introduction of the ace.js library -->
<script src="https://unpkg.com/form-making/public/lib/ace/ace.js"></script>

Start to Use ​

Form Designer（MakingForm） ​

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

The height of the designer needs to be set when used, and the default height is rendered according to the parent element 100%。

For more the detail usage of the components, please refer to Component。

Internationalization ​

Components use vue-i18n@8.x for multilingual support

Configuration of Language ​

The component supports simplified Chinese (zh-CN) and English (en-US). The default is simplified Chinese. If you want to use English, you need to configure as follows:

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

If you are using CDN, the configuration is as follows:

html
<script>
  Vue.use(FormMaking, {
    lang: 'en-US'
  })
  new Vue({
    el: '#app'
  })
</script>

Used in Multilingual Projects ​

js
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, vue2-editor needs to be imported separately

js
import VueEditor from "vue2-editor"

Vue.use(VueEditor)

Copyright © 2019-present FormMaking