FormButtonGroup
表单按钮组布局组件
Markup Schema 案例
vue
<script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
FormButtonGroup,
FormItem,
FormLayout,
Input,
Reset,
Select,
Submit,
} from '@silver-formily/element-plus'
const fields = createSchemaField({ components: { FormItem, Input, Select } })
export default {
components: {
FormProvider,
FormLayout,
Submit,
Reset,
FormButtonGroup,
...fields,
},
data() {
const form = createForm()
return {
form,
}
},
methods: {
log(v) {
console.log(v)
},
},
}
</script>
<template>
<FormProvider :form="form">
<FormLayout :label-col="6" :wrapper-col="10">
<SchemaField>
<SchemaStringField
required
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
required
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
required
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
required
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
required
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
required
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
required
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
</SchemaField>
<FormButtonGroup align-form-item>
<Submit @submit="log">
提交
</Submit>
<Reset>重置</Reset>
</FormButtonGroup>
</FormLayout>
</FormProvider>
</template>Markup Schema 固钉 案例
vue
<script>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import {
FormButtonGroup,
FormItem,
FormLayout,
Input,
Reset,
Select,
Submit,
} from '@silver-formily/element-plus'
const fields = createSchemaField({ components: { FormItem, Input, Select } })
export default {
components: {
FormProvider,
FormLayout,
Submit,
Reset,
FormButtonGroup,
FormButtonGroupSticky: FormButtonGroup.Sticky,
...fields,
},
data() {
const form = createForm()
return {
form,
}
},
methods: {
log(v) {
console.log(v)
},
},
}
</script>
<template>
<FormProvider :form="form">
<FormLayout :label-col="6" :wrapper-col="10">
<SchemaField>
<SchemaStringField required title="输入框1" x-decorator="FormItem" x-component="Input" />
<SchemaStringField required title="输入框2" x-decorator="FormItem" x-component="Input" />
<SchemaStringField required title="输入框3" x-decorator="FormItem" x-component="Input" />
<SchemaStringField required title="输入框4" x-decorator="FormItem" x-component="Input" />
<SchemaStringField required title="输入框5" x-decorator="FormItem" x-component="Input" />
<SchemaStringField required title="输入框6" x-decorator="FormItem" x-component="Input" />
<SchemaStringField required title="输入框7" x-decorator="FormItem" x-component="Input" />
<SchemaStringField required title="输入框8" x-decorator="FormItem" x-component="Input" />
<SchemaStringField required title="输入框9" x-decorator="FormItem" x-component="Input" />
</SchemaField>
<FormButtonGroupSticky>
<FormButtonGroup align-form-item>
<Submit @submit="log">
提交
</Submit>
<Reset>重置</Reset>
</FormButtonGroup>
</FormButtonGroupSticky>
</FormLayout>
</FormProvider>
</template>Template 固钉居中 案例
vue
<script setup lang="ts">
import { createForm } from '@formily/core'
import { Field, FormProvider } from '@formily/vue'
import {
FormButtonGroup,
FormItem,
FormLayout,
Input,
Reset,
Submit,
} from '@silver-formily/element-plus'
const form = createForm()
async function log(...v) {
console.log(...v)
}
</script>
<template>
<FormProvider :form="form">
<FormLayout :label-col="6" :wrapper-col="10">
<Field name="input1" title="输入框1" :decorator="[FormItem]" :component="[Input]" />
<Field name="input2" title="输入框2" :decorator="[FormItem]" :component="[Input]" />
<Field name="input3" title="输入框3" :decorator="[FormItem]" :component="[Input]" />
<Field name="input4" title="输入框4" :decorator="[FormItem]" :component="[Input]" />
<Field name="input5" title="输入框5" :decorator="[FormItem]" :component="[Input]" />
<Field name="input6" title="输入框6" :decorator="[FormItem]" :component="[Input]" />
<Field name="input7" title="输入框7" :decorator="[FormItem]" :component="[Input]" />
<Field name="input8" title="输入框8" :decorator="[FormItem]" :component="[Input]" />
<Field name="input9" title="输入框9" :decorator="[FormItem]" :component="[Input]" />
<FormButtonGroup.Sticky>
<FormButtonGroup align="center">
<Submit @submit="log">
提交
</Submit>
<Reset>重置</Reset>
</FormButtonGroup>
</FormButtonGroup.Sticky>
</FormLayout>
</FormProvider>
</template>API
FormButtonGroup
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| gutter | 按钮间隙大小 | number | 8 |
| align | 对齐方式 | enum | 'left' |
| alignFormItem | 对齐 FormItem | boolean | false |
FormButtonGroup.Sticky
参考 https://cn.element-plus.org/zh-CN/component/affix.html
其中position 默认值修改为 bottom,target属性默认值为form表单所在容器(需要使用Form组件或者FormLayout组件包裹,如果没有包裹需要手动提供表单所在DOM)。