Vue에서 양식을 자동화하는 방법은 무엇입니까?

php中世界最好的语言
풀어 주다: 2018-05-23 14:01:47
원래의
2343명이 탐색했습니다.

이번에는 Vue 양식을 자동화하는 몇 가지 방법과 Vue 자동화 양식에 대한 주의 사항은 무엇인지 알아보겠습니다.

Background

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

목표

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

디자인 목표

  1. html 반복 조각 줄이기

  2. 양식 필드 구성 요소는 확장 가능합니다.

  3. 이벤트와 연결은 eventbus를 통해 분리됩니다.

  4. 검증 확장 가능

  5. 양식 레이아웃을 사용자 정의할 수 있습니다.

  6. 시각적 구성

구성표 설계 정보

를 사용하여

npm install charlie-autoform charlie-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>
로그인 후 복사

Achievements

현재 적용 중인 더 많은 시스템

Qualitative: 유지 관리 비용이 절감되고 우려 사항이 분리됩니다.

Quantitative: 양식 개발 효율성이 50% 증가합니다.

이 기사의 사례를 읽고 나면 방법을 마스터했다고 믿습니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참고하세요!

추천 도서:

JS에서 흔히 발생하는 BUG 및 오류 처리 방법

VueJs 상위-하위 컴포넌트 통신 방법 요약

위 내용은 Vue에서 양식을 자동화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