vue-photo-zoom-pro
An image magnifying glass Effect for vue.
Usage example
main.js
or cdn
*.vue
Image
Tips: If your image is not loaded at the beginning and set
disabled-reactive
, you must manually listen for the event when the image is loaded before displaying it
Customize the enlarged area
You can use any element to represent the enlarged area
Customize magnified elements
Settings
props
Prop Name | Type | Default | Note |
---|---|---|---|
high-url | String | Clearer picture url | |
scale | Number | 2 | magnification |
disabled | Boolean | false | disabled move |
width | Number | 166 | The width of the magnified area |
height | Number | -1 | The height of the magnified area |
type | String | square | magnifying glass type (circle,square) |
selector | Boolean | true | show or remove selector |
out-zoomer | Boolean | false | amplification region will be displayed on the outside |
mask | Boolean | false | show mask |
mask-color | Color | {} | mask color |
enter-event | Object/UIEvent | null | custom enter event |
move-event | Object/UIEvent | null | custom move event |
leave-event | Object/UIEvent | null | custom leave event |
disabled-reactive | Boolean | false | Disable listening for internal element info changes |
Slot
Slot Name | Note |
---|---|
default | default slot |
selector | selector slot |
zoomer | inner zoomer slot |
outzoomer | out zoomer slot |
Event
Event Name | Note | value |
---|---|---|
created | created event | |
mouseenter | mouse enter event | |
mousemove | mouse move event | |
mouseleave | mouse leave event |
Methods
Method Name | Note | value |
---|---|---|
update | update |