...
属性 | 说明 | 类型 |
|---|---|---|
name | 组件英文名，唯一 | string |
title | 组件中文描述 | string |
cover | 组件封面图 | string |
style | 组件自身的样式 | Object | undefined |
inlinePages | 组件内置页列表 | ComponentInlinePage[] |
elements | 组件内部可编辑元素列表，能够被编辑器识别的原子组件 | ComponentElementModel[] |
hasComponentSetting | 组件是否有需要在编辑器右侧设置面板中加载的 setting 配置 | boolean | undefined |
componentBgVisible | 组件是否支持隐藏背景，当为false时才隐藏背景，undefined不隐藏 | boolean | undefined |
isDisableClientRect | 是否可以设置宽高(编辑器会禁止自适应宽高) | boolean | undefined |
2、默认配置示例
| 代码块 | ||||
|---|---|---|---|---|
| ||||
//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; |
...
...
概述：
渲染模块中会有对应的render方法将组件逻辑渲染出来，最终注册到编辑器、渲染引擎使用。但组件的构建需要依赖default-setting、用户信息等数据支持，所以在构建组件之前需要创建一个上下文，提供此类数据给组件使用。
1、DependencyContext 上下文
...
注意:
DependencyContext只能提供给template、setting模块相关组件使用(main模块为PReact构建，所以无法正常调用)。
template模块中，还需要对可编辑组件，和可编辑元素进行对应的上下文注入。
2、withDependencyContext 高阶组件
main模块使用withDependencyContext方法进行上下文关联
3、示例
1、上下文的注入可查看各个模块创建详细示例，
2、组件中上下文的获取可查看各个模块组件创建详细示例
2、main模块
| 锚 | ||||
|---|---|---|---|---|
|
main模块负责组件H5端的渲染。
...
使用此方法关联模块上下文，使模块中组件能够获取到上下文环境(上下文点击跳转上下文介绍)。
5、代码示例：
| 代码块 | ||||||
|---|---|---|---|---|---|---|
| ||||||
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 {
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); |
4、上下文
| 锚 | ||||
|---|---|---|---|---|
|
概述：
渲染模块中会有对应的render方法将组件逻辑渲染出来，最终注册到编辑器、渲染引擎使用。但组件的构建需要依赖default-setting、用户信息等数据支持，所以在构建组件之前需要创建一个上下文，提供此类数据给组件使用。
1、DependencyContext 上下文
| 上下文 | 创建 | 说明 |
|---|---|---|
| DependencyContext | React.createContext | 组件配置上下文 |
注意:
DependencyContext只能提供给template、setting模块相关组件使用(main模块为PReact构建，所以无法正常调用)。
template模块中，还需要对可编辑组件，和可编辑元素进行对应的上下文注入。
2、withDependencyContext 高阶组件
main模块使用withDependencyContext方法进行上下文关联