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 | 图片加载时的内容 |