Commit 2882d6e937a7d4996ae42ff62148d9a2f893fe47
1 parent
733afddd
perf(form): perf form in modal
Showing
4 changed files
with
27 additions
and
17 deletions
package.json
... | ... | @@ -97,7 +97,7 @@ |
97 | 97 | "vite-plugin-html": "^2.0.0-beta.6", |
98 | 98 | "vite-plugin-mock": "^2.0.0-rc.2", |
99 | 99 | "vite-plugin-purge-icons": "^0.6.0", |
100 | - "vite-plugin-pwa": "^0.4.0", | |
100 | + "vite-plugin-pwa": "^0.4.1", | |
101 | 101 | "vite-plugin-style-import": "^0.4.6", |
102 | 102 | "vue-eslint-parser": "^7.4.1", |
103 | 103 | "yargs": "^16.2.0" | ... | ... |
src/components/Form/src/BasicForm.vue
... | ... | @@ -33,9 +33,19 @@ |
33 | 33 | <script lang="ts"> |
34 | 34 | import type { FormActionType, FormProps, FormSchema } from './types/form'; |
35 | 35 | import type { AdvanceState } from './types/hooks'; |
36 | - import type { CSSProperties, Ref, WatchStopHandle } from 'vue'; | |
37 | - | |
38 | - import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue'; | |
36 | + import type { CSSProperties, Ref } from 'vue'; | |
37 | + | |
38 | + import { | |
39 | + defineComponent, | |
40 | + reactive, | |
41 | + ref, | |
42 | + computed, | |
43 | + unref, | |
44 | + onMounted, | |
45 | + watch, | |
46 | + toRefs, | |
47 | + nextTick, | |
48 | + } from 'vue'; | |
39 | 49 | import { Form, Row } from 'ant-design-vue'; |
40 | 50 | import FormItem from './components/FormItem'; |
41 | 51 | import FormAction from './components/FormAction.vue'; |
... | ... | @@ -51,6 +61,7 @@ |
51 | 61 | import { useFormEvents } from './hooks/useFormEvents'; |
52 | 62 | import { createFormContext } from './hooks/useFormContext'; |
53 | 63 | import { useAutoFocus } from './hooks/useAutoFocus'; |
64 | + import { useModalContext } from '/@/components/Modal'; | |
54 | 65 | |
55 | 66 | import { basicProps } from './props'; |
56 | 67 | import { useDesign } from '/@/hooks/web/useDesign'; |
... | ... | @@ -62,6 +73,7 @@ |
62 | 73 | emits: ['advanced-change', 'reset', 'submit', 'register'], |
63 | 74 | setup(props, { emit }) { |
64 | 75 | const formModel = reactive<Recordable>({}); |
76 | + const modalFn = useModalContext(); | |
65 | 77 | |
66 | 78 | const advanceState = reactive<AdvanceState>({ |
67 | 79 | isAdvanced: true, |
... | ... | @@ -188,11 +200,15 @@ |
188 | 200 | } |
189 | 201 | ); |
190 | 202 | |
191 | - const stopWatch: WatchStopHandle = watch( | |
203 | + watch( | |
192 | 204 | () => getSchema.value, |
193 | 205 | (schema) => { |
206 | + nextTick(() => { | |
207 | + // Solve the problem of modal adaptive height calculation when the form is placed in the modal | |
208 | + modalFn?.redoModalHeight?.(); | |
209 | + }); | |
194 | 210 | if (unref(isInitedDefaultRef)) { |
195 | - return stopWatch(); | |
211 | + return; | |
196 | 212 | } |
197 | 213 | if (schema?.length) { |
198 | 214 | initDefault(); | ... | ... |
src/components/Form/src/hooks/useFormValues.ts
1 | 1 | import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '/@/utils/is'; |
2 | 2 | import { dateUtil } from '/@/utils/dateUtil'; |
3 | 3 | |
4 | -import { unref, nextTick } from 'vue'; | |
4 | +import { unref } from 'vue'; | |
5 | 5 | import type { Ref, ComputedRef } from 'vue'; |
6 | 6 | import type { FieldMapToTime, FormSchema } from '../types/form'; |
7 | -import { useModalContext } from '/@/components/Modal'; | |
8 | 7 | |
9 | 8 | interface UseFormValuesContext { |
10 | 9 | transformDateFuncRef: Ref<Fn>; |
... | ... | @@ -20,7 +19,6 @@ export function useFormValues({ |
20 | 19 | getSchema, |
21 | 20 | formModel, |
22 | 21 | }: UseFormValuesContext) { |
23 | - const modalFn = useModalContext(); | |
24 | 22 | // Processing form values |
25 | 23 | function handleFormValues(values: Recordable) { |
26 | 24 | if (!isObject(values)) { |
... | ... | @@ -85,10 +83,6 @@ export function useFormValues({ |
85 | 83 | } |
86 | 84 | }); |
87 | 85 | defaultValueRef.value = obj; |
88 | - nextTick(() => { | |
89 | - // Solve the problem of modal adaptive height calculation when the form is placed in the modal | |
90 | - modalFn?.redoModalHeight?.(); | |
91 | - }); | |
92 | 86 | } |
93 | 87 | |
94 | 88 | return { handleFormValues, initDefault }; | ... | ... |
yarn.lock
... | ... | @@ -7722,10 +7722,10 @@ vite-plugin-purge-icons@^0.6.0: |
7722 | 7722 | "@purge-icons/generated" "^0.6.0" |
7723 | 7723 | rollup-plugin-purge-icons "^0.6.0" |
7724 | 7724 | |
7725 | -vite-plugin-pwa@^0.4.0: | |
7726 | - version "0.4.0" | |
7727 | - resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.0.tgz#be7723315beed00ca7f9d23b24c5b1356276747c" | |
7728 | - integrity sha512-+qsqpR6QgkxY8IdSyjHDGz5L5+3pbXKVP2KztqMeamu8Rpki45kEUMrdhloFSPiSNA7L+xS/U6WDyNe+u0IP4A== | |
7725 | +vite-plugin-pwa@^0.4.1: | |
7726 | + version "0.4.1" | |
7727 | + resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.1.tgz#eae03c4dd10cd51600c08fd1aaa179a92577c456" | |
7728 | + integrity sha512-UvcdW93FT0+2dRSLasQtvJepBwXj+UTcvzBekca6YuVdn/MTdEX01J/QqPL+v3KUZBnNM2MAOFpLIkZ3wi9t8g== | |
7729 | 7729 | dependencies: |
7730 | 7730 | debug "^4.3.2" |
7731 | 7731 | fast-glob "^3.2.5" | ... | ... |