...
| 代码块 | ||||
|---|---|---|---|---|
| ||||
//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",
},
] |
2、inline-page内置页配置
1、ComponentInlinePage 内置页配置
元素 | 说明 | 类型 |
|---|---|---|
name | 内置页英文名 | string |
title | 内置页标题 | string |
cover | 内置页封面图 | string |
style | 内置页样式 | Object | undefined |
anchorsType | 编辑状态锚点的类型：为空则表示没有锚点，不能改变大小 |
...
'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 |
inlinePages | 组件内置页列表 | ComponentInlinePage[] |
elements | 组件内部可编辑元素列表，能够被编辑器识别的原子组件 | ComponentElementModel[] |
hasComponentSetting | 组件是否有需要在编辑器右侧设置面板中加载的 setting 配置 | boolean | undefined |
componentBgVisible | 组件是否支持隐藏背景，当为false时才隐藏背景，undefined不隐藏 | boolean | undefined |
isDisableClientRect | 是否可以设置宽高(编辑器会禁止自适应宽高) | boolean | undefined |
3、BaseCmp 可编辑元素设置
4、ComponentInlinePage 内置页设置
...
元素
...
说明
...
类型
...
name
...
内置页英文名
...
string
...
title
...
内置页标题
...
string
...
cover
...
内置页封面图
...
string
...
style
...
内置页样式
...
Object | undefined
...
anchorsType
...
编辑状态锚点的类型：为空则表示没有锚点，不能改变大小
'nw n ne e se s sw w' 代表组件编辑框的8个锚点
...
string | 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: "这里是默认设置的aler字符",
},
};
export default defaultSetting; |
...
height
...
内置页高度
...
1、上下文
| 锚 | ||||
|---|---|---|---|---|
|
概述：
渲染模块中会有对应的render方法将组件逻辑渲染出来，最终注册到编辑器、渲染引擎使用。但组件的构建需要依赖default-setting、用户信息等数据支持，所以在构建组件之前需要创建一个上下文，提供此类数据给组件使用。
...