基于架构的表单生成器-基于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输入和控件中进行选择，例如文本字段，密码，电子邮件，文本区域，复选框，单选，开关，滑块，组合框，自动完成，选择，组合框，日期或时间选择器以及其他一些字段。

More Informations to Vuetify Textfields find here.

有关Vuetify文本字段的更多信息，请参见此处 。

---

---

安装 (Installation)

For proper working you need a Vue.js Project with Vuetify installed. For more Details see Vuetify Quickstart.

为了正常工作，您需要安装Vuetify的Vue.js项目。 有关更多详细信息，请参见Vuetify快速入门 。

npm install vuetify-form-base --save

vuetify-form-base is a Vue.js single-file component with a .vue extension and you can use it like any Vue-Component.

vuetify-form-b​​ase是带有.vue扩展名的Vue.js单文件组件 ，您可以像使用任何Vue-Component一样使用它。

In order for your application to work properly, you must wrap it in a v-app component. This component is required and can exist anywhere inside the body, but must be the parent of ALL Vuetify components. v-content needs to be a direct descendant of v-app.

为了使您的应用程序正常运行，必须将其包装在v-app组件中。 该组件是必需的，可以存在于体内的任何位置，但必须是ALL Vuetify组件的父代。 v-content必须是v-app的直接后代。

import VFormBase from 'vuetify-form-base';  

export default {	
  components:{ VFormBase },
  data () {
    return {
      myValue: {
        name: 'Jumo',
        password: '123456',
        email: '[email protected]',
        checkbox: true,
        select: 'Jobs',
      },   
      mySchema: {
        name: { type: 'text', label: 'Name' },
        password: { type: 'password', label: 'Password' },
        email: { type: 'email', label: 'Email' },
        checkbox: { type: 'checkbox', label: 'Checkbox' },
        select: { type: 'select', label: 'Select', items: ['Tesla', 'Jobs', 'Taleb'] }
      }
    }
  }
}

and you will get a full editable Form based on your schema and filled with your Value-Object.

然后您将根据您的模式获得一个完全可编辑的表格，并填充您的值对象。

INFORMATION:

信息：

Properties in 'myValue' without corresponding Prop in 'mySchema', are ignored and keep untouched, but a initial warning will be logged to console

“ myValue”中的属性(在“ mySchema”中没有相应的Prop)将被忽略并且保持不变，但是会向控制台记录初始警告

---

---

嵌套对象示例 (Example with nested Object)

In Reality sometimes you will have deep nested objects or arrays, which should be edited. vuetify-form-base works for you and flatten internally this nested object and build a plain Form.

在现实中，有时会有深层嵌套的对象或数组，应对其进行编辑。 vuetify-form-b​​ase为您工作，并在内部展平此嵌套对象并构建一个普通Form。

myValue: {
    name: 'Base',
    controls:{
      selection:{
        select: 'Tesla',
        selectM: ['Jobs'],
      },
      switch: [ true,false ],
      checkbox: [ false, true, { 
        checkboxArray: [ true, false ]}
      ]
    }       
  },

  mySchema: {
    name: { type: 'text', label: 'Name'},
    controls:{
      selection:{
        select: { type: 'select', label: 'Select', items: ['Tesla', 'Jobs', 'Taleb'] },        
        selectM: { type: 'select', label: 'M-Select', multiple:true, items: ['Tesla', 'Jobs', 'Taleb']}
      },
      switch: [ 
        { type: 'switch', label: '1' }, 
        { type: 'switch', label: '2' } 
      ],
      checkbox: [
        { type: 'checkbox', label: 'A' },
        { type: 'checkbox', label: 'B' }, 
        { checkboxArray: [
          { type: 'checkbox', label: 'C-A', color:'red' },
          { type: 'checkbox', label: 'C-B', color:'red' }
        ]}  
      ],
    }
  }

---

---

计算架构 (Computed Schema)

IF you want Schema Properties to be changed dynamic, then you must make your Schema Object a computed property. This Example turns the Radio Layout from Column to Row on Resizing to medium Size or greater.

如果要动态更改架构属性，则必须使架构对象成为计算属性。 本示例在调整为中等大小或更大时将无线电布局从列变为行。

data () {
  return {

    myValue: {
      radio: 'A',
    }

  }   
},
computed: {          

  mySchema(){ 
    return {
      radio: { type: 'radio', row: this.row, options:['A','B'] }
    }
  },

  row () {
    return this.$vuetify.breakpoint.mdAndUp 
  }
},

Vuetify布局和网格 (Vuetify Layout and Grid)

Integrate Vuetify Grid by using the Schema-Properties 'flex', 'offset' and 'order':

通过使用架构属性'flex'，'offset'和'order'集成Vuetify Grid：

