vue3使用viewer

介绍

v-viewer是一款基于viewer.js的强大的插件，不但支持vue3版本，还支持vue2、JavaScript、jquery，有以下特点：

• 支持移动设备触摸事件
• 支持响应式
• 支持放大/缩小
• 支持旋转（类似微博的图片旋转）
• 支持水平/垂直翻转
• 支持图片移动
• 支持键盘
• 支持全屏幻灯片模式（可做屏保）
• 支持缩略图
• 支持标题显示
• 支持多种自定义事件

官网

官方网站
网站里介绍了三种用法，基本用法写的很详细了，这边就不再赘述，主要讲讲我使用这个插件的心路历程

需求

接到任务要求写一个图片查看标注系统，主要功能就是能查看图片、缩放，并对图片进行添加、删除标签的操作，并且明确不要用element的图片查看器，说是不好用……随手一百度就能找到这款viewer.js，经过一番探索，发现居然还有支持vue2、支持vue3的版本，开心！就决定用你啦！（还是开心的太早了……）

系统功能

系统包含一下功能：

• 切换图片要获取到当前展示的哪一张图片
• 点击图片缩略图可以重新排序并展示当前图片
• 能给当前图片添加标签
• 切换图片时获取当前图片的标签并展示标签

构造页面

页面形式确定后，首先想到是用API形式使用，因为可以随时随地想用就用，但就发现问题了，那就是inline模式下，查看大图的窗口没有办法关闭，会一直罩着，于是就放弃API了，然后就不知道为啥，经过尝试之后选择directive，以指令形式使用，其实组件和指令的都是大同小异，大家看着来就行。

改善页面

inline模式下，查看大图会一直无法关闭，怎么办呢？
改下页面布局，上面部分是图片的缩略图
预想的是点击图片下方主页面部分会切换图片的展示，

HTML部分代码如下

<div class="left"> <div class="imgs" v-viewer.rebuild="options" > <template > <div v-for="src in showimages" :key="src.name"> <img :src="src.url" class="img" > div> template> div> div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

官方例子中，