DDR爱好者之家 Design By 杰米
                                背景
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
<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%
源码:https://github.com/CharlieLau/autoform
DDR爱好者之家 Design By 杰米
                            
                                广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
                        免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
                        暂无评论...
                                    更新日志
2025年10月31日
                                2025年10月31日
                    - 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]
 
                     
                    

