内部的Vue.js缩放组件，允许用户单击/点击以放大图像。

也可以通过在触摸设备上拖动以及在非触摸设备上拖动或悬停平移来移动图像。

该组件在移动设备上支持响应图像和可选的全屏缩放。

安装和下载：

# Yarn
$ yarn add vue-inner-image-zoom

# NPM
$ npm i vue-inner-image-zoom

如何使用它：

1.导入并注册组件。

import 'vue-inner-image-zoom/lib/vue-inner-image-zoom.css';
import InnerImageZoom from 'vue-inner-image-zoom';

export default {
  components: {
    'inner-image-zoom': InnerImageZoom
  }
}

2.将inner-image-zoom组件添加到模板，并定义原始/预览图像的路径，如下所示：

<inner-image-zoom 
  src="/path/to/image.jpg" 
  zoomSrc="/path/to/zoom-image.jpg" />

3.可用的组件道具来配置缩放行为。

moveType: { // pan or drag
  type: String,
  default: 'pan'
},
srcSet: String,
sizes: String,
sources: Array,
alt: String,
fadeDuration: {
  type: Number,
  default: 150
},
fullscreenOnMobile: Boolean,
mobileBreakpoint: {
  type: Number,
  default: 640
},
className: String,
afterZoomIn: Function,
afterZoomOut: Function

---

官网：https://github.com/laurenashpole/vue-inner-image-zoom

演示：https://www.vue365.cn/code_demo.php?id=3762

GitHub下载：https://github.com/laurenashpole/vue-inner-image-zoom/archive/master.zip