집 >웹 프론트엔드 >JS 튜토리얼 >Vue 자동화된 양식 인스턴스 분석

Vue 자동화된 양식 인스턴스 분석

不言원래의: 2018-05-07 14:59:491848검색

이 글에서는 Vue 자동화된 양식의 작동 방법과 관련 코드 설명을 예제를 통해 공유합니다. 관심 있는 친구들은 따라하고 배울 수 있습니다.

Background

B면 시스템에는 많은 양식이 있으며 양식에는 더 많은 필드가 포함될 수 있습니다.
더 많은 필드가 있는 양식은 큰 HTML 코드 조각을 가져옵니다.
큰 HTML 조각에서는 매개변수 바인딩 및 이벤트 처리와 같은 논리가 사용됩니다. 혼합되어 있어 유지 관리에 도움이 되지 않습니다.
기술 스택 Vue, Element(기본 양식 레이아웃)는 중간 및 백엔드 프로젝트의 빠른 개발에 적합합니다.

Goal

json 구성을 통해 빠르게 양식을 생성하는 Vue 플러그인입니다.

디자인 목표

html 반복 조각 줄이기
양식 필드 구성 요소는 확장 가능합니다.
이벤트와 연결은 eventbus를 통해 분리됩니다.
검증 확장 가능
양식 레이아웃을 사용자 정의할 수 있습니다.
시각적 구성

구성표 디자인 정보

Using

Installation

npm install charlie-autoform charlie-autoform_component_lib

소스 코드: https://charlielau.github.io/autoform/#/comComponent/au toform

플러그인 소개

import AutoForm from &#39;charlie-autoform&#39;;
import AutoForm_component_lib from &#39;charlie-autoform_component_lib&#39;;

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: &#39;&#39;,
   type: []
  },
  layout2: {
   align: &#39;left&#39;,
   labelWidth: &#39;100px&#39;,
   custom: false, //是否自定义布局
   inline: true //是否内联
  },
  fields2: [
   {
   key: &#39;name&#39;,
   type: &#39;input&#39;,
   templateOptions: {
    label: &#39;审批人&#39;
   }
   },
   {
   key: &#39;region&#39;,
   type: &#39;select&#39;,
   templateOptions: {
    label: &#39;活动区域&#39;,
    placeholder: &#39;请选择活动区域&#39;,
    options: [
    {
     label: &#39;区域一&#39;,
     value: &#39;shanghai&#39;
    },
    {
     label: &#39;区域二&#39;,
     value: &#39;beijing&#39;
    }
    ],
    validators:[ //校验
    // {required:true,message:&#39;必填&#39;}
    // ""
    ]
   }
   }
  ]
  };
 }
 };
</script>

최종 효과

사용자 정의 구성 요소 또는 구성 요소 디렉터리 추가

르레에에

cHello.vue

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

Achievements

현재 여러 시스템에서 사용됨

질적: 유지 관리 비용 절감, 우려 사항 분리
양적: 양식 개발 효율성 50% 증가

Vue 자동화된 양식 인스턴스 분석

관련 기사