版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

元素名称枚举

import ElementTypes from "@fe-plugin/components/lib/constants/element-types";

元素名称元素私有配置

按钮

ElementTypes.BTN



属性说明类型

btnType

按钮类型,文本按钮,图片按钮"text" | "image"
label按钮名称(文本按钮)string

normalImage

按钮静态图片(图片按钮)string

activeImage

按钮激活状态图片(图片按钮)string

defaultNormalImage

按钮静态默认图片(图片按钮)string

defaultActiveImage

按钮激活状态默认图片(图片按钮)

string


文本

ElementTypes.TEXT


属性说明类型
text文本文字string

innerText

纯文本内容

此值是剥离html标签后的纯文本内容

(将div和p标签对解析为\n换行,br标签也解析为\n换行)

string

isRichText

是否是富文本

boolean


图片

ElementTypes.IMAGE


属性说明类型
src图片地址string


形状

ElementTypes.SHAPE


属性说明类型
src

矢量形状资源地址

string

paths

SVG路径

string[]

fills

SVG填充颜色

string[]


弹窗

ElementTypes.DIAGLOG

暂无私有属性

表单文件上上传

ElementTypes.FILEUPLOADER


属性说明类型
label

表单元素可见标签文本

string
required是否是必填项boolean

tips

提示文案

string

maxSize

上传文件大小最大限制number

maxCount

上传文件个数最大限制number

fileType

上传文件类型

"IMAGE" | "MUSIC" | "VIDEO" | "FILE"


表单文本域

ElementTypes.TEXTAREA


属性说明类型
label

表单元素可见标签文本

string
required是否是必填项boolean

tips

提示文案

string

maxLength

文本最大长度number

value

文本值string


表单单选

ElementTypes.CHOOSE


属性说明类型
label

表单元素可见标签文本

string


表单输入框

ElementTypes.INPUT


属性说明类型
label

表单元素可见标签文本

string
required是否是必填项boolean

tips

提示文案

string

maxLength

文本最大长度number

value

文本值string
inputType文本类型

"text" | "name" | "tel" | "email" | "verify"

name-姓名

tel-手机

email-邮箱

text-普通文本

verify-手机短信验证

isDisableInputTypeToggle

isDisableInputTypeToggle

boolean


表单提交

ElementTypes.SUBMIT


属性说明类型
label

表单元素可见标签文本

string


表单下拉框

ElementTypes.SELECT


属性说明类型
label

表单元素可见标签文本

string



2、element 配置示例


代码块
titleelement配置
linenumberstrue
//包含一个按钮 和 一个内置页的组件
const defaultSetting file = {
  name: "testCmp",
  title: "测试组件",
  inlinePages:[
    {
      name: "INLINE_PAGE_A",
      title: "这是内置页",
      style: {},
      cover:
        "https://static.h5no1.com/rp/plugin/assets/a19e096f-89b8-4f15-8187-09db7a3c86f0",
    }
  ],
  elements:[
     {
   app/default-setting/element.js


import * as ELEMENT from "constants/element-keys";
import * as INLINE from "constants/inline-pages-names";
import ElementTypes from "@fe-plugin/components/lib/constants/element-types";


//导出一个包含按钮元素、图片元素的配置
export default [
{
    key: "ELEMENT.BTN_A",
      name: "按钮这是组件中的按钮",
      type: "btn"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:  parentNameELEMENT.IMAGE_A,
    name: "testCmp测试图片",
    } type: ElementTypes.IMAGE,
    ],
  cover:"https://static.h5no1.com/rp/plugin/assets/85becc30-ccb4-41b2-ad75-9bfa9447e587",
  style: {
 text: "测试图片",
    style: {
      position: "absolute",
      left: 75,
      top: 123,
      width: 293169,
      height: 408 145,
    },
    backgroundColorparentName: "#fff组件名称",
  },
  hasComponentSetting: true,
};src: "https://static.h5no1.com/rp/plugin/assets/484a0326-0091-433c-8133-d5989b7b588d",
  },
]


1、ComponentDefaultSetting  默认设置

...