0.1.0 • Published 5 years ago
img-zoom-in v0.1.0
ImgZoomIn
A Vue component used for Image zoom in of mouse movement area
Installation
$ npm i --save img-zoom-inUsage
import imgZoomIn from 'img-zoom-in'
/*** In your code ***/
// basic usage
<ImgZoomIn :sImgSrc="imgSrc" />
// more options
<ImgZoomIn :sWidth="100" :sHeight="100" :mWidth="40" :mHeight="40" :bWidth="800" :bHeight="800" :sImgSrc="imgSrc" />Options
| Props | Description | Type | Default value |
|---|---|---|---|
| sImgSrc | (Required) Image that need to be zoom in (smaller Image) | String | none |
| bImgSrc | Image for zoomed in (Bigger Image). if not provide, same as sImgSrc | String | none |
| sWidth | Smaller Image width | String or Number | 350 |
| sHeight | Smaller Image height | String or Number | 350 |
| bWidth | Bigger Image width | String or Number | 800 |
| bHeight | Bigger Image height | String or Number | 800 |
| mWidth | Mouse Movement area width | String or Number | 175 |
| mHeight | Mouse Movement area height | String or Number | 175 |
| mBgColor | Mouse Movement area background color | String | '#fede4f' |
Explanation
The Zoomed In Image Size of Mouse Movement Area is: width = (bWidth / sWidth) mWidth & height = (bHeight / sHeight) mHeight