chore(Form): use relation

This commit is contained in:
chenjiahan 2020-09-25 14:16:50 +08:00
parent 3d15f7e356
commit 3402ba5c8f
2 changed files with 14 additions and 20 deletions

View File

@ -23,7 +23,7 @@ import {
// Composition // Composition
import { useExpose } from '../composition/use-expose'; import { useExpose } from '../composition/use-expose';
import { useParent } from '../composition/use-parent'; import { useParent } from '../composition/use-relation';
// Components // Components
import Icon from '../icon'; import Icon from '../icon';
@ -100,7 +100,6 @@ export default createComponent({
validateMessage: '', validateMessage: '',
}); });
const root = ref();
const inputRef = ref(); const inputRef = ref();
const childFieldValue = ref(); const childFieldValue = ref();
@ -220,13 +219,7 @@ export default createComponent({
}); });
}); });
const { parent: form } = useParent(FORM_KEY, { const { parent: form } = useParent(FORM_KEY);
root,
props,
validate,
formValue,
resetValidation,
});
const validateWithTrigger = (trigger) => { const validateWithTrigger = (trigger) => {
if (form && props.rules) { if (form && props.rules) {
@ -534,8 +527,11 @@ export default createComponent({
}; };
useExpose({ useExpose({
focus,
blur, blur,
focus,
validate,
formValue,
resetValidation,
}); });
provide(FIELD_KEY, { provide(FIELD_KEY, {
@ -569,7 +565,6 @@ export default createComponent({
title: renderLabel, title: renderLabel,
extra: slots.extra, extra: slots.extra,
}} }}
ref={root}
size={props.size} size={props.size}
icon={props.leftIcon} icon={props.leftIcon}
class={bem({ class={bem({

View File

@ -1,6 +1,6 @@
import { provide, reactive } from 'vue';
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
import { useExpose } from '../composition/use-expose'; import { useExpose } from '../composition/use-expose';
import { useChildren } from '../composition/use-relation';
const [createComponent, bem] = createNamespace('form'); const [createComponent, bem] = createNamespace('form');
@ -36,9 +36,7 @@ export default createComponent({
emits: ['submit', 'failed'], emits: ['submit', 'failed'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const children = reactive([]); const { children, linkChildren } = useChildren(FORM_KEY);
provide(FORM_KEY, { props, children });
const validateSeq = () => const validateSeq = () =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
@ -81,7 +79,7 @@ export default createComponent({
}); });
const validateField = (name) => { const validateField = (name) => {
const matched = children.filter((item) => item.props.name === name); const matched = children.filter((item) => item.name === name);
if (matched.length) { if (matched.length) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -107,7 +105,7 @@ export default createComponent({
const resetValidation = (name) => { const resetValidation = (name) => {
children.forEach((item) => { children.forEach((item) => {
if (!name || item.props.name === name) { if (!name || item.name === name) {
item.resetValidation(); item.resetValidation();
} }
}); });
@ -115,8 +113,8 @@ export default createComponent({
const scrollToField = (name, options) => { const scrollToField = (name, options) => {
children.some((item) => { children.some((item) => {
if (item.props.name === name) { if (item.name === name) {
item.root.value.scrollIntoView(options); item.$el.scrollIntoView(options);
return true; return true;
} }
return false; return false;
@ -125,7 +123,7 @@ export default createComponent({
const getValues = () => const getValues = () =>
children.reduce((form, field) => { children.reduce((form, field) => {
form[field.props.name] = field.formValue; form[field.name] = field.formValue.value;
return form; return form;
}, {}); }, {});
@ -150,6 +148,7 @@ export default createComponent({
submit(); submit();
}; };
linkChildren({ props });
useExpose({ useExpose({
submit, submit,
validate, validate,