Space
Element-Plus 的 Flex 布局组件
注意
本项目并未对Space组件做任何封装，只是简单的引入与再导出了对等依赖中的ElSpace，其效果与直接使用ElSpace相同。
Markup Schema 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
FormButtonGroup,
FormItem,
FormLayout,
Input,
Space,
Submit,
} from '@silver-formily/element-plus'
const { SchemaField, SchemaVoidField, SchemaStringField } = createSchemaField({
components: { FormItem, FormLayout, Input, Space },
})
const form = createForm()
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<FormLayout :label-col="6" :wrapper-col="16">
<SchemaField>
<SchemaVoidField
x-component="FormLayout"
:x-component-props="{
labelCol: 6,
wrapperCol: 10,
}"
>
<SchemaVoidField
title="姓名"
x-decorator="FormItem"
:x-decorator-props="{
asterisk: true,
feedbackLayout: 'none',
}"
x-component="Space"
>
<SchemaStringField
name="firstName"
x-decorator="FormItem"
x-component="Input"
:required="true"
/>
<SchemaStringField
name="lastName"
x-decorator="FormItem"
x-component="Input"
:required="true"
/>
</SchemaVoidField>
<SchemaVoidField
title="文本串联"
x-decorator="FormItem"
:x-decorator-props="{
asterisk: true,
feedbackLayout: 'none',
}"
x-component="Space"
>
<SchemaStringField
name="aa"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
addonAfter: '单位',
}"
:required="true"
/>
<SchemaStringField
name="bb"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
addonAfter: '单位',
}"
:required="true"
/>
<SchemaStringField
name="cc"
x-decorator="FormItem"
x-component="Input"
:x-decorator-props="{
addonAfter: '单位',
}"
:required="true"
/>
</SchemaVoidField>
<SchemaStringField
name="textarea"
title="文本框"
x-decorator="FormItem"
:required="true"
x-component="Input"
:x-component-props="{
style: {
width: 400,
},
type: 'textarea',
}"
/>
</SchemaVoidField>
</SchemaField>
<FormButtonGroup align-form-item>
<Submit @submit="log">
提交
</Submit>
</FormButtonGroup>
</FormLayout>
</FormProvider>
</template>JSON Schema 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
FormButtonGroup,
FormItem,
FormLayout,
Input,
Space,
Submit,
} from '@silver-formily/element-plus'
const { SchemaField } = createSchemaField({
components: {
FormLayout,
FormItem,
Input,
Space,
},
})
const schema = {
type: 'object',
properties: {
name: {
'type': 'void',
'title': '姓名',
'x-decorator': 'FormItem',
'x-decorator-props': {
asterisk: true,
feedbackLayout: 'none',
},
'x-component': 'Space',
'properties': {
firstName: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
'required': true,
},
lastName: {
'type': 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
'required': true,
},
},
},
texts: {
'type': 'void',
'title': '文本串联',
'x-decorator': 'FormItem',
'x-decorator-props': {
asterisk: true,
feedbackLayout: 'none',
},
'x-component': 'Space',
'properties': {
aa: {
'type': 'string',
'x-decorator': 'FormItem',
'x-decorator-props': {
addonAfter: '单位',
},
'x-component': 'Input',
'required': true,
},
bb: {
'type': 'string',
'x-decorator': 'FormItem',
'x-decorator-props': {
addonAfter: '单位',
},
'x-component': 'Input',
'required': true,
},
cc: {
'type': 'string',
'x-decorator': 'FormItem',
'x-decorator-props': {
addonAfter: '单位',
},
'x-component': 'Input',
'required': true,
},
},
},
textarea: {
'type': 'string',
'title': '文本框',
'x-decorator': 'FormItem',
'x-component': 'Input.TextArea',
'x-component-props': {
style: {
width: 400,
},
},
'required': true,
},
},
}
const form = createForm()
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<FormLayout :label-col="6" :wrapper-col="16">
<SchemaField :schema="schema" />
<FormButtonGroup align-form-item>
<Submit @submit="log">
提交
</Submit>
</FormButtonGroup>
</FormLayout>
</FormProvider>
</template>Template 案例
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { Field, FormProvider, VoidField } from '@formily/vue'
import {
FormButtonGroup,
FormItem,
FormLayout,
Input,
Space,
Submit,
} from '@silver-formily/element-plus'
const form = createForm()
async function log(value) {
console.log(value)
}
</script>
<template>
<FormProvider :form="form">
<FormLayout :label-col="6" :wrapper-col="16">
<VoidField
name="name"
title="姓名"
:decorator="[
FormItem,
{
asterisk: true,
feedbackLayout: 'none',
},
]"
:component="[Space]"
>
<Field
name="firstName"
:decorator="[FormItem]"
:component="[Input]"
required
/>
<Field
name="lastName"
:decorator="[FormItem]"
:component="[Input]"
required
/>
</VoidField>
<VoidField
name="texts"
title="文本串联"
:decorator="[
FormItem,
{
asterisk: true,
feedbackLayout: 'none',
},
]"
:component="[Space]"
>
<Field
name="aa"
:decorator="[
FormItem,
{
addonAfter: '单位',
},
]"
:component="[Input]"
required
/>
<Field
name="bb"
:decorator="[
FormItem,
{
addonAfter: '单位',
},
]"
:component="[Input]"
required
/>
<Field
name="cc"
:decorator="[
FormItem,
{
addonAfter: '单位',
},
]"
:component="[Input]"
required
/>
</VoidField>
<Field
name="textarea"
title="文本框"
:decorator="[FormItem]"
:component="[
Input.TextArea,
{
style: {
width: 400,
},
},
]"
required
/>
<FormButtonGroup align-form-item>
<Submit :on-submit="log">
提交
</Submit>
</FormButtonGroup>
</FormLayout>
</FormProvider>
</template>