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

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

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

功能特性

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

CDN方式引入

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)

使用插件

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引入配置

富文本编辑器

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

import VueEditor from "vue2-editor"

Vue.use(VueEditor)

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

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