Name | Modified | Size | Downloads / 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 }
}