mySchema: {
  name: { type: 'text', flex: 4, offset: 2, order: 1 },
}

flex: 4     // shorthand for flex: { xs:4 }
offset: 2   // shorthand for offset: { xs:2 }
order: 1    // shorthand for order: { xs:1 }

A more responsive Solution with 'flex', 'offset' or 'order' needs an Object as Value. For more Details see Vuetify Documentation:

具有“ flex”，“ offset”或“ order”的响应更快的解决方案需要将对象作为值。 有关更多详细信息，请参见Vuetify文档：

Vuetify - Grid: flex: { xs:12, sm:8, md:6, lg:4 }

Vuetify-网格： flex：{xs：12，sm：8，md：6，lg：4}

Vuetify - Offset: offset: { xs:0, sm:1, md:2, lg:2 }

Vuetify-偏移量： 偏移量：{xs：0，sm：1，md：2，lg：2}

Vuetify - Order: order: { xs:1, sm:1, md:2, lg:2 }

Vuetify-订单：订单：{xs：1，sm：1，md：2，lg：2}

链接和同步 (Link & Synchronize)

Forms can be linked together using the same Value-Object. Changes in one Form are synchronized and reflected in the other Form.

可以使用相同的值对象将表单链接在一起。 一个表单中的更改被同步并反映在另一表单中。

Vuetify控件API道具 (Vuetify Controls API-Props)

Vuetify Controls have a API with Props These Props in Vuetify-Controls comes in kebab-case amd must for use in Schema-Object converted to CamelCase

Vuetify控件具有带有道具的API Vuetify-Controls中的这些道具来自kebab -case amd，必须在转换为CamelCase的 Schema-Object中使用

Input & Controls
  Text-fields
    API-Props   
      append-icon
      background-color 


mySchema: { 
  name: { type:'text', appendIcon:'menu', backgroundColor': 'red' },
  ...
}

架构图 (Schema)

Schema is an JS-Object, which defines and controls the behavior of your Form. Each Key Prop) in your Schema-Object must reflect a Key from your Data-Object. A minimalistic Definition of a text input could look like this:

模式是一个JS对象，它定义并控制表单的行为。 模式对象中的每个键属性都必须反映数据对象中的键。 文本输入的简约定义如下所示：

schema:{
  name: { type:'text'}  
}

The next shows a more complex Schema:

下一个显示了一个更复杂的模式：

// Partials Functions for Rules
const minLen = l => v => (v && v.length >= l) || `min. ${l} Characters`
const maxLen = l => v => (v && v.length <= l) || `max. ${l} Characters`
const required = msg => v => !!v || msg
const validEmail: msg => v => /[email protected]+\..+/.test(v) || msg

// Destruct Value and return a Value! 
const toUpper = ( {value} ) => value && value.toUpperCase() 

