image-magnifier-react/README.md

React图片放大镜组件，鼠标经过会显示放大镜

<!--
 * Author  rhys.zhao
 * Date  2021-09-16 13:23:39
 * LastEditors  rhys.zhao
 * LastEditTime  2022-03-03 21:35:31
 * Description 拖拽、缩放容器组件
-->

## 描述

image-magnifier-react 是 React 图片放大镜组件，鼠标经过会显示放大后的效果。

## 安装

```
npm install image-magnifier-react --save
```

## 使用

1. 引入

```
import Magnifier from 'image-magnifier-react';
import 'image-magnifier-react/lib/index.css'; // 引入样式
```

2. 使用

```
import demoImage from '../assets/demo.jpg';

...

<Magnifier image={demoImage} width={500} />
```

## 属性

| 属性            | 描述               | 类型   | 默认值  | 是否必填 |
| :-------------- | :----------------- | :----- | :------ | :------- |
| image           | 需要放大效果的图片 | string | 无      | 是       |
| zoom            | 放大镜放大倍数     | number | 2       |
| magnifierWidth  | 放大镜宽度         | number | 100     |
| magnifierHeight | 放大镜高度         | number | 100     |
| borderWidth     | 放大镜边框看宽度   | number | 2       |
| borderColor     | 放大镜边框颜色     | string | 'white' |