@shihuo/image-component NPM

加强版图片基础组件

@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、建议容器手动设置为方形容器，且宽高尺寸适中`推荐500px`2、当前图片尺寸若小于容器时，默认放大镜失效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);
    },
  },
  ...
]

ice react component

prop-types react-intersection-observer

@infinitebrahmanuniverse/nolb-_shi @everything-registry/sub-chunk-830 @shihuo/image-free-crop-component @shihuo/basic-related-product

4 months ago

5 months ago

6 months ago

7 months ago