...
元素的配置分为元素的公用配置信息，私有元素配置。
1、元素配置列表
...
import ElementTypes from "@fe-plugin/components/lib/constants/element-types";
...
按钮
...
1、元素公用配置信息
属性 | 说明 | 类型 |
|---|---|---|
name | 元素名称，可供编辑器显示用 | string |
key | 可编辑元素的英文标识，可用于代码编程 | string |
type | 可编辑元素类型 | ElementTypes |
style | 元素的样式 | Object | undefined |
isDisableControllable | 是否可控制显示或隐藏 | boolean | undefined |
parentName | 元素所属的组件名或内置页名 | string | string[] | undefined |
isScale | 是否可以缩放大小 | boolean | undefined |
isDisableClick | 是否有点击事件 | boolean | undefined |
isDisableDraggable | 是否可拖拽 | boolean | undefined |
isDisableRotable | 是否可旋转 | boolean | undefined |
isDisableImageReplaceable | 图片是否可替换，一些占位图是不能替换的 | boolean | undefined |
isDisableTextReplaceable | 文本是否可替换do | boolean | undefined |
isDisableAnimation | 是否禁用动画 | boolean | undefined |
isDisableTextBtn | 是否禁用文字按钮，即仅图片按钮（仅对按钮元素有效） | boolean | undefined |
isDisableFontSetting | 是否禁用字体设置（有些动态来源的文本内容，如微信昵称，无法切割字体，需要禁用掉组件面板上的字体设置） | boolean | undefined |
anchorsType | 编辑状态锚点的类型：为空则表示没有锚点，不能改变大小 'nw n ne e se s sw w' 代表组件编辑框的8个锚点 | string | undefined |
hiddenWhenNoNickname | 当获取不到微信昵称时，是否隐藏默认文字（仅对微信昵称元素有效） | boolean | undefined |
2、元素私有配置信息
| 元素名称枚举 | ||||||||||||||||||||||
import ElementTypes from "@fe-plugin/components/lib/constants/element-types"; | ||||||||||||||||||||||
| 元素名称 | 私有元素配置 | |||||||||||||||||||||
按钮 ElementTypes.BTN |
| |||||||||||||||||||||
文本 ElementTypes.TEXT | ||||||||||||||||||||||
图片 ElementTypes.IMAGE | ||||||||||||||||||||||
表单选项 ElementTypes.CHOOSE | ||||||||||||||||||||||
表单输入框 ElementTypes.INPUT | ||||||||||||||||||||||
表单文本域 ElementTypes.TEXTAREA | ||||||||||||||||||||||
表单提交 ElementTypes.SUBMIT | ||||||||||||||||||||||
文件上上传 ElementTypes.FILEUPLOADER | ||||||||||||||||||||||
表单下拉框 ElementTypes.SELECT | ||||||||||||||||||||||
弹窗 ElementTypes.DIAGLOG | ||||||||||||||||||||||
形状 ElementTypes.SHAPE | ||||||||||||||||||||||
微信头像 ElementTypes.WXPORTRAIT | ||||||||||||||||||||||
微信昵称 ElementTypes.WXNICKNAME | ||||||||||||||||||||||
default-setting 配置示例
| 代码块 | ||||
|---|---|---|---|---|
| ||||
//包含一个按钮 和 一个内置页的组件
const defaultSetting = {
name: "testCmp",
title: "测试组件",
inlinePages:[
{
name: "INLINE_PAGE_A",
title: "这是内置页",
style: {},
cover:
"https://static.h5no1.com/rp/plugin/assets/a19e096f-89b8-4f15-8187-09db7a3c86f0",
}
],
elements:[
{
key: "BTN_A",
name: "按钮",
type: "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: "testCmp",
},
],
cover:"https://static.h5no1.com/rp/plugin/assets/85becc30-ccb4-41b2-ad75-9bfa9447e587",
style: {
width: 293,
height: 408,
backgroundColor: "#fff",
},
hasComponentSetting: true,
}; |
...