| 1 |
<template> |
| 2 |
<ElForm ref="elForm" class="ivyforms-form" v-bind="{ ...$props, ...$attrs }" label-position="top"> |
| 3 |
<slot /> |
| 4 |
</ElForm> |
| 5 |
</template> |
| 6 |
|
| 7 |
<script setup lang="ts"> |
| 8 |
import { ElForm } from 'element-plus' |
| 9 |
import type { FormInstance, FormValidateCallback } from 'element-plus' |
| 10 |
import { ref } from 'vue' |
| 11 |
|
| 12 |
const elForm = ref<FormInstance>() |
| 13 |
|
| 14 |
const resetFields = () => { |
| 15 |
elForm.value?.resetFields() |
| 16 |
} |
| 17 |
|
| 18 |
const clearValidate = (props = undefined) => { |
| 19 |
elForm.value?.clearValidate(props) |
| 20 |
} |
| 21 |
|
| 22 |
const validateField = async (field: string, callback?: FormValidateCallback | undefined) => { |
| 23 |
return await elForm.value?.validateField(field, callback) |
| 24 |
} |
| 25 |
|
| 26 |
const validate = async (callback?: FormValidateCallback | undefined) => { |
| 27 |
return await elForm.value?.validate(callback) |
| 28 |
} |
| 29 |
|
| 30 |
const scrollToField = (field: string) => { |
| 31 |
elForm.value?.scrollToField(field) |
| 32 |
} |
| 33 |
|
| 34 |
defineExpose({ |
| 35 |
resetFields, |
| 36 |
clearValidate, |
| 37 |
validateField, |
| 38 |
validate, |
| 39 |
scrollToField, |
| 40 |
}) |
| 41 |
</script> |
| 42 |
|
