useModal中存在20个以上Input时，打开很慢，关闭时modal抖动

[1974193036]

描述 Bug

### useModal中存在20个以上Input时，打开很慢，关闭时modal抖动

复现 Bug

https://github.com/vbenjs/vue-vben-admin/assets/20085991/3bf382d5-c0ec-4ceb-995c-bad2f2a459d2

系统信息

• 操作系统: macos
• Node 版本: 16.16
• 包管理器 (npm/yarn/pnpm) 及其版本:pnpm

[Jzow]

是的 这个Bug很明显

[sugar258596]

我刚刚测试了，有三十个的时候没有出现这个问题，

[cMing1997]

这个应该跟使用的写法有关系吧，建议楼主贴一下使用的写法

[1974193036]

补充下代码

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="Modal Title"
    :afterClose="afterClose"
  >
    <div class="pt-3px pr-3px">
      <BasicForm @register="registerForm" :model="modelRef" />
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';

  const schemas: FormSchema[] = [
    {
      field: 'field1',
      component: 'Input',
      label: '字段1',
      colProps: {
        span: 24,
      },
      defaultValue: '111',
    },
    {
      field: 'field2',
      component: 'Input',
      label: '字段2',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'field3',
      component: 'Input',
      label: '字段3',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field4',
      component: 'Input',
      label: '字段4',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field5',
      component: 'Input',
      label: '字段5',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field6',
      component: 'Input',
      label: '字段6',
      colProps: {
        span: 12,
      },
    }, {
      field: 'field7',
      component: 'Input',
      label: '字段7',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field8',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field9',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field10',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field11',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field12',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field13',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field14',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field15',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field16',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field17',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field18',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field19',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field20',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field21',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field22',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field23',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field24',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field25',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },

    {
      field: 'field26',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field27',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field28',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field29',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field8',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'field30',
      component: 'Input',
      label: '字段8',
      colProps: {
        span: 12,
      },
    },
  ];

  const props = defineProps({
    userData: { type: Object },
  });
  const modelRef = ref({});
  const [
    registerForm,
    {
      setFieldsValue,
      resetFields,
    },
  ] = useForm({
    labelWidth: 120,
    schemas,
    showActionButtonGroup: false,
    actionColOptions: {
      span: 24,
    },
  });

  const [register] = useModalInner((data) => {
    data && onDataReceive(data);
  });

  function onDataReceive(data) {
    console.log('Data Received', data);
    setFieldsValue({
      field2: data.data,
      field1: data.info,
    });
  }
  
  function afterClose() {
    resetFields()
  }
</script>

[guilunmei]

我也遇到这个问题了 我直接把动画去掉了

[xachary]

@1974193036 视频挂了

[cMing1997]

@1974193036 视频挂了

我这边可以看到

[anncwb]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days