Выпущена версия динамической формы form-create 2.5, которая поможет вам легко получить форму

Form-create — это компонент генерации форм, который может генерировать функции динамического рендеринга, сбора данных, проверки и отправки через JSON. Он поддерживает три фреймворка пользовательского интерфейса и поддерживает создание любого компонента Vue. Встроено 20 видов общих компонентов формы и пользовательских компонентов, а затем можно легко создавать сложные формы.

Документ | Гитхаб

Поддержка пользовательского интерфейса

  • элемент интерфейса
  • iview/view-дизайн
  • муравей-дизайн-вью

Новые возможности

Версия 2.5 в основном обновляет следующие функции:

  • Рефакторинг внутреннего кода ядра
  • Оптимизация внутреннего механизма рендеринга
  • Оптимизация внутренних событий жизненного цикла
  • Рефакторинг машинописного текста
  • Добавьте метод `nextTick` для установки обратного вызова после рендеринга.
  • Новая поддержка компонента загрузки страниц для ускорения рендеринга первого экрана.
  • Добавить настраиваемый элемент конфигурации `эффект`
  • Добавить поддержку изменения `типа`
  • Добавьте `control` для поддержки места вставки правил конфигурации.
  • «Управление» оптимизацией вступит в силу, если оно соответствует условиям. Предыдущая версия может вступить в силу только в том случае, если она является первой.
  • Добавить поддержку для настройки префиксов и суффиксов для компонентов
  • Добавить конфигурацию `update`, запускаемую после того, как `value` отправляет изменения
  • Добавить поддержку элемента конфигурации `wrap`, настроить `FormItem`
  • Добавить компонент `object`
  • Добавлена ​​поддержка пользовательских компонентов title, info.
  • Добавить компонент форматированного текста `wangEditor`
  • Добавить встроенную поддержку событий для поддержки событий
  • Поддержка `value.sync` для получения двусторонней привязки `formData`
  • Оптимизация кнопки отправки формы по умолчанию

Установить

Установите соответствующую версию в соответствии с используемым вами пользовательским интерфейсом.

версия элемента пользовательского интерфейса

npm i @form-create/element-ui

[email protected]|версия 3.x

npm i @form-create/iview

версия iview/[email protected]

npm i @form-create/iview4

версия [email protected]+

npm i @form-create/ant-design-vue

Быстрый старт

В этой статье в качестве примера используется `element-ui`.

  1. Напишите в main.js следующее:
import Vue from 'vue'
import ELEMENT from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import formCreate from '@form-create/element-ui'

Vue.use(ELEMENT)
Vue.use(formCreate)

2. Создать форму

"пример"

<template>
  <div id="app1">
      <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>
  </div>
