@shihuo/image-pool-component
后台图片池物料
参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
---|---|---|---|---|---|
activeKey | 指定激活的tab | enum | rec | rec | supplier | |
ruler | 指定线框类型 | enum | shoes | clothes | expand | brand | ||
goodsId | 商品ID | 是 | number | ||
styleId | 配色ID | 是 | number | ||
buttons | 图片池图片可被引用至的图片类型 | object[] | [] | button数据结构参照下方 | |
compare | 被比较的图片对象 | object | null | 传入时会对应开放部分功能,如: 1、可直接对推荐渠道图片进行使用。 2、放开图片对比按钮。 3、推荐图片将会被排序,命中图片类型的图片将往前排 4、进行分数比较,渠道图片分数较高时将会被标记 数据结构参照下方 该属性再v2.0.18版本废弃 |
|
onInitLoad | 各个类型tab内容初次加载时触发 | function | 接收参数列表: 1、activeKey 2、state:当前展示内容下包含的状态数据 3、queryParams:当前查询条件(仅渠道图片池tab具备) 该属性再v2.0.18版本废弃 |
||
onRecLoad | 推荐属性池tab内容初次加载时触发 | function | 同onInitLoad | ||
onSupplierLoad | 渠道属性池tab内容初次加载时触发 | function | 同onInitLoad | ||
onTabChange | 切换类型tab时触发 | function | |||
onSearch | 重新触发查询时触发 | function | 接收参数列表: 1、activeKey 2、state:当前展示内容下包含的状态数据 3、queryParams:当前查询条件 注意:推荐图片tab激活时不触发 |
||
onButtonClick | 当引用按钮buttons中元素被点击时或传入compare状态下点击[使用]按钮触发 | function | 接收参数列表: 1、activeKey 2、button/compare:当前被点击的按钮/传入的compare对象 3、image:当前被使用的图片对象 |
||
from | 来源 | string | 供埋点上报使用,不传默认空字符 | ||
axios | axios实例 | 自定义axios实例 | |||
beforeCompare | 对比方法 | function | 该方法用于获取被对比的图片列表,需要返回被对比的图片数组,图片数据结构可见下方compare数据类型。 方法接收参数image,为当前图片池中等待对比的图片对象,数据类型同上 v2.0.18新增 |
||
onWaitUseCallback | 当前图片池列表中是否存在高于指定图片类型的分数的工具函数 | function | 具体用法可查看下方。 v2.0.23新增 |
||
supplierId | number | 指定渠道ID,属于特殊场景字段,非必填。传入有效的渠道ID时在渠道图片池中会新增渠道下图片 tab,供业务方使用。v2.0.29新增 |
|||
lazyLoad | 图片池tab开启懒加载 | boolean | false | v4.0.8新增 | |
volume | 文件大小限制 | number | 文件大小最大限制,可输入浮点数 单位:M ps.使用图片时触发校验 |
||
ratio | 宽高比 | string/number/Array | 预设 1:1、3:4选项 支持传入字符串格式 "数字:数字" 如:10:7 表示宽/高必须10/7 支持传入数字:值表示宽/高 支持传入数组:其中一种宽高比通过即校验通过 ps.使用图片时触发校验 |
||
widthRange | 宽度范围 | number/string/Array | null表示不限宽 number以及字符串数字表示固定宽度 ps.使用图片时触发校验 |
||
heightRange | 高度范围 | number/string/Array | 同withRange ps.使用图片时触发校验 |
||
tabs | 受控的图片池模块展示 | Array | ['rec', 'supplier', 'mat', 'quick'] | rec: 推荐模块 supplier: 渠道图片池 mat: 素材库 quick: 快速找图 |
通过ref获取组件实例后,可调用部分功能函数
设置目标图片对象,改方法替换原有compare属性能力。
入参:compare对象,数据结构见下方
设置后的功能表现:
1、推荐图片栏:将图片列表重新排序,根据图片类型进行置顶。
2、渠道图片池栏:设置指定图片类型进行重新查询。
清空compare对象
// 推荐图片 | 渠道图片 |
const image = {
"goods_id": 0, // 所属商品id
"style_id": 0, // 所属配色id
"image_url": "", // 图片链接
"image_size": 146081, // 图片大小
"image_height": 800, // 宽
"image_width": 800, // 高
"image_type": 7, // 主类型
"image_child_type": 71, // 子类型
"image_type_name": "侧面图", // 图片类型中文展示
"score": 80.5, // 字节分
"byte_score": 80.5, // 字节分
"source": "pool", // 图片来源
"source_id": 480, // 图片为一标记
"supplier_id": 15466792, // 渠道id
"store": "天猫", // 商城
"channel_type": 2
}
// compare必须属性
const compare = {
"image_url": "",
"image_type": 0,
"image_child_type": 0,
"byte_score": 0,
"image_type_name": ""
}
// buttons元素结构
const buttons = [{
"label": "按钮名称",
"image_type": 0,
"image_child_type": 0,
}]
// compare必须属性
const compare = {
"image_type": 7,
"image_child_type": 71,
"byte_score": 20
}
onWaitUseCallback={(triggerCompareCallback) => {
const isAllowUse = triggerCompareCallback(compare);
this.setState({ triggerCompareCallback });
console.log('是否在图片池中具备高于当前传入的图片分数的图片', isAllowUse);
}}
- 图片池组件一般使用左右分布场景下使用,如左侧展示业务类内容展示,右侧展示图片池组件。
- 若希望图片池中仅内部产生滚动,则需要在图片池组件的外侧父级容器设置固定高度即可