描述

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' |