首页 web前端 js教程 vue自动化表单有哪几种方式

vue自动化表单有哪几种方式

May 23, 2018 pm 02:01 PM
方式 自动化 表单

这次给大家带来vue自动化表单有哪几种方式,vue自动化表单的注意事项有哪些,下面就是实战案例,一起来看一下。

背景

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

目标

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

设计目标

  1. 减少html 重复片段

  2. 表单字段组件可扩展

  3. 事件、联动通过eventbus 解耦

  4. 校验可扩展

  5. 表单布局可自定义

  6. 可视化配置

大概方案设计

使用

安装

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>
 <p>
  <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>
 </p>
</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>
 <p>
  <p>
   <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>
  </p>
 </p>
</template>
<script>
 import {baseField} from "charlie-autoform";
 export default {
  mixins: [baseField],
  name: 'cHello',
  data () {
   return {};
  },
  methods: {},
  mounted(){
   //this.eventBus 事件总线
  }
 };
</script>
登录后复制

成果

目前应用再多个系统

定性: 维护成本降低、关注点分离
定量:表单开发效率提升50%

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

怎么处理JS内常见的BUG与错误

VueJs父子组件通讯方法汇总

以上是vue自动化表单有哪几种方式的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

理解SpringBoot和SpringMVC之间的差异及比较 理解SpringBoot和SpringMVC之间的差异及比较 Dec 29, 2023 am 09:20 AM

理解SpringBoot和SpringMVC之间的差异及比较

如何使用 JavaScript 实现表单的输入框内容实时校验功能? 如何使用 JavaScript 实现表单的输入框内容实时校验功能? Oct 18, 2023 am 08:47 AM

如何使用 JavaScript 实现表单的输入框内容实时校验功能?

PHP 持续集成中的 Jenkins:构建和部署自动化大师 PHP 持续集成中的 Jenkins:构建和部署自动化大师 Feb 19, 2024 pm 06:51 PM

PHP 持续集成中的 Jenkins:构建和部署自动化大师

如何使用 JavaScript 实现表单的输入框内容自动提示功能? 如何使用 JavaScript 实现表单的输入框内容自动提示功能? Oct 20, 2023 pm 04:01 PM

如何使用 JavaScript 实现表单的输入框内容自动提示功能?

利用Python脚本在Linux平台下实现任务调度与自动化 利用Python脚本在Linux平台下实现任务调度与自动化 Oct 05, 2023 am 10:51 AM

利用Python脚本在Linux平台下实现任务调度与自动化

如何使用HTML、CSS和jQuery实现表单自动保存的高级功能 如何使用HTML、CSS和jQuery实现表单自动保存的高级功能 Oct 28, 2023 am 08:20 AM

如何使用HTML、CSS和jQuery实现表单自动保存的高级功能

苹果快捷指令自动化怎么删掉 苹果快捷指令自动化怎么删掉 Feb 20, 2024 pm 10:36 PM

苹果快捷指令自动化怎么删掉

Python脚本操作实现快速自动化任务的技巧与方法 Python脚本操作实现快速自动化任务的技巧与方法 Oct 05, 2023 am 11:15 AM

Python脚本操作实现快速自动化任务的技巧与方法

See all articles