使用v-viewer实现图片的放大缩小以及旋转


使用v-viewer实现图片的放大缩小以及旋转

  1. v-viewer npm链接https://www.npmjs.com/package/v-viewer
  2. 话不多说，先看效果图

在这里插入图片描述在这里插入图片描述

  1. 首先要安装v-viewer插件 npm install v-viewer
  2. 安装之后在需要引入插件的页面进行局部引入
  3. 因为我的项目都是组件引入，所以在这里也使用组件引入的方式

在这里插入图片描述

1
2
import 'viewerjs/dist/viewer.css';
import Viewer from "v-viewer/src/component.vue"
  1. 切记要引入 import 'viewerjs/dist/viewer.css' 这是v-viewer的样式文件
  2. 然后再页面直接写入
1
2
3
4
5
6
7
<viewer :options="options" :images="imgArr"
            @inited="inited"
            class="viewer" ref="viewer">
      <template scope="scope">
        <img v-for="src in scope.images" :src="src" :key="src">
      </template>
</viewer>

imgArr是你的图片数组
options是默认参数没有特殊需要就不需要更改了
在这里插入图片描述

  1. 然后添加组件的方法

在这里插入图片描述

  1. 在需要点图片放大的函数里添加点击事件

在这里插入图片描述
在这里插入图片描述
这样就可以看到效果了！