diff --git a/src/composition/use-parent-field.ts b/src/composition/use-parent-field.ts new file mode 100644 index 000000000..f378adcd8 --- /dev/null +++ b/src/composition/use-parent-field.ts @@ -0,0 +1,17 @@ +import { watch, inject, WatchSource, getCurrentInstance } from 'vue'; +import { FIELD_KEY } from '../field'; + +export function useParentField(watchSource: WatchSource) { + const field = inject(FIELD_KEY) as any; + + if (field && !field.children) { + field.children = getCurrentInstance()!.proxy; + + watch(watchSource, () => { + if (field) { + field.resetValidation(); + field.validateWithTrigger('onChange'); + } + }); + } +} diff --git a/src/field/index.js b/src/field/index.js index 4ee83a9a2..80b901f16 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -18,6 +18,8 @@ import { cellProps } from '../cell/shared'; const [createComponent, bem] = createNamespace('field'); +export const FIELD_KEY = 'vanField'; + export default createComponent({ provide() { return { diff --git a/src/mixins/field.js b/src/mixins/field.js index 176e7b575..6860e10d1 100644 --- a/src/mixins/field.js +++ b/src/mixins/field.js @@ -1,7 +1,9 @@ +import { FIELD_KEY } from '../field'; + export const FieldMixin = { inject: { vanField: { - from: 'vanField', + from: FIELD_KEY, default: null, }, }, diff --git a/src/slider/index.js b/src/slider/index.js index 2ccd632fd..3aa93f0be 100644 --- a/src/slider/index.js +++ b/src/slider/index.js @@ -1,19 +1,17 @@ import { ref, computed } from 'vue'; + +// Utils import { createNamespace, addUnit, getSizeStyle } from '../utils'; import { preventDefault } from '../utils/dom/event'; -// Mixins -import { FieldMixin } from '../mixins/field'; - // Composition import { useRect } from '../composition/use-rect'; import { useTouch } from '../composition/use-touch'; +import { useParentField } from '../composition/use-parent-field'; const [createComponent, bem] = createNamespace('slider'); export default createComponent({ - mixins: [FieldMixin], - props: { disabled: Boolean, vertical: Boolean, @@ -174,6 +172,7 @@ export default createComponent({ // format initial value updateValue(props.modelValue); + useParentField(() => props.modelValue); return () => (