задний план
- В системе B-side много форм, и форма может содержать много полей.
- Формы с большим количеством полей содержат большие фрагменты HTML-кода.
- В большом фрагменте HTML логика, такая как привязка параметров и обработка событий, смешана, что не способствует обслуживанию.
- Стек технологий Vue, Element (макет формы по умолчанию) подходит для быстрой разработки средних и фоновых проектов
Цель
Плагин vue, который быстро генерирует формы с помощью конфигурации json.
Цели дизайна
- уменьшить повторяющиеся фрагменты html
- Компоненты поля формы являются расширяемыми
- События и связь разделены через шину событий
- Контрольная сумма расширяема
- Макет формы настраивается
- Визуальная конфигурация
Примерная схема оформления
использовать
Установить
npm install charlie-autoform charlie-autoform_component_lib
Используйте документацию:doc
! ! ! Пожалуйста, игнорируйте руководство разработчика над документацией.
Внедрить плагины
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%.
Обратная связь
Добро пожаловать в стук:github