可视化设计组件插槽

FcDesigner 支持对组件插槽内容区域进行可视化拖拽。这样，开发者可以更加灵活地在插槽中放置和配置组件，从而增强表单设计的自定义能力。

示例

一个有多个插槽的自定义组件

<template>
  <div>
      <p>默认插槽</p>
      <div>
          <slot></slot>
      </div>
      <p>content插槽</p>
      <div>
          <slot name="content"></slot>
      </div>
      <p>footer插槽</p>
      <div>
          <slot name="footer"></slot>
      </div>
  </div>
</template>
<script>
export default {
    name: 'ShopForm',
    props:{
      disabled: Boolean
    }
}
</script>

在上述组件中，定义了三个插槽：

• default 插槽
• content 插槽
• footer 插槽

定义拖拽规则

通过 slot 字段配置需要支持拖拽的插槽区域：

const ShopFormRule = {
    //插入菜单位置
    menu: 'subform',
    //图标
    icon: 'icon-subform',
    //名称
    label: '商品表单',
    //id,唯一!
    name: 'ShopForm',
    //是否可以操作, 需要支持拖拽所以为true
    mask: false,
    //配置插槽
    slot: [
        //支持默认插槽内拖入组件
        'default',
        //支持content插槽内拖入组件, 拖拽区域固定为子表单容器
        {
            name: 'content',
            //子表单组件的name
            type: 'row'
        },
        //支持footer插槽内拖入组件
        'content',
    ]
    //定义组件的渲染规则
    rule({t}) {
      	//自定义组件的生成规则
        return {
            type: 'ShopForm',
            props: {},
            children: []
        };
    },
  	//自定义组件的属性配置
    props() {
        return [
            {
                type: 'switch',
                field: 'disabled',
                title: '是否禁用'
            }
        ];
    }
};

在 slot 配置中，type 字段用于定义插槽区域的容器组件，默认为拖拽容器。您可以自定义 type 为 row 或其他类型，以匹配您的实际需求。

挂载组件和拖拽规则

//挂载组件
FcDesigner.addCompoent(ShopForm);
//挂载拖拽规则
this.$refs.designer.addComponent(ShopFormRule);

通过上述步骤，您可以将自定义组件和拖拽规则添加到设计器中，实现对插槽区域内容的可视化拖拽。