anthinkingcoder/vue-image-magnifier

商品主图放大镜：https://codepen.io/zhoulin/pen/dLOgPP

vue-image-magnifier

setup

npm install vue-image-magnifier

use

import ImageMagnifier from vue-image-magnifier
Vue.use(ImageMagnifier)
//or
import {ImageMagnifier} from vue-image-magnifier

demo

npm run demo

live example

code open

vue-image-magnifier's Issues

Zoom Level

There is no way to change the zoom level. Such as zoom-level="1.5" to be 150% the source image height/width. Would be useful.

Alt Text for the image

It will be really useful if we can set the alt text for both the <img> elements inside image-magnifier and image-magnifier__zoom classes by passing a single prop to image-magnifier component.

Mouse move only shows bottom of image on zoom when scrolling

To fix it you should change the
e.pageX and e.pageY of the handleMove function to e.clientX and e.clientY

ex:

handleMove: function (e) {
                this.maskX = this.outXCheck(e.clientX - this.imgRect.left);
                this.maskY = this.outYCheck(e.clientY - this.imgRect.top);
                this.zoomLeft = this.imgRect.width + 10;

                // 计算大图偏移量
                this.zoomPosition.x = this.maskX * (this.zoomImgWidth / this.imgRect.width);
                this.zoomPosition.y = this.maskY * (this.zoomImgHeight / this.imgRect.height);
            }