vue自动化表单实例分析

vue自动化表单实例分析

背景

B端系统表单较多，且表单可能含有较多字段

字段较多的表单带来了大片HTML代码

在大片HTML中，混杂着参数绑定、事件处理等逻辑，不利于维护

技术栈 vue，Element(默认表单布局)适合中后台项目快速开发

目标

通过json配置快速生成表单的vue plugin。

设计目标

减少html 重复片段

表单字段组件可扩展

事件、联动通过eventbus 解耦

校验可扩展

表单布局可自定义

可视化配置

大概方案设计

使用

安装

npm install charlie-autoform charlie-autoform_component_lib

源码：https://charlielau.github.io/autoform/#/component/autoform

引入插件

import AutoForm from 'charlie-autoform';

import AutoForm_component_lib from 'charlie-autoform_component_lib';

Vue.use(AutoForm);

Vue.use(AutoForm_component_lib);

基本使用

demo.vue

立即创建

取消

成果

目前应用再多个系统

定性： 维护成本降低、关注点分离

定量：表单开发效率提升50%

源码：https://github.com/Charlhttp://ieLau/autoform

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。