Skip to content

自定义Modal对话框时出现error #55

@yang023

Description

@yang023

我想自行接入tdesign-vue-next组件,根据源码自定义注册组件到designer、builder中。表单、输入组件接入都成功,唯独注册tdesigne的Dialog组件到type='modal'时出现如下错误:

[Vue warn]: Unhandled error during execution of mounted hook 
  at <Index ref_key="monacoEditorRef" ref=Ref< Proxy(Object) {__v_skip: true, insertText: ƒ, setValue: ƒ} > auto-toggle-theme=""  ... > 
  at <AsyncComponentWrapper ref_key="monacoEditorRef" ref=Ref< Proxy(Object) {__v_skip: true, insertText: ƒ, setValue: ƒ} > auto-toggle-theme=""  ... > 
  at <Dialog modelValue=false onUpdate:modelValue=fn title="表单数据"  ... > 
  at <AsyncComponentWrapper modelValue=false onUpdate:modelValue=fn title="表单数据"  ... > 
  at <Dialog modelValue=false onUpdate:modelValue=fn title="预览"  ... > 
  at <AsyncComponentWrapper modelValue=false onUpdate:modelValue=fn title="预览"  ... > 
  at <Index ref_key="previewRef" ref=Ref< Proxy(Object) {__v_skip: true, handleOpen: ƒ} > hide-confirm=false > 
  at <Designer >

经排查,出现异常的是内置modal组件调用monacoEditor组件时候,monacoEditor对象创建的异常:

Uncaught (in promise) TypeError: factory.create is not a function
    at createTextBuffer (textModel.js:69:20)
    at new _a7 (textModel.js:184:44)
    at _InstantiationService._createInstance (instantiationService.js:130:24)
    at _InstantiationService.createInstance (instantiationService.js:101:27)
    at _a8._createModelData (modelService.js:252:50)
    at _a8.createModel (modelService.js:296:30)
    at doCreateModel (standaloneCodeEditor.js:329:25)
    at createTextModel (standaloneCodeEditor.js:323:12)
    at new StandaloneEditor2 (standaloneCodeEditor.js:195:21)
    at _InstantiationService._createInstance (instantiationService.js:130:24)

根据源码跟踪,定位到可能由于tdesign的dialog组件是使用包装。
但当我把自定义的modal对象简化到极致,只有div+slot,同样报这个error。请问这个错误是什么原因引起的?
最简化的自定义对话框代码(template段)如下:

<script ...>
/// 参考源码 packages/ui/antd/modal/modal.vue 调整
</script>
<template>
  <div class="epic-modal-main epic-scoped">
    <slot>
      <slot name="edit-node">
        <slot v-for="item in children" name="node" :component-schema="item"></slot>
      </slot>
    </slot>
  </div>
</template>

同时发现,在使用Dialog组件仅使用其visible属性进行传值,且slot参照其他容器组件编写,不报error了,但对话框不能关闭。debug源码发现是在 packages/core/src/components/designer/src/modules/editContainer/previewJson.vue 文件中的handleOpen方法内,因monacoEditor创建不成功导致多次“重新打开”对话框的逻辑生效。请问这段slots编写是否有误,请指出,谢谢。

export default defineComponent({
 // props,emits
  setup: (props, {slots, emit}) => {
      return () => {
        return h(Dialog, getComponentProps.value, {
          default: () => {
            console.log(123)
            return renderSlot(slots, 'edit-node', {}, () =>
              children.value.map((subcomponentSchema: ComponentSchema) =>
                renderSlot(slots, 'node', {
                  componentSchema: subcomponentSchema,
                }),
              ),
            )
          },
      })
    }
  }
})

script段代码参考ui插件中antd部分,针对tdesign的Dialog进行调整。

项目使用的组件版本:

"epic-designer": "^1.0.1"
"vue": "3.5.14"
"tdesign-vue-next": "1.13.0"

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions