vue-photo-zoomer

基于vue2.x设计的图片放大镜组件。

DEMO

<template>
  <div class="zoomer-x">
    <VuePhotoZoomer
      :url="demoImg"
      :style="{
        width: '500px'
      }"
    />
  </div>
</template>
 
<script>
import VuePhotoZoomer from 'vue-photo-zoomer'
import demoImg from './assets/demo.jpg'
export default {
  name: 'App',
  components: {
    VuePhotoZoomer
  },
  data () {
    return {
      demoImg
    }
  }
}
</script>
<style>
.zoomer-x {
  text-align: center;
}
</style>
 

示例

Props

参数	说明	类型	默认值
url	图片的URL	String	-
urlFull	放大后的图片URL	String	url
scale	放大倍数	Number	2
viewerStyle	观察区域的样式	Object	-
magnifierStyle	放大镜的样式	Object	-

## Slots

名称	说明
loading	图片加载时的内容