文档
API

PhotoProvider

NameDescriptionTypeDefault Value
mode可选 drag 模式,视图内自由拖拽图片,触屏设备下强制 slide 模式drag | slideslide
childrenReact.ReactNodeRequired*
onIndexChange(index: number, state: PhotoProviderState) => void
onVisibleChange(visible: boolean, index: number, state: PhotoProviderState) => void
loop是否循环预览,达到该数量则启用boolean | number3
speed动画速度(type: ActiveAnimationType) =>number() => 400
easing动画函数(type: ActiveAnimationType) =>string() => 'cubic-bezier(0.25, 0.8, 0.25, 1)'
photoClosable图片点击是否可关闭boolean
maskClosable背景点击是否可关闭booleantrue
maskOpacity默认背景透明度number | null1
pullClosable下拉是否可关闭booleantrue
overlayRender自定义渲染覆盖物(overlayProps: OverlayRenderProps) => React.ReactNode
classNamestring
maskClassNamestring
photoWrapClassNamestring
photoClassNamestring
loadingElement自定义 loadingJSX.Element
brokenElement自定义加载失败渲染JSX.Element | ((photoProps: BrokenElementParams) => JSX.Element)
portalContainerHTMLElementdocument.body
enableMouseZoom是否启用鼠标缩放booleantrue

PhotoView

NameDescriptionTypeDefault Value
src图片地址string
render自定义渲染,优先级比 src 低(props: PhotoRenderParams) => React.ReactNode
overlay图片覆盖物React.ReactNode
width自定义渲染节点宽度number
height自定义渲染节点高度number
children子节点,一般为缩略图React.ReactElement
triggers触发打开图片的方式Array<"onClick" | "onDoubleClick">["onClick"]

DataType

NameDescriptionTypeDefault Value
key唯一标识number | stringRequired*
src资源地址string
render自定义渲染,优先级比 src 低(props: PhotoRenderParams) => React.ReactNode
overlay图片覆盖物React.ReactNode
width自定义渲染节点宽度number
height自定义渲染节点高度number
originRef触发 refReact.MutableRefObject<HTMLElement | null>

OverlayRenderProps

NameDescriptionTypeDefault Value
mode模式drag | slideRequired*
images图片列表DataType[]Required*
index当前索引numberRequired*
onIndexChange索引改变回调(index: number) => voidRequired*
visible是否可见booleanRequired*
onClose关闭事件回调(evt?: React.MouseEvent | React.TouchEvent) => voidRequired*
overlayVisible覆盖物是否可见booleanRequired*
overlay图片覆盖物React.ReactNodeRequired*
rotate当前旋转角度numberRequired*
onRotate旋转事件回调(rotate: number) => voidRequired*
scale当前缩放numberRequired*
onScale缩放事件回调(scale: number) => voidRequired*