SchemaField
Description
SchemaField parses a JSON Schema tree and renders it declaratively. You can work with two styles: MarkupSchema, which organizes fields by Vue components for readability, and JSON Schema, which feeds the raw schema object.
TIP
You never import SchemaField directly. Call createSchemaField to obtain the renderer suite—both the markup flavoured helpers and the JSON-Schema renderer come from the returned object.
Schema Protocol
This page only documents how @silver-formily/vue consumes schema objects. For the full Schema, ISchema, x-reactions, and x-component-props reference, see the rebuilt JSON Schema docs.
Function Signature
interface createSchemaField {
(props: ISchemaFieldFactoryProps): ComposeSchemaField
}Parameters
import type { Component } from 'vue'
interface ISchemaFieldFactoryProps {
components?: Record<string, Component>
scope?: string | number // inject variables for schema expressions
}Return Value
import type { Component } from 'vue'
interface ComposeSchemaField {
SchemaField: Component<ISchemaFieldProps>
SchemaMarkupField: Component<ISchema>
SchemaStringField: Component<Omit<ISchema, 'type'>>
SchemaObjectField: Component<Omit<ISchema, 'type'>>
SchemaArrayField: Component<Omit<ISchema, 'type'>>
SchemaBooleanField: Component<Omit<ISchema, 'type'>>
SchemaDateField: Component<Omit<ISchema, 'type'>>
SchemaDateTimeField: Component<Omit<ISchema, 'type'>>
SchemaVoidField: Component<Omit<ISchema, 'type'>>
SchemaNumberField: Component<Omit<ISchema, 'type'>>
}MarkupSchema
Example
<script setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
import { ElInput } from 'element-plus'
const { SchemaField, SchemaStringField } = createSchemaField({
components: {
ElInput,
},
})
const form = createForm()
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField name="input" x-component="ElInput" />
</SchemaField>
</FormProvider>
</template><script setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
import { ElInput } from 'element-plus'
const { SchemaField, SchemaStringField } = createSchemaField({
components: {
ElInput,
},
})
const form = createForm()
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField name="input" x-component="ElInput" />
</SchemaField>
</FormProvider>
</template>
JSON Schema
SchemaField can render a form directly from a JSON Schema object.
<script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
import { ElInput } from 'element-plus'
const { SchemaField } = createSchemaField({
components: {
ElInput,
},
})
export default {
components: { FormProvider, SchemaField },
data() {
return {
form: createForm(),
}
},
}
</script>
<template>
<FormProvider :form="form">
<SchemaField
:schema="{
type: 'object',
properties: {
input: {
'type': 'string',
'x-component': 'ElInput',
},
},
}"
/>
</FormProvider>
</template><script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
import { ElInput } from 'element-plus'
const { SchemaField } = createSchemaField({
components: {
ElInput,
},
})
export default {
components: { FormProvider, SchemaField },
data() {
return {
form: createForm(),
}
},
}
</script>
<template>
<FormProvider :form="form">
<SchemaField
:schema="{
type: 'object',
properties: {
input: {
'type': 'string',
'x-component': 'ElInput',
},
},
}"
/>
</FormProvider>
</template>
API
SchemaField extends the Field props, so you inherit everything from Field’s API plus the following additions:
| Prop | Description | Type | Default |
|---|---|---|---|
| schema | Schema node to render | ISchema | — |
| scope | Extra variables injected into schema expressions | object | — |