【vue v-viewer插件】5分钟搞定图片预览，旋转，放大等功能

实现图片放大功能，得善用插件啊！

实现效果如下：

安装插件并引入

npm install v-viewer --save

// 引入Viewer插件
import VueViewer, { directive as viewerDirective } from 'v-viewer';
// 引入Viewer插件的图片预览器的样式
import 'viewerjs/dist/viewer.css'; 
// 使用Viewer图片预览器
Vue.use(VueViewer)
// 用于图片预览的指令方式调用 在元素上加上会处理元素下所有的图片,为图片添加点击事件,点击即可预览
Vue.directive('viewer', viewerDirective({
  debug: true
}));

js

<img
     :src="'http://data.pengbo-tech.com' + item1.storePath"
      alt=""
      v-viewer
/>

点击图片即可预览

参考官网：Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作 - Mirari's Blog