vue自动化表单实例分析


Posted in Javascript onMay 06, 2018

背景

B端系统表单较多,且表单可能含有较多字段
字段较多的表单带来了大片HTML代码
在大片HTML中,混杂着参数绑定、事件处理等逻辑,不利于维护
技术栈 Vue,Element(默认表单布局)适合中后台项目快速开发

目标

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

设计目标

  1. 减少html 重复片段
  2. 表单字段组件可扩展
  3. 事件、联动通过eventbus 解耦
  4. 校验可扩展
  5. 表单布局可自定义
  6. 可视化配置

大概方案设计

vue自动化表单实例分析

使用

安装

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

<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自动化表单实例分析

添加自定义组件或者组件目录

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%

源码:https://github.com/CharlieLau/autoform

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
Oct 14 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 #Javascript
JS中this的指向以及call、apply的作用
May 06 #Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
May 06 #Javascript
Less 安装及基本用法
May 05 #Javascript
es6新特性之 class 基本用法解析
May 05 #Javascript
JS同步、异步、延迟加载的方法
May 05 #Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 #Javascript
You might like
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
IE、FF浏览器下修改标签透明度
2014/01/28 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
vue中activated的用法
2021/01/03 Vue.js
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
python实现简单银行管理系统
2019/10/25 Python
pandas实现导出数据的四种方式
2020/12/13 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
城管综合整治方案
2014/05/01 职场文书
生产车间标语
2014/06/11 职场文书
2014最新离职证明范本
2014/09/12 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
幼儿园六一主持词
2015/06/30 职场文书
2015双创工作总结
2015/07/24 职场文书
医护人员继续教育学习心得体会
2016/01/19 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
Java中的Kotlin 内部类原理
2022/06/16 Java/Android