-
Notifications
You must be signed in to change notification settings - Fork 105
Open
Description
我想自行接入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
Labels
No labels