Invalid prop: type check failed for prop "context". Expected Object, got Window

[lxiiang]

希望可以拓展一下context类型， 在组件内使用的时候如果不传入window对象 拖拽组件会有重复渲染的报错

[hcg1023]

怎么使用的？可以给个简单的代码吗？context的默认值就是window，理论上不需要你单独传递

[lxiiang]

<template>
  <DndProvider :backend="HTML5Backend" :key="1" :context="window">
    <div class="designer-parcel">
      <form-tool-bar @designerSubmit="designerSubmit" :designer="designer" ref="toolbarRef" />
      <div class="zc-designer" v-loading="loading">
        <form-widget :designer="designer" ref="formWidgetRef" :customWidgetsConfig="customWidgetsConfig" />
        <div class="zc-designer__container">
          <form-container :designer="designer" :formConfig="designer.formConfig" :drawingWidgetList="designer.drawingWidgetList"></form-container>
        </div>
        <form-setting ref="formSetting" :designer="designer" :activeWidget="designer.activeItem" :formConfig="designer.formConfig" />
      </div>
    </div>
  </DndProvider>
</template>

<script setup>
import { DndProvider } from 'vue3-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
</script>
<script>
import { deepClone } from '../utils/utils';
import { createDesigner } from './designer';
import '../form-widget-components/index';
import '../form-widget-components/setting';
import { getWidgetConfigByComponentsId } from '../utils/buildFn';

[lxiiang]

我的vue版本是2.7.14， 由于做了模块联邦共享所以DndProvider 并没有配置在app.vue中 在单独的组件配置的 但是如果不传入window的话 会有重复渲染的问题， 具体问题可以参考这个https://github.com/react-dnd/react-dnd/issues/3257

[hcg1023]

按你这么说，你是在不同的模块内，都使用了DndProvider是吗？那是否可以理解为你的组件卸载时，你就要卸载对应的DndProvider，那你可以直接传递给DndProvider的context一个你的组件内部对象，比如

<template>
   <DndProvider :backend="HTML5Backend" :context="dndContext">some thing</DndProvider>
</template>
<script setup>
const dndContext = {}
</script>

[lxiiang]

我只在我的表单设计模块中使用了DndProvider 每次离开路由前都destory了一下 但是还是不行0,0

[lxiiang]

<template>
  <form-designer
    v-loading="loading"
    :request="request"
    @saveDesigner="saveDesigner"
    :baseDefineConfig="baseDefineConfig"
    :workSheetId="workSheetId"
    :applicationId="applicationId"
    :customWidgetsConfig="customWidgetsConfig"
    ref="formDesigner"
  ></form-designer>
</template>
<script>
import request from '@/utils/request';
import { deepClone, isObjectChanged } from '@/utils';
import { getDesignById, saveFormDesigner } from './api';
import _ from 'lodash';
import { defaultFormConfigBase } from '@/components/newDesigner/form-designer/designer';

export default {
  name: 'FormDesignerPage',
  components: { FormDesigner: () => import('@/components/newDesigner/form-designer/index.vue') },
}

router
{
        name: 'formDesigner',
        path: 'formDesigner',
        hidden: true,
        component: resolve => require(['@/views/app/designer/form-designer.vue'], resolve),
        meta: { title: '表单设计器' },
      },

只有这一个页面引入了

[hcg1023]

意思是你的page卸载了，但是再次挂载的时候，提示已经存在Backend了？

[lxiiang]

是的是的 切换多次路由就会发生这种问题

[hcg1023]

好的，我这边试一下，后续给你反馈

[lxiiang]

嗯嗯 谢了哈

[hcg1023]

我这边用路由尝试复现，但是并没有复现你的问题，你是否能提供一个简单的demo呢？