Skip to content

自定义分组+自定义组件,按照官方文档示例来,报错 Uncaught TypeError: Cannot read properties of undefined (reading 'push') #209

@cdlaiqi

Description

@cdlaiqi

form-create-designer版本:v3.3.0

实现代码:
`<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
import { ref, onMounted } from 'vue';
import FcDesigner from '@form-create/designer'
import FcTitle from './components/FcTitle.vue'

// 可以在此处获取设计器实例或进行其他操作
const designer = ref(null);

const titleDragRule = {
menu: 'shop',
icon: 'icon-title',
label: '标题',
//唯一 ID
name: 'custom-title',
//组件可以配置的事件
event: ['click'],
rule() {
//组件的渲染规则
return {
//组件的名称, 与上一步是对应
type: 'FcTitle',
props: {
title: '自定义标题',
},
};
},
props() {
//组件右侧的配置项,与组件中的 props 对应
return [
{ type: 'input', field: 'title', title: '标题' },
{
type: 'select',
field: 'size',
title: '尺寸',
//默认值
value: 'H2',
options: [1, 2, 3, 4, 5, 6].map(k => {
return { label: 'H' + k, value: 'h' + k };
})
}, {
type: 'select',
field: 'align',
title: '位置',
options: [
{ label: '左侧', value: 'left' },
{ label: '居中', value: 'center' },
{ label: '右侧', value: 'right' }
]
}];
}
};

onMounted(() => {
FcDesigner.component('FcTitle', FcTitle);

designer.value.addMenu({
name: 'shop',
title: '业务组件',
before: true,
});

// 挂载拖拽规则
designer.value.addComponent(titleDragRule);
});`

报错:
Uncaught TypeError: Cannot read properties of undefined (reading 'push') at index.es.js:17484:34 at wrappedFn (reactivity.esm-bundler.js:878:19) at Array.forEach (<anonymous>) at apply (reactivity.esm-bundler.js:886:27) at Proxy.forEach (reactivity.esm-bundler.js:794:12) at Object.appendMenuItem (index.es.js:17483:20) at Proxy.addComponent (index.es.js:17498:55) at App.vue:64:18 at runtime-core.esm-bundler.js:2850:40 at callWithErrorHandling (runtime-core.esm-bundler.js:199:19)

分析源码:
在当前源码实现里,appendMenuItem 直接对分组的 list 执行 push,默认内置菜单是有 list: [] 的;自定义分组如果没提供 list 就会报错。这是接口约定在文档里没有说明清楚。

文档示例都是把组件挂到已有分组(如 aide、main)上,所以没有强调“自定义分组必须带 list: []”。

建议改进:
在源码里做防御性处理,避免外部遗漏时崩溃:
if (v.name === name) { // 兜底:自定义分组未传 list 时自动初始化 v.list = v.list || []; v.list.push(...(Array.isArray(item) ? item : [item])); }

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