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 相关文章推荐
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
element ui 表格动态列显示空白bug 修复方法
Sep 04 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
js瀑布流布局的实现
Jun 28 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
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
php删除文本文件中重复行的方法
2015/04/28 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
Python数据类型中的“冒号“[::]——分片与步长操作示例
2018/01/24 Python
Python断言assert的用法代码解析
2018/02/03 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python输入多行字符串的方法总结
2019/07/02 Python
Django 路由层URLconf的实现
2019/12/30 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
世界上最大的二手相机店:KEN
2017/05/17 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
中间件分为哪几类
2012/03/14 面试题
机关财务管理制度
2014/01/17 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
财务部岗位职责范本
2015/04/14 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
浅析Python OpenCV三种滤镜效果
2022/04/11 Python