Skip to content

替换底层组件

components 用于全局替换组件库内部依赖的 Ant Design Vue 基础组件,适合统一埋点、主题、可访问性或企业级二次封装。它与注册业务字段不同:替换 Input 会影响所有 Input Schema。

安装时替换

ts
app.use(SuperFormPlugin, {
  components: {
    Input: ProjectInput,
    Table: ProjectTable,
    Modal: ProjectModal,
  },
});

可替换名称

分类名称
布局与反馈DividerTooltipSpace
表单FormItemInputGroup
按钮/菜单ButtonMenuItemMenuDropdown
容器CardListItemListModalTable
Tabs/CollapseTabsTabPaneCollapseCollapsePanel
文本输入InputInputSearchInputNumber
选择SelectTreeSelectSwitch
日期时间DatePickerRangePickerTimePicker
单复选RadioRadioButtonRadioGroupCheckboxCheckboxGroup

名称区分大小写,并表示组件库内部槽位,不等同于 Schema type

包装组件必须保持的契约

vue
<template>
  <AInput
    v-bind="$attrs"
    :value="value"
    @update:value="emit('update:value', $event)"
  >
    <template v-for="(_, name) in $slots" #[name]="slotProps">
      <slot :name="name" v-bind="slotProps || {}" />
    </template>
  </AInput>
</template>
  • 接收对应 Ant Design Vue props 与 HTML attributes。
  • 透传默认和具名插槽。
  • 保持原 v-model 名称与事件,例如 value / update:value
  • 不改变 changesearchselect 等事件参数。
  • 透传 ref 或暴露原组件关键方法。
  • Form、Table、Modal 尤其要保留校验、滚动、关闭等实例能力。

替换与扩展字段对比

需求入口
所有 Input 自动埋点components.Input
所有 Table 统一空状态components.Table
单个页面自定义一次输入InputSlot
多页面复用“用户选择器”registerComponent 注册 Ext*
只改一个 Schema 的底层 props当前节点 attrs

替换范围很大,建议为包装组件写 v-model、事件、插槽和 ref 冒烟测试。业务字段扩展见注册自定义字段

基于 MIT 许可发布