Vue 中的放大镜效果 - vue-photo-zoom-pro

Vue 中的放大镜效果 - vue-photo-zoom-pro
插件名称 vue-photo-zoom-pro
发布时间 2021年8月20日
插件作者 mater1996

对图像应用放大镜效果的图像缩放组件。

安装和下载:

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

如何使用它:

1. 导入并注册组件。

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

2. 将vue-photo-zoom-pro组件添加到模板中。

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

3. 确定图像的路径。

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. 可用的组件道具。

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