# Reset
重置按钮
# 普通重置
有默认值的控件无法清空
:
:
<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"
default="123"
/>
</SchemaField>
<FormButtonGroup align-form-item>
<Reset>重置</Reset>
</FormButtonGroup>
</FormProvider>
</template>
<script>
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import {
FormLayout,
Reset,
FormButtonGroup,
FormItem,
Input,
} from '@formily/antdv'
const fields = createSchemaField({
components: {
FormItem,
Input,
},
})
export default {
components: {
FormProvider,
FormLayout,
Reset,
FormButtonGroup,
...fields,
},
data() {
const form = createForm()
return {
form,
}
},
}
</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"
default="123"
/>
</SchemaField>
<FormButtonGroup align-form-item>
<Reset forceClear>重置</Reset>
</FormButtonGroup>
</FormProvider>
</template>
<script>
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import {
FormLayout,
Reset,
FormButtonGroup,
FormItem,
Input,
} from '@formily/antdv'
const fields = createSchemaField({
components: {
FormItem,
Input,
},
})
export default {
components: {
FormProvider,
FormLayout,
Reset,
FormButtonGroup,
...fields,
},
data() {
const form = createForm()
return {
form,
}
},
}
</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"
default="123"
/>
</SchemaField>
<FormButtonGroup align-form-item>
<Reset validate forceClear>重置</Reset>
</FormButtonGroup>
</FormProvider>
</template>
<script>
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import {
FormLayout,
Reset,
FormButtonGroup,
FormItem,
Input,
} from '@formily/antdv'
const fields = createSchemaField({
components: {
FormItem,
Input,
},
})
export default {
components: {
FormProvider,
FormLayout,
Reset,
FormButtonGroup,
...fields,
},
data() {
const form = createForm()
return {
form,
}
},
}
</script>
# API
按钮相关的 API 属性,我们参考 https://antdv.com/components/button-cn (opens new window) 即可,剩下是 Reset 组件独有的 API 属性
# 事件
属性名 | 类型 | 描述 | 默认值 |
---|---|---|---|
onClick | (event: MouseEvent) => void | boolean | 点击事件,如果返回 false 可以阻塞重置 | - |
onResetValidateSuccess | (payload: any) => void | 重置校验成功事件 | - |
onResetValidateFailed | (feedbacks: IFormFeedback (opens new window)[]) => void | 重置校验失败事件 | - |