基于架构的表单生成器-基于Vuetify的Vue.js 2.0组件

验证表单基础 (Vuetify-Form-Base)

Imagine you get the following data in JSON format and have to edit it now.

假设您以JSON格式获取以下数据，而现在必须对其进行编辑。

{
  prename: 'Will',
  name: 'Smith',
  retired: false
  adresses: [
    { 
      street:'Time Square',
      city: 'New York',
      country: 'US' 
    },
    { 
      street:'Champs Elysee',
      city: 'Paris',
      country: 'FR' 
    }
  ]
}

Normally you have to flatten the data structure and then map it to an appropriate form. Then you have to define the form in HTML and animate it with your data.

通常，您必须展平数据结构，然后将其映射到适当的形式。 然后，您必须用HTML定义表单并将其与数据关联起来。

With Formbase you create a JSON Object with the same structure which describes your form.

使用Formbase，您可以使用描述表单的相同结构创建一个JSON对象。

You have to create a lot of different Forms? You have to manipulate or edit Data presented in JS-Objects?

您必须创建很多不同的表单吗？ 您必须操纵或编辑JS对象中显示的数据吗？

Then give Vuetify-Form-Base a Try. This Schema-based Form Generator is a Vue.js 2.0 Component and can simplify your Job by automatically creating full editable Forms. Edit this Forms and get reactive Results.

然后尝试使用Vuetify-Form-Base 。 这个基于模式的表单生成器是Vue.js 2.0组件 ，可以通过自动创建完整的可编辑表单来简化您的工作。 编辑此表格并获得React结果。

Vuetify-Form-Base uses the well known Component Framework Vuetify to style and layout your Form. Vuetify Controls have a clear, minimalistic design, and support responsive Design.

Vuetify-Form-Base使用众所周知的Component Framework Vuetify设置样式和布局表单。 Vuetify控件具有清晰，简约的设计，并支持响应式设计。

---

---

演示版 (Demo)

Example on Github

Github上的示例

or

要么

Download Project, change current directory to ../vuetify-form-base/example and then run

下载项目，将当前目录更改为../vuetify-form-b​​ase/example ，然后运行

npm install

npm install

npm run serve

npm run serve

---

---

介绍 (Intro)

vuetify-form-base is a Vue Component and can easily integrated into any Vue Project.

vuetify-form-b​​ase是Vue组件 ，可以轻松集成到任何Vue项目中。

The Schema-Object has the same structure as the Value-Object. Create a Schema by cloning the Value-Object and replace the Values of the Data-Object by Definitions for your your Schema. The corresponding Schema-Object defines type, layout and functional behaviour of your Form.

模式对象具有与值对象相同的结构 。 通过克隆值对象来创建模式，并用定义的定义替换数据对象的值。 相应的Schema-Object定义了Form的类型，布局和功能行为。

The Component Framework Vuetify styles your Form. The Controls have a clear design, but don't worry you can change your style in a lot of ways. For more details see section Style with CSS

组件框架Vuetify为您的表单设置样式。 控件具有清晰的设计，但是请放心，您可以通过多种方式更改样式。 有关更多详细信息，请参见使用CSS样式一节。

Based on an existing Value-Object vuetify-form-base generates a full editable Form. Layout and Functionality are defined in a Schema-Object, which has the same Property structure as the Value-Object. Your Data-Object keeps full reactive and any Input or Change in your Form triggers an Event too. If you have a deep nested Value-Object or an Array -Structure you can direct work on it. There is no need to flatten or modify your Data-Presentation.

基于现有的值对象vuetify-form-b​​ase生成一个完全可编辑的Form。 布局和功能在模式对象中定义，该对象具有与值对象相同的属性结构。 您的数据对象保持完全React性，并且表单中的任何输入或更改也会触发事件。 如果您具有深层嵌套的Value-Object或Array -Structure，则可以直接对其进行操作。 无需展平或修改您的数据表示。

Changing any Field in the Form gives you a reactive Result in your Value-Object. Furthermore you can synchronize two or more Forms by using same Value-Object.

更改表单中的任何字段都会在您的值对象中为您提供React结果 。 此外，您可以使用相同的Value-Object 同步两个或多个Form。

If you want a Partial-Form which displays only parts of your Data.Object, then link a property of your Data-Object to your vuetify-form-base Component.

如果要使用仅显示Data.Object一部分的Partial-Form ，则将Data-Object的属性链接到基于vuetify-form-b​​ase的组件。

And if necessary you can also build a Form in Form by using Slots.

并且，如有必要，您还可以使用Slots 在Form中构建Form 。

Use the v-on directive of Vue.js to listen to Formbase triggered Events for 'Resize', 'Focus', 'Input', 'Click' and 'Swipe'. Listening to 'Update' will catch all Events.

使用Vue.js的v-on指令来侦听Formbase 触发的“调整大小”，“焦点”，“输入”，“单击”和“滑动”事件。 听“更新”将捕获所有事件。

Select from Vuetify UI Input & Controls like Textfield, Password, Email, Textarea, Checkbox, Radio, Switches, Sliders, Combobox, Autocomplete, Select, Combobox, Date- or Timepicker and some other fields.

从Vuetify UI输入和控件中进行选择，例如文本字段，密码