2、模块

//包含一个按钮 和 一个内置页的组件
const defaultSetting = {
  name: "testCmp",
  title: "测试组件",
  inlinePages:[
    {
      name: "INLINE_PAGE_A",
      title: "这是内置页",
      style: {},
      cover:
        "https://static.h5no1.com/rp/plugin/assets/a19e096f-89b8-4f15-8187-09db7a3c86f0",
    }
  ],
  elements:[
     {
      key: "BTN_A",
      name: "按钮",
      type: "btn",
      label: "确定",
      style: {
        position: "absolute",
        left: 42,
        top: 353,
        width: 235,
        height: 39,
        backgroundColor: "rgba(224,47,36,1)",
        borderRadius: 20,
        fontSize: 15,
        fontWeight: 600,
        color: "rgba(255,255,255,1)",
      },
      parentName: "testCmp",
    },
  ],
  cover:"https://static.h5no1.com/rp/plugin/assets/85becc30-ccb4-41b2-ad75-9bfa9447e587",
  style: {
    width: 293,
    height: 408,
    backgroundColor: "#fff",
  },
  hasComponentSetting: true,
};

import {
  ComponentMainModule,
  registryComponentMain,
} from "@fe-plugin/common/lib/component-main";
// main模块创建
class MainModule extends CompoentMainModule {
  //返回值可控制组件是否可见（不提供此方法组件默认显示）
  static async getVisible(config) {
    return true;
  }

  //解析配置(不提供此方法配置解析为初始化设置)
  parseConfig(data) {
    const config = super.parseConfig(data);
    //在此可对默认配置进行额外操作
    return config;
  }

  // 渲染组件
  render() {
    super.render();
    //直接使用config配置
    console.log(this.config);
    //进行渲染
  }
}

//将渲染的组件登录到编辑器
export default registryComponentMain("组件名称", MainModule);

import {
  ComponentTemplateModule,
  registryComponentTemplate,
} from "@fe-plugin/common/lib/component-template";
import { createModel } from "@fe-plugin/components/lib/templates/models";
import defaultSetting from "app/default-setting";


//创建模块
class TemplateModule extends ComponentTemplateModule {
  // 获取配置(必须提供此静态方法，否则编辑器无法获取到配置)
  // 编辑器在加载组件的时候会调用此方法
  static getDefaultSetting() {
    const data = {
      ...defaultSetting,
      elements: [],
    };
    defaultSetting.elements.forEach((el) => {
      const model = createModel(el.type, el);
      data.elements.push(model);
    });
    return data;
  }

  //解析配置(不提供此方法则返回默认配置)
  parseConfig(data) {
    const config = super.parseConfig(data);
    //在此可对默认配置进行额外操作
    return config;
  }

  // 创建渲染 入口
  render() {
    super.render();
    // 使用config
    console.log(this.config);
    //进行渲染
  }
}

export default registryComponentTemplate("组件名称", TemplateModule);

import {
  ComponentSettingModule,
  registryComponentSetting,
} from "@fe-plugin/common/lib/component-setting";

//setting模块创建
class SettingModule extends ComponentSettingModule {
  //解析配置(不提供此方法则返回默认配置)
  parseConfig(data) {
    const config = super.parseConfig(data);
    //在此可对默认配置进行额外操作
    return config;
  }

  // 渲染编辑器右侧组件设置面板
  renderCmp(container, componentInfo, onChange) {
    super.renderCmp(container, componentInfo, onChange);
    //进行渲染
  }

  // 校验设置是否通过(不提供此方法默认校验通过)
  validate() {
    this.setShowValidErr();
    if (!this.formPass) return false;
    const componentInfo = getComponentInfo(this.config);
    // 同步组件setting里的配置，在编辑器中再次打开设置弹窗的时候，可以直接回显
    this.config.set("componentInfo.props", this.formValue);
    return { ...componentInfo, props: this.formValue };
  }
}

//进行设置 注册
export default registryComponentSetting("组件名称", SettingModule);