属性设置器_多端低代码开发平台魔笔(Mobi)-阿里云帮助中心

文本介绍平台提供的属性设置器。

text

配置一个静态的字符串属性。

属性配置示例：

      {
        name: 'text',
        title: '按钮文字',
        defaultValue: '按钮',
        setter: {
          type: 'text',
          props: {
          },
        },
      },

UI效果：

配置参数：

字段	类型	含义	备注
placeholder	string	输入框的提示文字

模型和Props参数类型：string。

number

配置一个静态的数字属性。

属性配置示例：

      {
        name: 'fontSize',
        title: '文字大小',
        display: 'block',
        defaultValue: 14,
        setter: {
          type: 'number',
          props: {
            min: 0,
          },
        },
      },

UI效果：

配置参数：

字段	类型	含义	备注
placeholder	string	输入框的提示文字
min	number	允许设置的最小值
max	number	允许设置的最大值
step	number	点击箭头变化的步长	缺省：1
type	'range'	交互类型	缺省：数值选择框。 range：区段选择器。

模型和Props参数类型：number。

bool

配置一个静态的布尔属性。

属性配置示例：

      {
        name: 'disabled',
        title: '禁止点击',
        display: 'inline',
        defaultValue: false,
        setter: {
          type: 'bool',
          props: {},
        },
      },

UI效果：

配置参数：无

模型和Props参数类型：boolean。

choice

快速从可枚举值中配置属性。

属性配置示例：

      {
        name: 'type',
        title: '按钮类型',
        display: 'block',
        defaultValue: 'primary',
        setter: {
          type: 'choice',
          props: {
            options: [
              { value: 'primary', tip: '主要', title: '主要' },
              { value: 'secondary', tip: '次要', title: '次要' },
              { value: 'noborder', tip: '无边框', title: '无边框' },
              { value: 'customize', tip: '自定义', title: '自定义' },
            ],
          },
        },
      },

UI效果：

配置参数：

字段	类型	含义	备注
options	Array	选项配置	value：此选项对应的属性值，类型支持： boolean number string object（仅包含 boolean、number、string 类型的字段） Array（由以上四种类型构成元素） title：此选项的展示名称。 tip：此选项的提示内容。

模型和Props参数类型：由options中配置的value决定。

select

通过下拉选择从可枚举值中配置属性。

属性配置示例：

    {
      name: 'flexDirection',
      title: '布局方向',
      display: 'block',
      defaultValue: 'column',
      setter: {
        type: 'select',
        props: {
          options: [
            { value: 'row', title: '水平' },
            { value: 'column', title: '垂直' },
          ],
        },
      },
    },

UI效果：

配置参数：

字段	类型	含义	备注
options	Array	选项配置	value：此选项对应的属性值，类型支持： boolean number string object（仅包含 boolean、number、string 类型的字段） Array（由以上四种类型构成元素） title：此选项的展示名称

模型和Props参数类型：由options中配置的value决定。

new-size-setter

配置一个尺寸属性。一般用于宽高等属性设置。

属性配置示例：

    {
      name: 'width',
      title: '宽度',
      defaultValue: {
        value: 100,
        unit: '%',
      },
      setter: {
        type: 'new-size-setter',
        props: {
          autoWidth: true,
        },
      },
    },

UI效果：

配置参数：

字段	类型	含义	备注
autoWidth	boolean	允许配置自适应	缺省 false。宽高都可以使用。
viewPort	boolean	允许配置视口高度	缺省 false。一般用于高度。
onlyPixel	boolean	仅允许配置像素值	缺省 false。
noMin	boolean	是否有最小值，像素值最小为0，其它为1	缺省 false。
unset	boolean	允许配置无	即选择不配置此属性。

模型数据类型：SizeSchemaData。

Props参数类型：Size。

color

配置一个颜色属性。用字符串表示。

属性配置示例：

    {
      name: 'backgroundColor',
      title: '背景颜色',
      display: 'block',
      setter: {
        type: 'color',
        props: {},
      },
    },

UI效果：

配置参数：无

模型和Props参数类型：string，一个表示颜色的字符串。

