您现在的位置是:首页 > 技术教程 正文

vue3使用viewer

admin 阅读: 2024-04-01
后台-插件-广告管理-内容页头部广告(手机)

介绍

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

官方例子中,