@shihuo/image-ruler-component

图片标尺

@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		未传入时默认使用src v2.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();