npm package: @shihuo/image-ruler-component
Description: 图片标尺容器
Latest version: 2.0.5

# 图片标尺

@shihuo/image-ruler-component

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

## API

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

```javascript
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();