页面历史记录

//包含一个按钮file = 和 一个内置页的组件
const defaultSetting = {
  name: "testCmp",
  title: "测试组件",
  inlinePages:[
    {
   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: "INLINE_PAGE_A这是组件中的按钮",
    type: ElementTypes.BTN,
    titlelabel: "这是内置页非常好",
      style: {},
      coverposition: "absolute",
        "https://static.h5no1.com/rp/plugin/assets/a19e096f-89b8-4f15-8187-09db7a3c86f0"left: 42,
    }
  ]top: 353,
  elements:[
    width: {235,
      keyheight: "BTN_A"39,
      namebackgroundColor: "按钮rgba(224,47,36,1)",
      typeborderRadius: "btn"20,
      labelfontSize: "确定"15,
      stylefontWeight: {600,
        positioncolor: "absolutergba(255,255,255,1)",
    },
    leftparentName: 42"组件名称",
  },
  {
    topkey: 353ELEMENT.IMAGE_A,
    name: "测试图片",
    widthtype: 235ElementTypes.IMAGE,
    text: "测试图片",
    heightstyle: 39,{
        backgroundColorposition: "rgba(224,47,36,1)absolute",
        borderRadiusleft: 2075,
        fontSizetop: 15123,
        fontWeightwidth: 600169,
        colorheight: "rgba(255,255,255,1)",
  145,
    },
      parentName: "testCmp组件名称",
    },
  ],
  cover:src: "https://static.h5no1.com/rp/plugin/assets/85becc30484a0326-ccb40091-41b2433c-ad758133-9bfa9447e587d5989b7b588d",
  style: {
    width: 293,},
]

      "https://static.h5no1.com/rp/plugin/assets/a19e096f-89b8-4f15-8187-09db7a3c86f0",
  },
]

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


import inlinePages from "app/default-settings/inline-pages";
import elements from "app/default-settings/element";

//组件命名
const ComponentName = "testCmp";

//默认设置
const defaultSetting = {
  name: ComponentName,
  title: "测试组件",
  //导入内置页设置
  inlinePages,
  //导入元素设置
  elements,
  cover:
    "https://static.h5no1.com/rp/plugin/assets/85becc30-ccb4-41b2-ad75-9bfa9447e587",
  style: {
    width: 293,
    height: 408,
    backgroundColor: "#fff",
  },
  hasComponentSetting: true,
  hasPluginSetting: false,
  // 组件独有设置(在setting模块中使用)
  cmpSettingData: {
    isAlertExist: 0,
    alertText: "这是独有设置中的属性",
  },
};

export default defaultSetting;

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