activiti表单设计器_超牛 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)

使用插件

SubmitLoad Option

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，就分享到这里。希望对大家有所帮助。如果喜欢，记得多支持下哈。