SchemaField
描述
SchemaField 组件是专门用于解析 JSON Schema 动态渲染表单的组件。
SchemaField 有两种使用方式，一种是MarkupSchema，一种是JSONSchema。MarkupSchema的渲染将不同类型的 Field 做了分类，在可读性上更好；JSONSchema直接渲染JSON-Schema，更贴近底层实现。
提示
没有直接可以引用的SchemaField组件，无论是MarkupSchema还是JSONSchema都需要调用createSchemaField来获取组件，只是使用的返回结果中的组件不一样。
Schema 协议说明
本页只说明 @silver-formily/vue 如何消费 Schema。Schema、ISchema、x-reactions、x-component-props 等完整协议请查看 JSON Schema 重建文档站。
函数定义
ts
interface createSchemaField {
(props: ISchemaFieldFactoryProps): ComposeSchemaField
}函数入参
ts
import type { Component } from 'vue'
interface ISchemaFieldFactoryProps {
components?: {
[key: string]: Component // 组件列表
}
scope?: string | number // 全局作用域，用于实现协议表达式变量注入
}函数返回
ts
import type { Component } from 'vue'
interface ComposeSchemaField {
SchemaField: Component<ISchemaFieldProps> // JSON-Schema 渲染组件
SchemaMarkupField: Component<ISchema> // MarkupSchema 渲染组件
SchemaStringField: Component<Omit<ISchema, 'type'>> // MarkupSchema 渲染组件
SchemaObjectField: Component<Omit<ISchema, 'type'>> // MarkupSchema 渲染组件
SchemaArrayField: Component<Omit<ISchema, 'type'>> // MarkupSchema 渲染组件
SchemaBooleanField: Component<Omit<ISchema, 'type'>> // MarkupSchema 渲染组件
SchemaDateField: Component<Omit<ISchema, 'type'>> // MarkupSchema 渲染组件
SchemaDateTimeField: Component<Omit<ISchema, 'type'>> // MarkupSchema 渲染组件
SchemaVoidField: Component<Omit<ISchema, 'type'>> // MarkupSchema 渲染组件
SchemaNumberField: Component<Omit<ISchema, 'type'>> // MarkupSchema 渲染组件
}MarkupSchema
用例
<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 支持直接传入 JSON Schema 对象渲染表单。
<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 的类型继承自 Field，因此大部分属性可以参考Field组件的API
SchemaField 额外支持以下属性：
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| schema | 字段schema | ISchema | - |
| scope | 向 Schema 表达式注入变量 | object | - |