Narcoleptic Pasta Manufacturer

    @shihuo/image-ruler-component

    1.1.12 • Public • Published

    图片标尺

    @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 时显示眼睛
    hideSpan 是否隐藏文字 boolean false 隐藏标尺中的文字标记,仅 ruler=shoes
    时生效
    imageProps 传入 src 时,生效 imageProps 支持@shihuo/image-component 组件入参
    v1.1.5 支持

    ImageRulerComponent.Expand

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

    ImageRulerComponent.Clothes

    同上。ruler 默认为 clothes

    ImageRulerComponent.Shoes

    同上。ruler 默认为 shoes

    ImageRulerComponent.Brand

    同上。ruler 默认为 brand

    ImageRulerComponent.Ruler

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

    注意:因线框和浮层文字为绝对定位,所以外层必须设置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();

    Install

    npm i @shihuo/image-ruler-component

    DownloadsWeekly Downloads

    73

    Version

    1.1.12

    License

    MIT

    Unpacked Size

    1.8 MB

    Total Files

    27

    Last publish

    Collaborators

    • yubowei
    • jiaqingxu
    • zhaozhengbo
    • shawnsong