科普：v-viewer
简单来说：v-viewer是一款支持vue项目中的图片浏览组件，它支持图片旋转、缩放、翻转等操作，支持配置化.非常强大
官网目录：v-viewer
安装依赖
直接执行命令：
npm install v-viewer --save
引入并使用依赖
下载完成之后，就可以配置了，具体操作就是引入并使用依赖了。
找到vue项目中的main.js 文件并加入如下代码：
// 引入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 }));
页面代码使用
所有前提工作都做完之后，我们就来到了重点，让图片可以进行预览，旋转，放大缩小等
其实用了这个插件之后特别简单，只需要给图片这个容器一个指令，就可以拥有这些功能。
v-viewer
消除日志打印
好归好，但是有一个问题，就是控制台打印太多了：
这么多日志肯定是不利于开发的，所以我想着把插件相关的日志给去掉
想要解决这个问题，只能是修改源码喽，一般情况下，尽量还是不要碰源码，但是这种情况，是肯定得碰的啦
打开项目的node_modules目录，往下翻，找到v-viewer这个文件夹的dist文件夹下的v-viewer.js文件
这个就是这个插件的js代码，作者在里面为了方便调试打印了一些日志，我们需要手动关闭：