内部的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

变更日志：

v1.1.0（05/13/2021）

• 添加预加载缩放图像选项
• 添加了隐藏关闭按钮和提示的选项
• 增加了宽度，高度和响应性垫片选项
• 添加了“悬停缩放”选项
• 添加了缩放比例选项