2、模块

//file =  app/default-setting/element.js


import * as ELEMENT from "constants/element-keys";
import ElementTypes from "@fe-plugin/components/lib/constants/element-types";


//导出一个包含按钮元素、图片元素的配置
export default [
{
    key: ELEMENT.BTN_A,
    name: "这是组件中的按钮",
    type: ElementTypes.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: "组件名称",
  },
  {
    key: ELEMENT.IMAGE_A,
    name: "测试图片",
    type: ElementTypes.IMAGE,
    text: "测试图片",
    style: {
      position: "absolute",
      left: 75,
      top: 123,
      width: 169,
      height: 145,
    },
    parentName: "组件名称",
    src: "https://static.h5no1.com/rp/plugin/assets/484a0326-0091-433c-8133-d5989b7b588d",
  },
]

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);