perf(form): perf form in modal

This commit is contained in:
vben 2021-01-27 21:23:50 +08:00
parent 733afddd19
commit 2882d6e937
4 changed files with 26 additions and 16 deletions

View File

@ -97,7 +97,7 @@
"vite-plugin-html": "^2.0.0-beta.6",
"vite-plugin-mock": "^2.0.0-rc.2",
"vite-plugin-purge-icons": "^0.6.0",
"vite-plugin-pwa": "^0.4.0",
"vite-plugin-pwa": "^0.4.1",
"vite-plugin-style-import": "^0.4.6",
"vue-eslint-parser": "^7.4.1",
"yargs": "^16.2.0"

View File

@ -33,9 +33,19 @@
<script lang="ts">
import type { FormActionType, FormProps, FormSchema } from './types/form';
import type { AdvanceState } from './types/hooks';
import type { CSSProperties, Ref, WatchStopHandle } from 'vue';
import type { CSSProperties, Ref } from 'vue';
import { defineComponent, reactive, ref, computed, unref, onMounted, watch, toRefs } from 'vue';
import {
defineComponent,
reactive,
ref,
computed,
unref,
onMounted,
watch,
toRefs,
nextTick,
} from 'vue';
import { Form, Row } from 'ant-design-vue';
import FormItem from './components/FormItem';
import FormAction from './components/FormAction.vue';
@ -51,6 +61,7 @@
import { useFormEvents } from './hooks/useFormEvents';
import { createFormContext } from './hooks/useFormContext';
import { useAutoFocus } from './hooks/useAutoFocus';
import { useModalContext } from '/@/components/Modal';
import { basicProps } from './props';
import { useDesign } from '/@/hooks/web/useDesign';
@ -62,6 +73,7 @@
emits: ['advanced-change', 'reset', 'submit', 'register'],
setup(props, { emit }) {
const formModel = reactive<Recordable>({});
const modalFn = useModalContext();
const advanceState = reactive<AdvanceState>({
isAdvanced: true,
@ -188,11 +200,15 @@
}
);
const stopWatch: WatchStopHandle = watch(
watch(
() => getSchema.value,
(schema) => {
nextTick(() => {
// Solve the problem of modal adaptive height calculation when the form is placed in the modal
modalFn?.redoModalHeight?.();
});
if (unref(isInitedDefaultRef)) {
return stopWatch();
return;
}
if (schema?.length) {
initDefault();

View File

@ -1,10 +1,9 @@
import { isArray, isFunction, isObject, isString, isNullOrUnDef } from '/@/utils/is';
import { dateUtil } from '/@/utils/dateUtil';
import { unref, nextTick } from 'vue';
import { unref } from 'vue';
import type { Ref, ComputedRef } from 'vue';
import type { FieldMapToTime, FormSchema } from '../types/form';
import { useModalContext } from '/@/components/Modal';
interface UseFormValuesContext {
transformDateFuncRef: Ref<Fn>;
@ -20,7 +19,6 @@ export function useFormValues({
getSchema,
formModel,
}: UseFormValuesContext) {
const modalFn = useModalContext();
// Processing form values
function handleFormValues(values: Recordable) {
if (!isObject(values)) {
@ -85,10 +83,6 @@ export function useFormValues({
}
});
defaultValueRef.value = obj;
nextTick(() => {
// Solve the problem of modal adaptive height calculation when the form is placed in the modal
modalFn?.redoModalHeight?.();
});
}
return { handleFormValues, initDefault };

View File

@ -7722,10 +7722,10 @@ vite-plugin-purge-icons@^0.6.0:
"@purge-icons/generated" "^0.6.0"
rollup-plugin-purge-icons "^0.6.0"
vite-plugin-pwa@^0.4.0:
version "0.4.0"
resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.0.tgz#be7723315beed00ca7f9d23b24c5b1356276747c"
integrity sha512-+qsqpR6QgkxY8IdSyjHDGz5L5+3pbXKVP2KztqMeamu8Rpki45kEUMrdhloFSPiSNA7L+xS/U6WDyNe+u0IP4A==
vite-plugin-pwa@^0.4.1:
version "0.4.1"
resolved "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-0.4.1.tgz#eae03c4dd10cd51600c08fd1aaa179a92577c456"
integrity sha512-UvcdW93FT0+2dRSLasQtvJepBwXj+UTcvzBekca6YuVdn/MTdEX01J/QqPL+v3KUZBnNM2MAOFpLIkZ3wi9t8g==
dependencies:
debug "^4.3.2"
fast-glob "^3.2.5"