Image magnifying glass for Vue.js using vue-photo-zoom-pro

Category: Images Vue.js | August 26, 2021
Author: mater1996
Official Page: Go to website
Last Update: August 26, 2021
License: MIT

vuejs image magnifying glass

Description:

A simple and beautiful Image magnifying glass for Vue.js using vue-photo-zoom-pro. If you are creating a gallery page or a product details page then, this component can be useful.

How to install and use it?

1. Install the component with the help of NPM.

npm install vue-photo-zoom-pro

2. Import the required components.

import vuePhotoZoomPro from 'vue-photo-zoom-pro'
import vuePhotoZoomPro from 'vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css'

3. Register the image magnifying glass component.

export default {
  components: {
    vuePhotoZoomPro
  }
}

4. Add the vue-photo-zoom-pro component to your template file.

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

5. Now, set the path of image.

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

6. Available 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: ''
      }
    }