Download Latest Version Support of multiple checkbox and grouped radio elements source code.zip (81.3 kB)
Email in envelope

Get an email when there's a new version of FormSchema Native

Home / v1.0.0
Name Modified Size InfoDownloads / Week
Parent folder
README.md 2017-11-05 1.7 kB
Support of Custom Elements source code.tar.gz 2017-11-05 106.4 kB
Support of Custom Elements source code.zip 2017-11-05 110.8 kB
Totals: 3 Items   218.9 kB 0

This release fixes [#5] and add support of custom elements [#4]

Usage Use FormSchema.setComponent(type, component[, props = {}]) to define custom element to use for rendering. See vue-json-schema-demo-elementui for a complete example.

:::js
// an element-ui example

import FormSchema from 'vue-json-schema'
import {
  Form,
  FormItem,
  Input,
  Radio,
  Checkbox,
  Select,
  Option,
  Button
} from 'element-ui'

FormSchema.setComponent('label', FormItem)
FormSchema.setComponent('email', Input)
FormSchema.setComponent('text', Input)
FormSchema.setComponent('textarea', Input)
FormSchema.setComponent('checkbox', Checkbox)
FormSchema.setComponent('radio', Radio)
FormSchema.setComponent('select', Select)
FormSchema.setComponent('option', Option)

// Use the third argument to define props of the component
FormSchema.setComponent('button', Button, {
  type: 'primary',
  label: 'Subscribe'
})

// The third argument can also be a function that return an object
FormSchema.setComponent('form', Form, (vm) => {
  // vm is the FormSchema VM

  const labelWidth = '120px'
  const model = vm.data
  const rules = {}

  vm.fields.forEach((field) => {
    rules[field.name] = {
      required: field.required,
      message: field.title
    }
  })

  return { labelWidth, rules, model }
})

export default {
  data: () => ({
    schema: {...}
  }),
  // ...
  components: { FormSchema }
}
Source: README.md, updated 2017-11-05