Vue使用v-viewer插件实现图片预览和缩放和旋转等功能(推荐)

小花皮猪 2023-03-20 我要评论

前言

昨天不是做了一个动态的图片展示吗，今天就寻思着能不能完善下功能，可以通过点击图片的方式进行放大缩小，甚至旋转。

图片展示可以参考：Vue显示图片的几种方式

然后我一顿收搜，发现了vue中有这么一款插件：v-viewer

wc，不看不知道，一看吓一跳，这个插件居然如此nb，最主要的是，这么厉害的插件，使用其他特别简单！

先给大家简单科普下v-viewe这个插件吧

科普：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
}));