Magnifying Glass Effect In Vue - Photo Zoom Pro

Install & Download:

# NPM
$ npm i vue-photo-zoom-pro --save

Description:

An image zoom component that applies a magnifying glass effect on images.

How to use it:

1. Import and register the component.

import vuePhotoZoomPro from 'vue-photo-zoom-pro'
export default {
  components: {
    vuePhotoZoomPro
  }
}

2. Add the vue-photo-zoom-pro component to the template.

<vue-photo-zoom-pro :high-url="imgSrc">
  <img :src="imgSrc" />
</vue-photo-zoom-pro>

3. Determine the path to the image.

export deafult{
  data(){
    return {
      loaded: false,
      imgSrc: '/path/to/image/'
    }
  },
  created(){
    const img = new Image()
    img.src = imgSrc
    img.addEventListener('load', ()=>{
      this.loaded = true
    })
  }
}

4. Available component props.

highUrl: {
  type: String,
  default: ''
},
width: {
  type: Number,
  default: 168
},
height: {
  type: Number,
  default: -1
},
type: {
  type: String,
  default: 'square',
  validator: function (value) {
    return ['circle', 'square'].indexOf(value) !== -1
  }
},
scale: {
  type: Number,
  default: 2
},
enterEvent: {
  type: [Object, UIEvent],
  default: null
},
moveEvent: {
  type: [Object, UIEvent],
  default: null
},
leaveEvent: {
  type: [Object, UIEvent],
  default: null
},
selector: {
  type: Boolean,
  default: true
},
outZoomer: {
  type: Boolean,
  default: false
},
disabledReactive: {
  type: Boolean,
  default: false
},
disabled: {
  type: Boolean,
  default: false
},
mask: {
  type: Boolean,
  default: false
},
maskColor: {
  type: String,
  default: ''
}