Skip to content

widgets 与 fields

这两个入口分别解决“如何整理物料”和“如何接入字段组件”。

需要实现容器物料时,先阅读 外部容器物料;本页说明相关 package 的公开 API。

先看一个最小示例:

ts
import { buildComponentMap, getWidgetMetas } from '@dragcraft/widgets'
import { createAntDesignVueFields } from '@dragcraft/fields-ant-design-vue'

const designerOptions = {
  widgetMetas: getWidgetMetas(myWidgetDefinitions),
  componentMap: buildComponentMap(myWidgetDefinitions),
  fieldComponentMap: createAntDesignVueFields(),
}

上面的三行刚好对应标准接入时最常见的三份输入。@dragcraft/widgets 更偏协议和整理工具,用来整理左侧物料和画布组件映射;@dragcraft/fields-ant-design-vue 则直接提供一份可用的 Ant Design Vue 字段映射,给右侧表单使用。

物料协议、行为约束和展示元数据见 自定义物料;字段 adapter 的绑定与联动见 配置表单与字段

容器物料 API

defineContainerWidget() 保留包含 ContainerDefinition 的 meta 推断。外部 meta 注册 variants、regions、constraints、material-owned migration 和 renderer drop adapters;组件和业务 CSS 持有全部 flex、grid、异形 DOM 与插入 geometry,framework themes 只提供 interaction-state 样式。

属性表单使用 bindTo: { scope: 'container', path: 'variant' } 编辑当前 variant。当前协议中容器只能存在于 root.children,regions 只拥有普通子节点;嵌套容器被拒绝,schema version 保持不变。