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

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

功能特性

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

CDN方式引入

<!-- 引入样式 --><link rel="stylesheet" href=";><!-- 引入组件库 --><script src=";></script><!-- 需要在设计器中预览代码需要引入ace.js库 --><script src=";></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，就分享到这里。希望对大家有所帮助。如果喜欢，记得多支持下哈。