超牛 Vue+ElementUI 可视化表单设计器组件FormMaking

今天给小伙伴们推荐一款强大的Vue可自由拖拽表单设计器组件。

vue-form-making 基于vue.js简单高效的表单设计器组件，star高达3.3K+。简单拖拽即可进行表单设计，可生成/导出json及代码，支持i18n国际化。

功能特性

• 可视化配置页面
• 基于vue2.0桌面端组件库Element-UI
• 提供栅格布局，并采用flex实现对齐
• 一键预览配置的效果
• 一键生成配置json数据
• 一键生成代码，立即可运行
• 提供自定义组件满足用户自定义需求
• 提供远端数据接口，方便用户需要异步获取数据加载
• 提供功能强大的高级组件
• 支持表单验证
• 快速获取表单数据
• 国际化支持

CDN方式引入

<!-- 引入样式 -->
<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>

<!-- 使用 -->
<div id="app">
  <!-- 需要设置编辑区域高度 -->
  <fm-making-form style="height: 500px;" preview generate-code generate-json>
  </fm-making-form>
</div>

NPM安装

$ npm i form-making -S

引入组件

// 在main.js中完整引入
import FormMaking from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.use(FormMaking)

// 在组件页面按需引入
import { GenerateForm, MakingForm } from 'form-making'
import 'form-making/dist/FormMaking.css'

Vue.component(GenerateForm)
Vue.component(MakingForm)

使用插件

<template>
  <div>
    <fm-generate-form 
      :data="jsonData"
      :remote-option="dynamicData"
      ref="generateForm"
      preview
      generate-code
      generate-json
      :basic-fields="['input', 'textarea', 'radio', 'checkbox', 'switch']"
      :advance-fields="['imgupload', 'editor', 'table']"
    >
    </fm-generate-form>
    <el-button type="primary" @click="handleSubmit">Submit</el-button>
    <el-button @click="handleLoadOption">Load Option</el-button>
  </div>
</template>
export default {
  data () {
    return {
      jsonData: {"list":[{"type":"radio","icon":"icon-radio-active","options":{"inline":false,"defaultValue":"","showLabel":false,"options":[{"value":"Option 1","label":"Option 1"},{"value":"Option 2","label":"Option 2"},{"value":"Option 3","label":"Option 3"}],"required":false,"width":"","remote":true,"remoteType":"option","remoteOption":"option","remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_1575969479252","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"disabled":false},"name":"单选框组","key":"1575969479252","model":"option","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":""}},
      dynamicData: {
        option : [], // 单选框组 option data
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.generateForm.getData().then(data => {
        alert(JSON.stringify(data))
      }).catch(e => {
      })
    },

    handleLoadOption () {
      // 模拟数据请求
      setTimeout(() => {
        this.dynamicData.option = [
          {value: '1111', label: '1111'},
          {value: '2222', label: '2222'},
          {value: '3333', label: '3333'}
        ]
      }, 500)
    }
  }
}

语言配置

FormMaking 组件支持中文简体(zh-CN)和英文(en-US)两种语言，默认使用中文简体。

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

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

富文本编辑器

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

import VueEditor from "vue2-editor"

Vue.use(VueEditor)

提供各种演示文档及丰富的示例

ok，就分享到这里。希望对大家有所帮助。如果喜欢，记得多支持下哈。