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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
详解webpack的clean-webpack-plugin插件报错
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
一个分页的论坛
2006/10/09 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
js更优雅的兼容
2010/08/12 Javascript
js实现目录定位正文示例
2013/11/14 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
python实现学生成绩测评系统
2020/06/22 Python
Python 如何创建一个线程池
2020/07/28 Python
python matplotlib库的基本使用
2020/09/23 Python
ASP.NET Core中的配置详解
2021/02/05 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
《灰椋鸟》教学反思
2014/04/27 职场文书
励志演讲稿300字
2014/08/21 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
2014年医德医风工作总结
2014/11/13 职场文书
Python实现Telnet自动连接检测密码的示例
2021/04/16 Python