# Space
超级便捷的 Flex 布局组件，可以帮助用户快速实现任何元素的并排紧挨布局
# Markup Schema 案例
*
:*
:单位
单位
单位
*
:<template>
<FormProvider :form="form">
<FormLayout :labelCol="6" :wrapperCol="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 alignFormItem>
<Submit onSubmit="log">提交</Submit>
</FormButtonGroup>
</FormLayout>
</FormProvider>
</template>
<script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
FormLayout,
FormItem,
Input,
Space,
FormButtonGroup,
Submit,
} from '@formily/antdv'
const fields = createSchemaField({
components: { FormItem, FormLayout, Input, Space },
})
export default {
components: { FormProvider, FormLayout, FormButtonGroup, Submit, ...fields },
data() {
const form = createForm()
return {
form,
}
},
methods: {
log(value) {
console.log(value)
},
},
}
</script>
# JSON Schema 案例
*
:*
:单位
单位
单位
*
:<template>
<FormProvider :form="form">
<FormLayout :labelCol="6" :wrapperCol="16">
<SchemaField :schema="schema" />
<FormButtonGroup alignFormItem>
<Submit onSubmit="log">提交</Submit>
</FormButtonGroup>
</FormLayout>
</FormProvider>
</template>
<script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
FormButtonGroup,
FormLayout,
FormItem,
Input,
Submit,
Space,
} from '@formily/antdv'
const { SchemaField } = createSchemaField({
components: {
FormLayout,
FormItem,
Input,
Space,
},
})
export default {
components: {
FormProvider,
FormButtonGroup,
FormLayout,
SchemaField,
Submit,
},
data() {
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()
return {
form,
schema,
}
},
methods: {
logs(value) {
console.log(value)
},
},
}
</script>
# Template 案例
*
:*
:单位
单位
单位
:
<template>
<FormProvider :form="form">
<FormLayout :labelCol="6" :wrapperCol="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="[
TextArea,
{
style: {
width: 400,
},
},
]"
required
/>
<FormButtonGroup alignFormItem>
<Submit :onSubmit="log">提交</Submit>
</FormButtonGroup>
</FormLayout>
</FormProvider>
</template>
<script>
import { createForm } from '@formily/core'
import { FormProvider, Field, VoidField } from '@formily/vue'
import {
FormLayout,
FormItem,
Input,
TextArea,
Submit,
Space,
FormButtonGroup,
} from '@formily/antdv'
const form = createForm()
export default {
components: {
FormProvider,
FormLayout,
FormButtonGroup,
VoidField,
Field,
Submit,
},
data() {
return {
FormItem,
Input,
TextArea,
Space,
form,
}
},
methods: {
log(value) {
console.log(value)
},
},
}
</script>