margin-padding

配置一个间距属性。一般用于margin padding设置。

属性配置示例：

      {
        name: 'spacing',
        title: '间距',
        defaultValue: {
          marginLeft: '8px',
          marginRight: '8px',
          marginTop: '12px',
          marginBottom: '12px',
          paddingLeft: '10px',
          paddingRight: '10px',
        },
        setter: {
          type: 'margin-padding',
          props: {},
        },
      },

UI效果：

配置参数：

字段	类型	含义	备注
paddingDisable	boolean	是否禁用内间距设置	缺省 false。
marginDisable	boolean	是否禁用外间距设置	缺省 false。

模型和Props参数类型：Margin & Padding。参见 Margin 和 Padding。

data-bind-field

配置一个字段属性。用于获取字段数据的场景，支持设置静态数据、模板字符串。

属性配置示例：

      {
        name: 'text',
        title: '文本内容',
        defaultValue: '文本',
        setter: {
          type: 'data-bind-field',
          props: {
            supportStaticType: ['char', 'text'],
            supportStaticDefaultValues: [{ type: 'string', value: '文本' }],
            tabTitles: ['静态', '动态', '模板'],
            mode: 'text',
            supportFieldType: [
              'text',
              'char',
              'integer',
              'long',
              'decimal',
              'enumeration',
              'datetime',
            ],
          },
        },
      },

UI效果：

配置参数：

字段	类型	含义	备注
tabTitles	Array<string>	支持设置的模式	缺省：仅配置字段。常用的配置是： ['静态', '动态'] : 同时支持静态数据和动态字段配置。 ['静态', '动态', '无']：同时支持静态数据和动态字段配置，也支持选择无，不配置。 ['静态', '动态', '模板']：同时支持静态数据、动态字段和模板字符串配置。
supportStaticType	Array<string>	tabTitles包括静态时，静态支持的类型	这里的类型取字段类型。配置时字段类型改为全小写。
supportFieldType	Array<string>	配置字段时，允许配置的字段类型列表	这里的类型取字段类型。配置时字段类型改为全小写。
denyContextData	boolean	仅允许选择最近数据上下文的实体字段	缺省 false，可以选择组件所在数据上下文上，所有实体的字段。 true，仅能选择数据上下文上最近实体的字段。

模型和Props参数类型：

tabTitles配置	模型定义	Props参数	备注
未配置	EntityAttrSchemaData	AttrMeta	根据配置的supportFieldType参数和字段类型定义，可以在调用getAttrValue、get等API时限制返回的数据类型，而不是完全使用VALUE。
['静态', '动态']	EntityAttrSchemaData ｜ VALUE	AttrMeta \| VALUE	根据配置的supportFieldType参数和字段类型定义，以及supportStaticType参数，可以定义Props参数为具体的类型，比如 AttrMeta \| string 这种联合类型。
['静态', '动态', '模板']	EntityAttrSchemaData ｜ VALUE ｜ TemplateSchemaData	AttrMeta \| VALUE ｜ TemplateMeta

multi-field

一个属性配置多个字段。一般用于表格类组件，或者一个实体包含多条数据的场景。

属性配置示例：

    {
      name: 'searchConfig',
      title: '搜索字段配置',
      setter: {
        type: 'multi-field',
        props: {
          denyContextData: true,
          pack: 'searchFields',
          extend: [{ title: '搜索类型', valueType: 'searchCondition' }],
        },
      },
    },

UI效果：

配置参数：

字段	类型	含义	备注
pack	string	包装字段	不配置此字段时，Props参数类型是MultiAttrMetaWith，配置此字段时，Props参数类型是PackMultiAttrMetaWith。
extend	Array<ExtendItem>	扩展字段配置	一般配置多个字段时，可能会给每个实体字段设置额外的参数，extend就是为了配置额外参数。
denyContextData	boolean	仅允许选择最近数据上下文的实体字段	缺省 false，可以选择组件所在数据上下文上，所有实体的字段。 true，仅能选择数据上下文上最近实体的字段。

ExtendItem

