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

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

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

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

import 'viewerjs/dist/viewer.css';
import Viewer from "v-viewer/src/component.vue"

6. 切记要引入 import 'viewerjs/dist/viewer.css' 这是v-viewer的样式文件
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是默认参数没有特殊需要就不需要更改了

8. 然后添加组件的方法

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

这样就可以看到效果了！