</template>
<script>
export default {
    data() {
        return {
            fApi: {},
            value: {},
            rule: [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: 'goods_name'
                },
                {
                    type: 'datePicker',
                    field: 'created_at',
                    title: 'created_at'
                }
            ],
            option: {
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}

</script>

Функции

1. Пользовательский компонент

Form-create поддерживает создание любых компонентов vue внутри формы.

"пример"

Например, чтобы сгенерировать компонент `el-button`:

{
   //type can be the name of a built-in component, or the name of a vue component or an html tag
   type: 'el-button',
       //...
   children: ['content']
}

Примечание! Сгенерированные компоненты должны быть смонтированы глобально или через form-create

Монтировать через Vue

Vue.component(component.name, component);

Монтировать через form-create

formCreate.component(component.name, component);

2. Пользовательский макет

Расположение компонентов может быть достигнуто путем установки элементов конфигурации `col` или компонентов сетки.

"пример"

Установите макет компонента через элемент конфигурации `col`, установите строку для отображения двух компонентов.

[
   {
        type:'input',
        field:'input1',
        title:'input1',
        col:{span:12}
   },{
        type:'input',
        field:'input2',
        title:'input2',
        col:{span:12}
   },
]

Отображение трех компонентов в одной строке с помощью настроек компонента сетки

{
   type:'el-row',
       children: [
       {
           type:'el-col',
           props:{
               span:8
           },
           children: [{type:'input',field:'input1',title:'input1'}]
        },
       {
           type:'el-col',
           props:{
               span:8
           },
           children: [{type:'input',field:'input1',title:'input1'}]
        },
       {
           type:'el-col',
           props:{
               span:8
           },
           children: [{type:'input',field:'input1',title:'input1'}]
        }
    ]
}

3. Суффиксы компонентов

Настройте префикс компонента, создав атрибут префикса правила и атрибут суффикса для настройки суффикса компонента.

"пример"

{
    type:'input',
    field:'text',
    title:'text',
    prefix:'prefix',
    suffix:'suffix',
}

Установите префикс и суффикс в качестве пользовательского компонента

{
    type:'input',
    field:'text',
    title:'text',
    value:'default',
    prefix:{
        type:'ElButton', children:['prefix']
    },
    suffix:{
        type:'ElButton', children:['suffix']
    },
}

Введение в API

Обычно используются следующие методы

Полное введение в API

Установить значение формы

Метод переопределения, неопределенные поля будут установлены в `null`

```typescript
type coverValue = (formData:{[field:string]:any}) => void
```

//Using：
```js
fApi.coverValue({goods_name:'HuaWei'})
```

//Merging method, undefined fields are not modified

```typescript
interface setValue {
    (formData:{[field:string]:any}): void
    (field:string, value:any): void
}
```

//Using：
```js
fApi.setValue({goods_name:'HuaWei'})
```
//Alias ​​method`changeValue`, `changeField`

Скрытые поля

```typescript
interface hidden {
    //Hide all components
    (status:Boolean):void
    //Hide specified components
    (status:Boolean, field:string):void
    //Hide some components
    (status:Boolean, field:string[]):void 
}
```

//Using：
```js
fApi.hidden(true, 'goods_name')
```

Получить скрытое состояние компонента

```typescript
type hiddenStatus = (field:string)=>Boolean
```

//Using：
```js
const status = fApi.hiddenStatus('goods_name')
```

Вставить правило

Предварительная установка

```typescript
interface prepend {
    //Insert to the first
    (rule:FormRule):void 
    //Insert before the specified field
    (rule:FormRule, field:string):void
    //Insert into the specified field children
    (rule:FormRule, field:string, child:true):void
}
```

//Using：
```js
fApi.prepend({
     type:"input",
     title:"info",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "placeholder",
     },
     validate:[
         { required: true, message: 'required', trigger: 'blur' },
     ],
}, 'goods-name')
```

Добавление постскриптума

```typescript
interface append {
    //Insert to the last
    (rule:FormRule):void 
    //Insert after the specified field
    (rule:FormRule, field:string):void
    //Insert into the specified field children
    (rule:FormRule, field:string, child:true):void
}
```

//Using：
```js
fApi.append({
     type:"input",
     title:"info",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "placeholder",
     },
     validate:[
         { required: true, message: 'required', trigger: 'blur' },
     ],
}, 'goods-name')
```

Проверить форму

```typescript
type validate = (callback:(...args:any[]) => void)=> void
```

//Using：
```js
fApi.validate((valid, fail) => {
    if(valid){
        //todo success
    }else{
        //todo fail
    }
})
```

Получить данные формы

```typescript
interface formData {
    //Get all the data
    (): {[field:string]:any }
    //Get the data of some fields
    (field:string[]): {[field:string]:any }
}
```

//Using：
```js
const formData = fApi.formData()
```

Отправить форму

```typescript
type submit = (success: (formData: FormData, $f: fApi) => void, fail: ($f: fApi) => void)=> void
```

//Using：
```js
fApi.submit((formData, fapi) => {
    //todo Submit Form 
},()=>{
    //todo Form validation failed
})
```