multi-field 属性设置器 extend 参数的类型。

定义：

interface ExtendItem {
  title: string;
  valueType?: string;
  render?: Function;
}

字段说明

字段	类型	含义	备注
title	string	配置扩展字段时的标题
valueType	string	内置的扩展类型	searchCondition：搜索条件配置。 editName：字段展示的标题配置。
render	function	使用函数的方式扩展更多类型	实验特性，后续可能变动。暂时不建议使用。

event-logicflow

配置一个事件属性。用于响应用户的交互，或者响应特定的事件（比如数据加载完成），甚至可以用执行事件来获取参数。

属性配置示例：

        {
          name: 'changeAction',
          title: '内容变化',
          defaultValue: { type: 'none' },
          setter: {
            type: 'event-logicflow',
            props: {
              parameterConfig: {
                input: {
                  inject: (props: any) => {
                    if (props.multiple) {
                      return [{ type: 'LIST', subType: 'OBJECT' }];
                    } else {
                      return [{ type: 'OBJECT' }];
                    }
                  },
                },
              },
              customOptions: ['none', 'call_frontflow', 'call_backendflow'],
            },
          },
        },

UI效果：

配置参数：

字段

类型

含义

备注

customOptions

Array<string>

允许配置的事件列表

事件标识参考MobiEvent中的EventType定义。

parameterConfig

LogicModelParameterConfig

参数配置。

input字段配置组件添加参数；

output字段配置返回值类型

具体的定义请参考下方LogicModelParameterConfig。

parameterConfig相关的类型定义：

enum MOBI_TYPE {
  LIST = 'LIST',
  ENTITY = 'OBJECT'
}


export enum FLOW_OUTPUT_TYPE {
  OBJECT = 'OBJECT',
  VARIABLE = 'VARIABLE',
  LIST = 'LIST',
  TYPE_PARAMETER = 'TYPE_PARAMETER',
}

export enum FLOW_OUTPUT_SUBTYPE {
  ENTITY = 'OBJECT',
  STRUCTURE = 'STRUCTURE',
  INTEGER = 'INTEGER',
  LONG = 'LONG',
  DECIMAL = 'DECIMAL',
  CHAR = 'CHAR',
  TEXT = 'TEXT',
  BOOLEAN = 'BOOLEAN',
  DATETIME = 'DATETIME',
  ENUMERATION = 'ENUMERATION',
  IMAGE = 'IMAGE',
  AUDIO = 'AUDIO',
  DOCUMENT = 'DOCUMENT',
  VIDEO = 'VIDEO',
  PASSWORD = 'PASSWORD',
  TYPE_PARAMETER = 'TYPE_PARAMETER',
}

type LogicModelParameterInjectConfig = {
  type: MOBI_TYPE;
  subType?: MOBI_TYPE;
  name?: string;
};

type LogicModelParameterOutputConfig = {
  type: FLOW_OUTPUT_TYPE; 
  subType: FLOW_OUTPUT_SUBTYPE; 
};

interface LogicModelParameterConfig {
  input?: {
    inject?:
      | LogicModelParameterInjectConfig[]
      | ((schemaProps: Record<string, any>) => LogicModelParameterInjectConfig[]);
  };
  // 返回值
  output?:
    | LogicModelParameterOutputConfig
    | ((schemaProps: Record<string, any>) => LogicModelParameterOutputConfig);
}

模型数据类型：PageEventSchemaData。

Props参数类型：ActionMeta。

data-table

配置一个数据源属性。用于设置组件加载的数据源。

属性配置示例：

  {
    name: 'dataSource',
    title: '数据源',
    setter: {
      type: 'data-table',
      props: {
      },
    },
  },

UI效果：

配置参数：

字段	类型	含义	备注
typeList	Array<string>	允许的数据源类型	缺省：三种数据源都允许。 context：上下文数据源。 datamodel：数据库数据源。 logicflow：逻辑流数据源。
disableConstraints	boolean	是否禁止数据库数据源的筛选配置

模型数据类型：DataSourceSchemaData。

Props参数类型：DataSourceMeta。