图文展示

介绍

用于展示图片与文字同时存在的内容。

API

Props

参数名	描述	类型	默认值
status	默认状态	'default'| 'hide'	'default'
richText	内容	string	-
customUpload	自定义上传	boolean	false
imageUploadUrl	上传地址	string	-
fileName	上传文件名	string	-
extraData	额外数据	GenerateData	-
headers	头部信息	GenerateData	-
didUpload	上传后处理	FixUploadData	-
baseStyle	自定义样式	string	-
customClass	类名绑定	string	-
opacity	不透明度 , 布局容器背景色透明度	number	-
display	显示,设置组件的显示布局模式	Display	-
boxStyle	盒模型 , margin,border,padding 设置	BoxStyle	-
boxStyle	边框颜色	BorderColor	-
boxStyle	边框线形	'solid'|'dotted'|'dashed'	-
font	文字样式	Font	-
background	背景样式	Background	-
boxShadow	阴影	BoxShadow	-
uniqueKey	唯一标识 ， 组件的唯一标识	string	-
loop	循环数据, 循环渲染设置	Loop	-

Type

// 盒模型
type BoxStyle = {
  marigin: [string | string | string | string],
  border: [string | string | string | string],
  padding: [string | string | string | string],
};

// 样式-显示
type Display = {
  type: "block" | "inline-block" | "inline" | "flex",
  // type选择flex可配置以下属性
  flex: {
    flexDirection: "row" | "column" | "row-reverse" | "column-reverse",
    alignItems: "flex-start" | "center" | "flex-end" | "stretch" | "base-line",
    justifyContent:
      | "flex-start"
      | "center"
      | "flex-end"
      | "space-between"
      | "space-around",
  },
};

// 阴影
type BoxShadow = {
  color: string,
  hShadow: string,
  vShadow: string,
  blur: number,
};

// 边框颜色
type BorderColor = (
  | "color-border-1" // 浅
  | "color-border-2" // 一般
  | "color-border-3" // 深/悬浮
  | "color-border-4", // 重/按钮描边
)[];

// 文字样式
type Font = {
  mode: "custom",
  fontWeight: "100" | "normal" | "500" | "600" | "700" | "900",
  fontAlign: "left" | "right" | "center" | "justify",
  fontSize: cnumber,
  lineHeight: cnumber,
  color: cstring,
};

// 背景样式
type Background = {
  color: string,
  size: "cover" | "contain" | "length", // 填充方式
  width: {
    unit: "px" | "%",
    value: number,
  },
  height: {
    unit: "px" | "%",
    value: number,
  },
  positionX: number, // 横向偏移
  positionY: number, // 纵向偏移
};

// 循环
type Loop = {
  data: any[],
  paramName: string,
  indexName: string,
  key: string,
};

// 生成数据的自定义函数
type GenerateData = (ctx: PangeaContext) => Object;

// 处理上传成功返回的数据
type FixUploadData = (response: string, ctx: PangeaContext) => string;