Recently, in an e-commerce website, there was a demand that the mouse should be placed on the main picture to show the magnifying glass effect, just like taobao commodity details page. It seemed that there was no suitable vue plug-in, so I grabbed one and shared it. Small white first time share, everybody big god mo laugh.

vue-piczoom

A picture magnifier component for vue.js 2.x

Build Setup usage steps

# installation install
npm install vue-piczoom --save
Copy the code
# use use
--script
import PicZoom from 'vue-piczoom'
export default {
  name: 'App',
  components: {
    PicZoom
  }
}

--html
<pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>
Copy the code

The Config configuration

props describe default
url Picture address string required
big-url Address of a larger version string null
scale Image magnification Number 2.5
scroll Whether the page can be scrolled when zooming in boolean fasle

Suggest/Suggest

Components default to 100% width and height, so it is recommended to include components in a container with a fixed width and height. Such as:

<div class="pic-box"> <! --pic-box:width:500px; height:500px--> <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>
</div>
Copy the code

GIF animation screenshot

The Demo sample

Online sample

Github

Github

Update Update records

Version: (2018-01-22)

1. Replace the algorithm to solve the positioning error when the parent element is position:relative; 2. Optimize edge detection to solve the failure of magnification movement when the magnification selection moves to the edge; 3. Optimize the mobile algorithm to make the mobile selection more smooth;