Magnifying Glass Effect In Vue – Photo Zoom Pro

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: ''
}

Preview:

Magnifying Glass Effect In Vue - Photo Zoom Pro

Changelog:

v2.2.0 (10/09/2021)

  • fix: fix rollup-plugin-vue built code contains const

v2.1.9 (08/30/2021)

  • refactor: compute zoomer width

v2.1.8 (08/29/2021)

  • update

v2.1.7 (08/28/2021)

  • refactor: compute zoomer width

v2.1.6 (08/26/2021)

  • fix: root dom height

v2.1.1 (08/24/2021)

  • Update

Download Details:

Author: mater1996

Live Demo: https://mater1996.github.io/vue-photo-zoom-pro/example/

Download Link: https://github.com/mater1996/vue-photo-zoom-pro/archive/refs/heads/master.zip

Official Website: https://github.com/mater1996/vue-photo-zoom-pro

Install & Download:

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

You Might Be Interested In:

Add Comment