加强版图片基础组件

@shihuo/image-component

可代替原生的 img 标签

API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | ------------------ | ------------------------------------------ | ---- | ------------ | ---------- | ------------------------------------------------------------ | | component | 指定图片外侧容器 | | string | div | | | src | 图片地址 | 必填 | string | | 可支持动态修改 | | width | 设置图片宽度 | | number | 100 | | | height | 设置图片高度 | | number | | 不设置默认图片自动适应高度 | | objectFit | 图片裁剪模式 | | Enum | scale-down | contain | cover | fill | none | revert | scale-down | | imageRef | 图片标签引用 | | | | { current: img } | | onLoad | 图片加载成功回调 | | function | | args:image: 图片 dom 对象 naturalWidth 原始宽度 naturalHeight 原始高度 renderWidth 渲染宽度 renderHeight 渲染高度 ...包含其他 dom 属性 | | onError | 图片加载失败回调 | | | | | | hasBorder | 显示边框 | | boolean | false | v1.1.1 | | toolbar | 显示工具栏 | | boolean | false | v1.1.1 | | hasPreview | 显示预览工具 | | boolean | true | v1.1.1 | | onPreview | 预览回调 | | function | | v1.1.1 默认新开窗口显示图片 | | hasEdit | 显示编辑工具 | | boolean | true | v1.1.1 | | onEdit | 编辑回调 | | function | | v1.1.1 | | hasDelete | 显示删除工具 | | boolean | true | v1.1.1 | | onDelete | 删除回调 | | function | | v1.1.1 | | renderToolbar | 自定义渲染工具栏 | | function | | v1.1.1ps: v1.2.0后不推荐使用，可使用toolbarConfig进行自定义工具栏配置 | | lazyLoad | 懒加载 | | boolean | false | V1.1.7 | | onShow | 懒加载开启后渲染时回调 | | function | | v1.1.7 | | onHide | 懒加载开启后不渲染时回调 | | function | | v1.1.7 | | onImageClick | 点击图片 dom 节点触发 | | function | | v1.1.11 新增 | | square | 设置方形容器(当前height属性无效时方才生效) | | boolean | false | v1.1.12 新增 | | score | 图片右上角展示图片分数 | | number | | 渲染结果将四舍五入取整v1.1.15新增 | | highlight | 图片状态是否展示高亮 | | boolean | false | 渲染结果为边框（hasBorder=true）和图片分数（传入score）高亮。v1.1.15新增 | | balloon | 鼠标移入后图片放大 | | boolean | false | 基于fusionUI中的Balloon组件实现v1.1.18新增 | | balloonAlign | balloon方位 | | enum | r | 同Balloon组件设定的方位一致v1.1.18新增 | | magnifier | 放大镜功能 | | boolean | false | 图片开启放大境功能，该功能优先级较高，开启后，以下能力默认失效：放大浮层balloon 高亮状态highlight 工具栏toolbar 等1、建议容器手动设置为方形容器，且宽高尺寸适中推荐500px2、当前图片尺寸若小于容器时，默认放大镜失效v1.1.20新增 | | toolbarConfig | 自定义图片工具栏配置 | | array | | 替代renderToolbar同时设置时，toolbarConfig优先级高于renderToolbar当toolbar开启时生效，且其他工具栏默认配置如hasEdit hasDelete等将失效详细配置可看下方片段。v1.2.0新增 | | draggable | 图片元素是否可被拖动 | | boolean | true | v1.2.3新增 | | preventContextMenu | 阻止图片右键菜单 | | boolean | false | V1.2.4新增v3.0.0废弃 | | customContextMenu | 开启自定义右键菜单 | | boolean | false | v2.0.0新增v3.0.0废弃 | | crossOrigin | 图片crossOrigin配置 | | string | | V2.0.4新增 | | balloonDelay | 开启balloon时，设置延时弹出时间 | | number | | 单位：msv2.0.9新增 | | mask | 图片自定义蒙层 | | ReactNode | | v2.3.0新增 | | balloonSize | 放大浮层显示大小 | | number | 450 | v2.3.1新增 | | balloonOptions | 支持balloon组件全部配置 | | | | v2.3.1新增 | | longGraph | 是否渲染长图模式 | | boolean | false | v2.0.0新增 | | scoreAlign | 图片显示位置 | | left / right | right | v3.0.0新增 |

片段

toolbarConfig配置

// 配置一
const toolbarConfig = [
  {
    children: '按钮1',
    onClick: (src, imageObject) => {
      console.log('图片地址：%s，图片dom对象：%o', src, imageObject);
    },
    attr: {}, // 其他标签属性配置。多用于注册无痕埋点属性
  },
  ...
];

// 配置二（多用于悬浮到工具栏按钮时，当前按钮具备其他附属按钮场景（如服饰类上身图，包含正面和背面，那么此时可把正面和背面图设置成附属按钮））
const toolbarConfig2 = [
  {
    list: [
      {
        children: '附属按钮1',
        attr: {}, // 其他标签属性配置。多用于注册无痕埋点属性
      },
      ...
    ],
		children: '按钮1',
    onClick: (src, imageObject, button) => {
      console.log('图片地址：%s，图片dom对象：%o，选中的附属按钮对象：%o', src, imageObject, button);
    },
  },
  ...
]