图片标尺

@shihuo/image-ruler-component

图片标尺容器，支持鞋服通用品牌，可充当容器

API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | -------------- | -------------------------- | ---- | ------- | ------ | ------------------------------------------------------------------------------------------------------------- | | component | 指定图片外侧容器 | | string | div | | | src | 图片链接 | 必填 | string | | | | size | 容器尺寸 | | number | 100 | 标尺只支持正方形容器 | | flex | 外侧容器 flex 布局 | | boolean | true | | | ruler | 显示标尺类型 | | enum | null | shoes | clothes | expand | brand 表示鞋类｜服饰｜通用｜品牌标尺。 null 或 undefined 不显示标尺 | | childRuler | 显示标尺子类型 | | enum | ['all'] | 具体枚举值可调用getRulerConfig方法获取注意：childRuler必须是ruler下的子类型时才生效v1.1.9版本新增 | | hideLine | 是否手动隐藏标尺 | | boolean | false | 当 ruler 有效时生效，hideLine 为 true 时showHideButton 配置失效 | | ~~showHideButton~~ | 是否显示右上角隐藏标尺按钮 | | boolean | true | 当 ruler 有效并且 hideLine 为 false 时生效size>=300 时显示眼睛v2.0.0废弃 | | hideSpan | 是否隐藏文字 | | boolean | false | 隐藏标尺中的文字标记，仅 ruler=shoes时生效 | | imageProps | 传入 src 时，生效 | | | | imageProps 支持@shihuo/image-component 组件入参v1.1.5 支持 | | balloon | 开启大图浮层 | | boolean | false | 当传入src时才生效v2.0.0新增 | | balloonAlign | 大图浮层显示方位 | | enum | r | 枚举值同Fusion组件库的Balloon组件align属性v2.0.0新增 | | balloonProps | 浮层额外配置 | | | | 支持Balloon其他属性配置v2.0.2新增 | | balloonSrc | 指定放大浮层的图片 | | string | | 未传入时默认使用srcv2.0.3新增 |

ImageRulerComponent.Expand

标尺充当容器使用，支持所有上述配置，ruler 默认为 expand。src 属性失效，支持传入 children。

ImageRulerComponent.Clothes

同上。ruler 默认为 clothes

ImageRulerComponent.Shoes

同上。ruler 默认为 shoes

ImageRulerComponent.Brand

同上。ruler 默认为 brand

ImageRulerComponent.Ruler

Ruler组件为标尺组件的核心控件，用于控制线框、浮层文字、中轴虚线和边框虚线 接收 ruler、childRuler、hideLine、hideSpan。 属性默认值同上。

注意：因线框和浮层文字为绝对定位，所以外层必须设置position: relation;

v1.1.9 版本新增

标尺枚举值及配置项

ImageRuler.config

import ImageRuler from '@shihuo/image-ruler-component';

// 鞋类子类型枚举
// ImageRuler.config.shoesRulerEnum
[
  'adultVertical', // 成人拖鞋俯视图
  'adult', // 成人
  'children', // 小/幼童
  'infant', // 婴童
  'adultSingleHeel', // 成人单只后跟
  'sole', // 鞋底位置
]

// 服饰子类型枚举
// ImageRuler.config.clothesRulerEnum
[
  'central', // 中圈
  'outer', // 外圈
]

// 拓展子类型枚举
// ImageRuler.config.expandRulerEnum
[
  'inner', // 内圈
  'central', // 中圈
  'outer', // 外圈
]

// 品牌子类型枚举
// ImageRuler.config.brandRulerEnum
[
  'fill', // 填充型
  'text', // 文字型
  'routine', // 常规性
]

// 获取对应ruler的枚举值
const config = ImageRuler.getRulerConfig('shoes');

// 获取所有ruler枚举值
const config = ImageRuler.getAllRulerConfig();