扩展组件

添加新组件

当前版本已内置了一批常用组件，供您在设计器中直接使用。如果您需要二次开发表单设计器、扩充更多内置组件，可以按照以下步骤进行：

1. 找到组件定义路径：...\src\designer\config\base，该目录存放了所有内置组件的定义。

2. 在该目录下为您的新组件创建一个子目录，例如：MyInput。

3. 参考 Input 目录下的文件结构，一般包含：

   • default.ts：组件初始配置
   • define.ts：组件定义入口
   • configSchemas.tsx：基本属性可配置项
   • eventSchemas.tsx：事件属性可配置项
   • slotSchemas.tsx：插槽属性可配置项

4. 在新组件的 define.ts 中，确保 key 和 componentName 不与其他组件重复：

const define: DesignComItem = {
  menuRootKey: 'inputer',
  menuItem: {
    order: 5,
    label: '新输入框',
    desc: '通过鼠标或键盘输入字符',
    icon: 'designer:input',
    key: 'MyInput',
    componentName: 'MyInput',
    defaultModel: defaultModel
  },
  enableChanges: [],
  autoInit: false,
  configSchemas: configSchemas,
  eventSchemas: eventSchemas,
  slotSchemas: slotSchemas
}

5. 在设计器项目中将您的新组件注册到画布表单，使其在设计器画布中可以被正常渲染与预览。

通常会在 imports.ts（或项目中约定的导入配置文件）中注册组件：

import { MyInput } from '@/components/MyInput'
import type { FormImportItem } from 'advanced-ele-ui'

const formImports: FormImportItem[] = [
  {
    name: 'MyInput',
    component: MyInput
  }
]

6. 同时，业务侧渲染端也需要具备该组件的实现。在业务应用的 main.ts 中，通过 formImports 属性注册自定义组件：

import AdvancedEleUI from 'advanced-ele-ui'
import 'advanced-ele-ui/dist/style.css'
import { MyInput } from '@/components/MyInput'

app.use(AdvancedEleUI, {
  locale: 'zh-CN',
  formImports: [
    {
      name: 'MyInput',
      component: MyInput
    }
  ]
})

注意事项

1. 自定义组件务必支持 modelValue 属性，并通过 update:modelValue 事件实现双向绑定。
2. 组件事件建议仅暴露一个参数，例如：emit('change', val)，避免使用 emit('change', val1, val2) 这类多参数形式，以便在表单设计器内统一处理与映射。