mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
chore(Form): use relation
This commit is contained in:
parent
3d15f7e356
commit
3402ba5c8f
@ -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({
|
||||||
|
@ -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,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user