1. 简介
m-react-viewer 是一个基于 React 实现的图片查看器，通过该组件，用户可以轻松实现图片的展示、缩放、拖拽等操作。同时，m-react-viewer 还支持手势操作，在移动端上也可以流畅地使用。
2. 安装
使用 npm 进行安装：
--- ------- -------------- ------
3. 使用
在需要使用 m-react-viewer 的组件中引入该组件：
------ ------ ---- -----------------
-------- ------------- -
----- ------ - ----------------------- -----------------------
------ -
-------
---------------
--------------
--
--
-images 参数传入图片的路径，visible 参数控制图片查看器的显示与隐藏。
4. 高级使用
m-react-viewer 组件提供了丰富的属性和事件，可以帮助用户实现更灵活的操作。
4.1 属性
images：需要显示的图片路径数组（必须）。visible：是否显示图片查看器，默认为false。activeIndex：默认激活的图片索引，默认为0。zIndex：图片查看器的层级，默认为1000。container：设置图片查看器的容器元素，默认为body，也可以指定具体的元素。rotatable：是否支持旋转操作，默认为false。scalable：是否支持缩放操作，默认为true。zoomSpeed：缩放的速度，默认为0.05。minZoom：最小缩放倍数，默认为0.01。maxZoom：最大缩放倍数，默认为5。enableKeyboard：是否启用键盘操作，默认为true。resetZoomOnDoubleClick：是否双击鼠标重置缩放倍数，默认为false。dragSpeed：拖拽的速度，默认为0.05。disableMouseZoom：是否禁止鼠标滚轮缩放图片，默认为false。disableMouseDrag：是否禁止鼠标拖拽图片，默认为false。onClose：图片查看器关闭时的回调函数。onMaskClick：点击遮罩层时的回调函数。onStartDrag：开始拖拽时的回调函数。onEndDrag：结束拖拽时的回调函数。onStartZoom：开始缩放时的回调函数。onEndZoom：结束缩放时的回调函数。
4.2 事件
m-react-viewer 组件提供了四个事件，分别是 startDrag、endDrag、startZoom、endZoom，分别对应拖拽和缩放操作的开始和结束。
-------- ----------------- -
--------------------
-
-------- --------------- -
--------------------
-
-------- ----------------- -
--------------------
-
-------- --------------- -
--------------------
-
-------- ------------- -
----- ------ - ----------------------- -----------------------
------ -
-------
---------------
--------------
-----------------------------
-------------------------
-----------------------------
-------------------------
--
--
-5. 示例代码
完整的示例代码如下：
------ ------ ---- -----------------
-------- ------------- -
----- ------ - ----------------------- -----------------------
-------- ----------------- -
--------------------
-
-------- --------------- -
--------------------
-
-------- ----------------- -
--------------------
-
-------- --------------- -
--------------------
-
------ -
-------
---------------
--------------
---------------
-------------
---------------------------------------------------
----------------
---------------
---------------
-------------
-----------
----------------------
-----------------------------
---------------
------------------------
------------------------
----------- -- ------------------
--------------- -- ---------------------
-----------------------------
-------------------------
-----------------------------
-------------------------
--
--
-以上就是关于 m-react-viewer 的使用教程。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600562e781e8991b448e090e