图文展示

介绍
用于展示图片与文字同时存在的内容。
API
Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
status | 默认状态 | 'default' | 'readonly' | 'hide' | 'default' |
richText | 内容 | string | - |
customUpload | 自定义上传 | boolean | false |
imageUploadUrl | 上传地址 | string | - |
fileName | 上传文件名 | string | - |
extraData | 额外数据 | GenerateData | - |
headers | 头部信息 | GenerateData | - |
didUpload | 上传后处理 | FixUploadData | - |
baseStyle | 自定义样式 | string | - |
customClass | 类名绑定 | string | - |
opacity | 不透明度 , 布局容器背景色透明度 | string | - |
display | 显示,设置组件的显示布局模式 | Display | - |
boxStyle | 盒模型 , margin,border,padding 设置 | BoxStyle | - |
font | 文字样式 | Font | - |
background | 背景样式 | Background | - |
boxShadow | 阴影 | BoxShadow | - |
uniqueKey | 唯一标识, 组件的唯一标识 | string | - |
loop | 循环数据, 循环渲染设置 | Loop | - |
Type
javascript
// 盒模型
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 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
}
}
// 循环
type Loop = {
"data": any[],
"paramName": string,
"indexName": string,
"key": string
}
// 生成数据的自定义函数
type GenerateData = (ctx: PangeaContext) => Object;
// 处理上传成功返回的数据
type FixUploadData = (response: string, ctx: PangeaContext) => string;