Notorious Public Menace

    @shihuo/image-pool-component

    2.0.22 • 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具备)
    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新增

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

    Install

    npm i @shihuo/image-pool-component

    DownloadsWeekly Downloads

    506

    Version

    2.0.22

    License

    MIT

    Unpacked Size

    2.04 MB

    Total Files

    37

    Last publish

    Collaborators

    • yubowei
    • jiaqingxu
    • zhaozhengbo
    • shawnsong