Submit
提交按钮
普通提交
<script lang="ts" setup>
import { createForm } from '@formily/core'
import {
FormButtonGroup,
FormItem,
Input,
Submit,
} from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
const { SchemaField, SchemaStringField } = createSchemaField({
components: { FormItem, Input },
})
const form = createForm()
async function log(v) {
console.log(v)
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField
required
name="input1"
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
required
title="输入框"
name="input2"
x-decorator="FormItem"
x-component="Input"
/>
</SchemaField>
<FormButtonGroup align-form-item>
<Submit :on-submit="log">
提交
</Submit>
</FormButtonGroup>
</FormProvider>
</template>输入框:
输入框:
:
查看源码
防重提交
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { FormButtonGroup, FormItem, Input, Submit } from '@silver-formily/element-plus'
import { createSchemaField, FormProvider } from '@silver-formily/vue'
const { SchemaField, SchemaStringField } = createSchemaField({
components: { FormItem, Input },
})
const form = createForm()
function handleSubmit(values) {
return new Promise((resolve) => {
setTimeout(() => {
console.log(values)
resolve(void 0)
}, 2000)
})
}
</script>
<template>
<FormProvider :form="form">
<SchemaField>
<SchemaStringField
required
name="input1"
title="输入框"
x-decorator="FormItem"
x-component="Input"
/>
<SchemaStringField
required
title="输入框"
name="input2"
x-decorator="FormItem"
x-component="Input"
/>
</SchemaField>
<FormButtonGroup align-form-item>
<Submit @submit="handleSubmit">
提交
</Submit>
</FormButtonGroup>
</FormProvider>
</template>输入框:
输入框:
:
查看源码
API
属性主要继承自 Button组件 即可,剩下是 Submit 组件独有的 API 属性
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| onClick | (event: MouseEvent) => void | boolean | 点击事件,如果返回 false 可以阻塞提交 | - |
| onSubmit | (values: any) => Promise<any> | any | 提交事件回调 | - |
| onSubmitSuccess | (payload: any) => void | 提交成功响应事件 | - |
| onSubmitFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 提交校验失败事件回调 | - |