基于vue自动化表单实践
背景
- B端系统表单较多,且表单可能含有较多字段
- 字段较多的表单带来了大片HTML代码
- 在大片HTML中,混杂着参数绑定、事件处理等逻辑,不利于维护
- 技术栈 Vue,Element(默认表单布局)适合中后台项目快速开发
目标
通过json配置快速生成表单的vue plugin。
设计目标
- 减少html 重复片段
- 表单字段组件可扩展
- 事件、联动通过eventbus 解耦
- 校验可扩展
- 表单布局可自定义
- 可视化配置
大概方案设计
使用
安装
npm install charlie-autoform charlie-autoform_component_lib
复制代码
使用文档: doc
!!!请忽略文档上方的开发指南
引入插件
import AutoForm from 'charlie-autoform';
import AutoForm_component_lib from 'charlie-autoform_component_lib';Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);
复制代码
基本使用
demo.vue
<template><div><auto-form ref="tagForm1" :model="model1" :fields="fields1" :layout="layout"><el-form-item class="clearfix"><el-button type="primary">立即创建</el-button><el-button>取消</el-button></el-form-item></auto-form></div>
</template>
<script>export default {data() {return {model2: {name: '',type: []},layout2: {align: 'left',labelWidth: '100px',custom: false, //是否自定义布局inline: true //是否内联},fields2: [{key: 'name',type: 'input',templateOptions: {label: '审批人'}},{key: 'region',type: 'select',templateOptions: {label: '活动区域',placeholder: '请选择活动区域',options: [{label: '区域一',value: 'shanghai'},{label: '区域二',value: 'beijing'}],validators:[ //校验// {required:true,message:'必填'}// ""]}}]};}};
</script>复制代码
最终效果
添加自定义组件或者组件目录
Vue.$autoform.RegisterDir(()=>require.context('./components/autoform', 'c'));//目录
Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //组件对象
复制代码
cHello.vue
// PATH:/components/autoform/cHello.vue
<template><div><div><p>基本的变量可以通过"mixins"获取,这里有开发组件需要的一些变量</p><p>自定义子组件:Hello</p><p>当前field: {{field}}</p><p>整个model: {{model}}</p><p>当前model: {{model[field.name]}}</p><p>layout: {{layout}}</p><p>字段相关配置to: {{to}}</p></div></div>
</template><script>import {baseField} from "charlie-autoform";export default {mixins: [baseField],name: 'cHello',data () {return {};},methods: {},mounted(){//this.eventBus 事件总线}};
</script>
复制代码
成果
目前应用再多个系统
- 定性: 维护成本降低、关注点分离
- 定量:表单开发效率提升50%
反馈
欢迎大家来敲: github
基于vue自动化表单实践相关推荐
- 关于Vue的表单验证
前言 最近在研究 Vue 如何实现表单的验证,在网上查阅资料以后,简单将这些方法整合一下,方便以后学习.如果有不准确之处,还望指正. Vue 实现表单验证的方法有如下几种: 一.基于 Vue 与 jQ ...
- 基于jQuery的表单验证插件:jValidate
网上基于jQuery的表单验证插件已有很多,但是这个轮子我还是继续做一个,因为这个表单验证插件是从我以前的个人JS框架移值过来的(我已慢慢投入jQuery的怀抱),并且它的验证规则书写方式也许会让你眼 ...
- 真正简单的基于prototype的表单验证
由 searchadmin 于 周二, 10/16/2007 - 06:44 提交. 真正简单的基于prototype的表单验证 tag:prototype 数据验证 表单验证 validator j ...
- [vue] 说说你对vue的表单修饰符.lazy的理解
[vue] 说说你对vue的表单修饰符.lazy的理解 input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input ...
- 使用基于列表的表单控件
使用基于列表的表单控件 我们可以在我们的Adobe Flex程序中使用基于表单控件,例如ComboBox,List,HorizontalList.在我们插入这种控件以后,我们必须为其提供要显示的项 目 ...
- 魅族容器云平台基于Kubernetes自动化运维实践
作者简介: 曾彬 阿里巴巴 高级技术专家 互联网老兵,十多年的基础架构经验,曾在支付宝.爱立信.魅族等担任系统架构师,从事过 Linux 内核开发,Java 中间件.SOA 应用框架的设计实现.云平台 ...
- 基于css的表单模板
代码 /* General styles */ body { margin : 0 ; padding : 0 ; font : 80%/1.5 Arial,Helvetica,sa ...
- vue监控表单输入事件,正则验证手机号,邮箱
vue监控表单输入事件,正则验证手机号,邮箱 <div class="input-name"><inputclass="input-type" ...
- 【VUE 表单验证】vue Element 表单验证中 多层v-for验证方法
vue Element 表单验证中 对象有list列表如何验证 正常情况下只需要<el-form-item> 标签中填入prop数据属性即可. <el-form-item label ...
最新文章
- 如何卸载office201032位_微软官方安装卸载修复工具、恶意软件删除工具,了解下!...
- shell 脚本中如何实现自加操作
- php pdo blob,PHP / PDO / MySQL:插入MEDIUMBLOB存储坏数据
- UML学习总结(3)——StarUML指导手册
- 2018-1-20:左移和右移运算以及和(无符号右移)的区别以及位运算的小题目...
- 【网址收藏】WIN10进入超级管理员账号(Administrator)
- weblogic修改控制台ip_「Weblogic学习」Weblogic知识要点之JNDI/JTA编程开发
- 函数沿某一方向的变化率_多元函数知识点(1)
- .国内外主流前端开发框架对比
- FusionChart样例
- 多个Excel文件合并成一个文件
- WEB前端性能优化及应用服务器性能优化和存储性能优化
- php5.2 zend解密,狐灵科技分享几款zend解密工具,可以解密zend5.2
- 幻境网盾3.40 (skiller)
- 中国工程院院士倪光南:大数据产业安全和发展需同步
- xp系统计算机无线开关在哪,xp怎么设置无线网络?xp系统设置无线网络的方法
- 苹果手机怎么设置时间24小时制_手机资讯:无法激活 iMessage 等问题及解决办法汇总...
- 【将金令】1.22早评:金银扶摇而上,谨防空头突袭
- 实践数据湖iceberg 第九课 合并小文件
- 基石为勤能补拙的迷宫之旅——第十二天(Python函数装饰器)
热门文章
- centos7不识别固态硬盘_固态硬盘分区与不分区哪个好【详细介绍】
- mysql 插入当前时间_MySql优化之前期探索
- python 高阶函数之 reduce
- [Swift]LeetCode382. 链表随机节点 | Linked List Random Node
- 如何在Windows Server 2008 R2下搭建FTP服务
- 筛法求10000以内的质数
- sessionId与cookie 的关系(百度文库)
- LINUX 内核代码备忘录
- Window捕获消息机制及动态创建button-MFC
- WinForm 布局控件“WeifenLuo.WinFormsUI.Docking“的使用