@shihuo/image-pool-component

4.2.0 • Public • Published

图片池组件

@shihuo/image-pool-component

后台图片池物料

API

参数名 说明 必填 类型 默认值 备注
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: 快速找图

外放API

通过ref获取组件实例后,可调用部分功能函数

setUpCompare

设置目标图片对象,改方法替换原有compare属性能力。

入参:compare对象,数据结构见下方

设置后的功能表现:

1、推荐图片栏:将图片列表重新排序,根据图片类型进行置顶。

2、渠道图片池栏:设置指定图片类型进行重新查询。

clearCompare

清空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);
}}
其他
  • 图片池组件一般使用左右分布场景下使用,如左侧展示业务类内容展示,右侧展示图片池组件。
  • 若希望图片池中仅内部产生滚动,则需要在图片池组件的外侧父级容器设置固定高度即可

Readme

Keywords

Package Sidebar

Install

npm i @shihuo/image-pool-component

Weekly Downloads

9

Version

4.2.0

License

MIT

Unpacked Size

3.9 MB

Total Files

56

Last publish

Collaborators

  • yubowei
  • jiaqingxu
  • zhaozhengbo
  • shawnsong