Reset
重置按钮
普通重置
有默认值的控件无法清空
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { FormButtonGroup, FormItem, Input, Reset } from '@silver-formily/element-plus'
const { SchemaField, SchemaStringField } = createSchemaField({
components: {
FormItem,
Input,
},
})
const form = createForm()
</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>重置</Reset>
</FormButtonGroup>
</FormProvider>
</template>强制清空重置
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { FormButtonGroup, FormItem, Input, Reset } from '@silver-formily/element-plus'
const { SchemaField, SchemaStringField } = createSchemaField({
components: {
FormItem,
Input,
},
})
const form = createForm()
</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 force-clear>
重置
</Reset>
</FormButtonGroup>
</FormProvider>
</template>强制清空重置并校验
vue
<script lang="ts" setup>
import { createForm } from '@formily/core'
import { createSchemaField, FormProvider } from '@formily/vue'
import { FormButtonGroup, FormItem, Input, Reset } from '@silver-formily/element-plus'
const { SchemaField, SchemaStringField } = createSchemaField({
components: {
FormItem,
Input,
},
})
const form = createForm()
async function log(value) {
console.log(value)
}
</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 force-clear @reset-validate-success="log">
重置
</Reset>
</FormButtonGroup>
</FormProvider>
</template>API
属性主要继承自 Button组件 ,下面是 Reset 组件独有的 API 属性
属性
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| forceClear | boolean | 强制清空重置 | false |
| validate | boolean | 校验表单 | false |
事件
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| onClick | (event: MouseEvent) => void | boolean | 点击事件,如果返回 false 可以阻塞重置 | - |
| onResetValidateSuccess | (payload: any) => void | 重置校验成功事件 | - |
| onResetValidateFailed | (feedbacks: IFormFeedback[]) => void | 重置校验失败事件 | - |