export default {

  components: { VFormBase },
  data () {
    return {
      
      myValue: {
        name: 'Base',
        password: '123456',
        email: '[email protected]'
      },
              
      mySchema: {
        name: { 
          type: 'text', 
          label: 'Name', 
          hint:'Converts to UpperCase'
          toCtrl: toUpper, 
          fromCtrl:toUpper,
          rules: [ required('Name is required<>) ] 
          flex: 12, 
        },
        password: { 
          type: 'password', 
          label: 'Password', 
          hint:'Between 6-12 Chars', 
          appendIcon: 'visibility', 
          counter: 12, 
          rules: [ minLen(6), maxLen(12) ], 
          clearable: true, 
          flex: 12 
        },
        email: { 
          type: 'email', 
          label: 'Email', 
          rules: [ validEmail('No valid Email'), required('Email is required<>) ], 
          flex: 12 
        }
      }
    }
  }
}

Available Properties in Schema

架构中的可用属性

For further Props see Vuetify Controls API

有关更多道具，请参见Vuetify Controls API

schema:{
  
  type: string            // text, password, email, radio, switch, slider,
                          // combobox, autocomplete, select, combobox, date, time,  ...    

  sort: N                 // use simple order to display items 
  order: N or Object      // use Vuetify-Grid to order items responsive 

  flex: N or Object       // See Vuetify Grid
  offset: N or Object     // See Vuetify Grid

  label string,           // label of item    
  placeholder: string,    // placeholder 
  hint: string,           // additional Info  

  color: string
  backgroundColor:string
  css: string,            // inject classnames - schema:{ name:{ css:'small'}, ...  }
    
  mask: string,           // regex to control input  

  multiple: bool,         // used by type: select, combobox, autocomplete    
  required: bool,         // need an input value
  hidden: bool,           // hide item - set from another item
  disabled: bool,         
  readonly: bool,          
        
  appendIcon: icon        // click triggers event with icon-location
  prependIcon: icon       // click triggers event with icon-location

  items: array            // ['A','B'] used by type: select, combobox, autocomplete   
  options: array,         // ['A','B'] used by type:radio
  rules: array of Fn      // [ value => true || false, ... ]
  
  // must return a (modified) value!!
  toCtrl: function,       // ( {value, obj, data, schema} ) => value	
  fromCtrl: function,     // ( {value, obj, data, schema} ) => value
}

大事记 (Events)

We can use the v-on directive to listen to vuetify-form-base events 'focus', 'input', 'click', 'resize', 'swipe', 'update' and run some Code when they’re triggered.

我们可以使用v-on指令来侦听基于vuetify-form-b​​ase的事件“焦点”，“输入”，“单击”，“调整大小”，“滑动”，“更新”，并在触发它们时运行一些代码。

This Example use the Default ID and listen all events with 'update':

本示例使用默认ID，并使用'update'监听所有事件：

This has a Custom ID and listen all events in separate methods. Your v-on Directive must append the Custom ID:

它具有一个自定义ID，并以单独的方法监听所有事件。 您的v-on指令必须附加自定义ID：

The Event-Signature:

事件签名：

{ on, id, key, value, obj, event, params, size, data, schema }

on - Trigger Name   // focus | input | click | resize | swipe or update to listen all 
id - Formbase-ID
key - key of triggering Element
value - value of triggering Element
obj - triggering Element { key, value, schema } 
params - params object if available { x, y, pos, icon }    
event - the native trigger-event if available 
data - Data-Object
schema - Schema-Object

---

---

Use 'Update' Event to control Visibility of Password Element

使用“更新”事件来控制密码元素的可见性

update ({ on, id, key, value, obj, event, params, size, data, schema }) {
  
  console.log('[ on, key, value, params]', on, key, value,  params )

  // is 'click' and comes from appendIcon on key 'password'
  if (on == 'click' && key == 'password' && (params && params.pos) == 'append') { 
    
    // toggle icon
    obj.schema.appendIcon = obj.schema.type === 'password' 
      ? 'lock' 
      : 'visibility'

    // toggle visibility 
    obj.schema.type = obj.schema.type === 'password' 
      ? 'text' 
      : 'password'
  }
}

---

---

插槽 (Slots)

Use Slots to pass Header and Footer into a Control. If necessary replace Controls by Slots. Any slot could be a v-form-base component itself.

使用插槽将页眉和页脚传递到控件中。 如有必要，请按插槽更换控件。 任何插槽都可以是基于v-form-b​​ase的组件。

  
Top Slot on Key Name
  
Top Slot on Types Radio
  
  
Slot replaces Key Password
  
  
Bottom Slot Key Name
  
Bottom Slot on Types Radio

---

---

表格验证 (Form Validation)

If you need Form Validation you have to wrap v-form-base with v-form and take the reference of v-form for working on.

如果你需要表单验证，你必须包装V型底座与V型 ，并采取对工作的V形的参考。

    

  



validate () {
  this.$refs.form.validate()
},

resetValidation () {
  this.$refs.form.resetValidation()
},

---

---

CSS样式 (Style with CSS)

Customize your vuetify-form-base component using CSS-Classnames

使用CSS类名自定义基于vuetify表单的组件

IMPORTANT: Don't use

---

---

特征 (Features)

• Vue-Component

  Vue组件

• integrates UI framework Vuetify with responsive Layout and Support of Grid

  将UI框架Vuetify与响应式布局和网格支持集成在一起

• Use a lot of Vuetify Control & Input types inclusive available API-Props

  使用很多Vuetify控制和输入类型(包括可用的API道具)

• Get full configurable Forms based on Schema Definition

  根据架构定义获取完整的可配置表单

• Edit plain or deep nested objects including Arrays, without the Need to flatten it

  编辑包括数组在内的简单或深层嵌套对象，而无需展平它

• Get a Full reactive Result

  获得完整的React结果

• Listen on 'Resize', 'Focus', 'Input', 'Click', 'Swipe' and 'Update' Events

  收听“调整大小”，“焦点”，“输入”，“单击”，“滑动”和“更新”事件

• Use Slots to pass Header and Footer into a Control. Or replace a Control by Slot

  使用插槽将页眉和页脚传递到控件中。 或按插槽替换控件

• Configurable CSS Style

  可配置CSS样式

---

---

依存关系 (Dependencies)

Vue >= 2.4

Vue> = 2.4

Vuetify >= 1.4

Vuetify> = 1.4

Lodash > 4.0

Lodash> 4.0

---

---

类似项目 (Similar Projects)

vue-form-generator

Vue形式生成器

vue-formular

语音形式

翻译自: https://vuejsexamples.com/schema-based-form-generator-vue-js-2-0-component-based-on-vuetify/