Home > Web Front-end > JS Tutorial > body text

What are the ways to automate forms in Vue?

php中世界最好的语言
Release: 2018-05-23 14:01:47
Original
2320 people have browsed it

This time I will bring you what are the ways to automate vue forms, what are the precautions for vue automated forms, the following is a practical case, let's take a look.

Background

The B-side system has many forms, and the form may contain many fields
The form with many fields brings a large amount of HTML code
In a large piece of HTML, there are mixed parameter binding, event processing and other logic, which is not conducive to the maintenance of
technology stack Vue, Element (default form layout) is suitable for the middle and backend Rapid project development

Goal

Vue plugin that quickly generates forms through json configuration.

Design goal

  1. Reduce html repeated fragments

  2. The form field component is extensible

  3. Events and linkages are decoupled through eventbus

  4. Verification can be extended

  5. Form layout can be customized

  6. Visual configuration

About scheme design

##Use

Installation

npm install charlie-autoform charlie-autoform_component_lib
Copy after login
Source code:

https://charlielau.github.io/autoform/#/component/autoform

Introducing the plug-in

import AutoForm from 'charlie-autoform';
import AutoForm_component_lib from 'charlie-autoform_component_lib';
Vue.use(AutoForm);
Vue.use(AutoForm_component_lib);
Copy after login

Basic use

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>
Copy after login
Final effect

Add self-

Definition componentor Component directory

Vue.$autoform.RegisterDir(()=>require.context('./components/autoform', 'c'));//目录
Vue.$autoform.Register(Vue,[Components...],{prefix: "c"}) //组件对象
Copy after login

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>
Copy after login

Achievements

Currently used in multiple systems

Qualitative: Reduced maintenance costs, separation of concerns

Quantitative: Form development efficiency increased by 50%

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

Recommended reading:

How to deal with common BUGs and errors in JS

VueJs parent-child component communication method summary

The above is the detailed content of What are the ways to automate forms in Vue?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!