...
| 代码块 | ||||
|---|---|---|---|---|
| ||||
//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",
},
] |
1、ComponentDefaultSetting 默认设置
2、inline-page内置页配置
1、ComponentInlinePage 内置页配置
元素 |
|---|
说明 | 类型 | |
|---|---|---|
name |
内置页英文名 | string |
title |
内置页标题 | string |
cover |
内置页封面图 | string |
style |
内置页样式 | Object | undefined |
anchorsType |
组件内置页列表
ComponentInlinePage[]
elements
组件内部可编辑元素列表，能够被编辑器识别的原子组件
ComponentElementModel[]
hasComponentSetting
组件是否有需要在编辑器右侧设置面板中加载的 setting 配置
boolean | undefined
componentBgVisible
组件是否支持隐藏背景，当为false时才隐藏背景，undefined不隐藏
isDisableClientRect
是否可以设置宽高(编辑器会禁止自适应宽高)
boolean | undefined
3、BaseCmp 可编辑元素设置
4、ComponentInlinePage 内置页设置
编辑状态锚点的类型：为空则表示没有锚点，不能改变大小 'nw n ne e se s sw w' 代表组件编辑框的8个锚点 | string | undefined | |
height | 内置页高度 | number | undefined |
2、内置页配置示例
| 代码块 | ||||
|---|---|---|---|---|
| ||||
//file = app/default-setting/element.js
import * as INLINE from "constants/inline-pages-names";
import ElementTypes from "@fe-plugin/components/lib/constants/element-types";
//导出一个内置页配置
export default [
{
name: INLINE.INLINE_A,
title: "这是内置页",
style: {},
cover:
"https://static.h5no1.com/rp/plugin/assets/a19e096f-89b8-4f15-8187-09db7a3c86f0",
},
] |
3、default-setting 默认设置
1、ComponentDefaultSetting 默认设置信息
属性 |
|---|
说明 | 类型 | |
|---|---|---|
name |
组件英文名，唯一 | string |
title |
组件中文描述 | string |
cover |
组件封面图 | string |
style |
组件自身的样式 | Object | undefined |
anchorsType
编辑状态锚点的类型：为空则表示没有锚点，不能改变大小
'nw n ne e se s sw w' 代表组件编辑框的8个锚点
string | undefined
height
内置页高度
number | undefined
...
概述：
渲染模块中会有对应的render方法将组件逻辑渲染出来，最终注册到编辑器、渲染引擎使用。但组件的构建需要依赖default-setting、用户信息等数据支持，所以在构建组件之前需要创建一个上下文，提供此类数据给组件使用。
1、DependencyContext 上下文
...
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; |
注意:
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方法进行上下文关联