vue-interactive-image使用案例

Vue-interactive-image 是一个可以实现图片的放大、缩小和移动的 Vue 组件。下面是一个简单的使用案例：

1. 安装组件

在终端中使用以下命令安装组件：

npm install vue-interactive-image --save

2. 引入组件

在需要使用的组件中引入 vue-interactive-image：

<template>
  <div>
    <interactive-image :src="imageSrc" />
  </div>
</template>

<script>
import InteractiveImage from 'vue-interactive-image'

export default {
  name: 'MyComponent',
  components: {
    InteractiveImage
  },
  data() {
    return {
      imageSrc: 'https://picsum.photos/500/300' // 图片链接
    }
  }
}
</script>

3. 使用组件

在模板中使用组件即可：

<interactive-image :src="imageSrc" />

这样就完成了一个简单的图片放大、缩小和移动的功能。

除了基本的使用，vue-interactive-image 还支持一些其他的配置参数，例如：

- `zoom`：设置图片的最大缩放比例
- `initScale`：设置图片初始化时的缩放比例
- `minScale`：设置图片的最小缩放比例
- `maxScale`：设置图片的最大缩放比例
- `speed`：设置图片移动时的速度

具体的使用方法可以参考 vue-interactive-image 的官方文档。