vue3中使用viewerjs实现图片预览效果
vue3中使用viewerjs实现图片预览效果
- 1、前言
- 2、实现效果
- 3、在vue3项目中使用viewer.js
- 3.1 安装
- 3.2 在main.js中引入
- 3.3 组件中使用
1、前言
viewer.js是一款开源的图片预览插件,功能十分强大:
- 支持移动设备触摸事件
- 支持响应式
- 支持放大/缩小
- 支持旋转(类似微博的图片旋转)
- 支持水平/垂直翻转
- 支持图片移动
- 支持键盘
- 支持全屏幻灯片模式(可做屏保)
- 支持缩略图
- 支持标题显示
- 支持多种自定义事件
GitHub
地址:https://github.com/fengyuanchen/viewerjs
常用配置参数:
2、实现效果
3、在vue3项目中使用viewer.js
3.1 安装
npm install v-viewer -S
3.2 在main.js中引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'app.use(Viewer, {defaultOptions: {// 需要配置的属性 注意属性并没有引号title: false,toolbar: false}
})
3.3 组件中使用
<viewer class="image-box" :images="sceneData"><div v-for="img in sceneData" :key="img.id"><img class="image" :src="img.url" alt=""></div>
</viewer>
相关文章:

vue3中使用viewerjs实现图片预览效果
vue3中使用viewerjs实现图片预览效果 1、前言2、实现效果3、在vue3项目中使用viewer.js3.1 安装3.2 在main.js中引入3.3 组件中使用 1、前言 viewer.js是一款开源的图片预览插件,功能十分强大: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类…...
Erlang:Linux下使用observer、debugger进行调试
之前写了一篇文章Erlang:使用observer连接远程服务器进行调试,内容是绕过Linux服务器缺失’wxe_driver.so’的wxWidgets环境,启动observer远程连接实现observer调试。 本文则讨论在Linux环境下通过编译安装的方式,保证wxWidgets环境可用性&am…...

2023 年高教社杯全国大学生数学建模竞赛-E 题 黄河水沙监测数据分析详解+思路+Python代码
2023 年高教社杯全国大学生数学建模竞赛-E 题 黄河水沙监测数据分析 十分激动啊啊啊题目终于出来了!!官网6点就进去了结果直接卡死现在才拿到题目,我是打算A-E题全部做一遍。简单介绍一下我自己:博主专注建模四年,参与…...

一生一芯10——verilator v5.008环境搭建
搜索 verilator 官网,得到网址如下: https://www.veripool.org/verilator/ 点击download 找到 git quick install 可以看到git快捷安装所需命令行 可以看到,需要预先安装下面的包文件,去掉前面的#注释符号进行安装 直接进行下面…...
信息化发展27
关键技术一云安全技术 云安全研究主要包含: 一是云计算技术本身的安全保护工作, 涉及相应的数据完整性及可用性、隐私保护性以及服务可用性等方面的内容; 二是借助于云服务的方式来保障客户端用户的安全防护需求, 通过云计算技术…...
leetcode做题笔记129. 求根节点到叶节点数字之和
给你一个二叉树的根节点 root ,树中每个节点都存放有一个 0 到 9 之间的数字。 每条从根节点到叶节点的路径都代表一个数字: 例如,从根节点到叶节点的路径 1 -> 2 -> 3 表示数字 123 。 计算从根节点到叶节点生成的 所有数字之和 。…...

任务管理系统所需功能概述
"任务管理需要有哪些功能?清晰的任务创建与编辑、智能分类和标签系统、提醒与通知功能、进度跟踪与报告、协作与共享功能、集成与兼容性。" 一款优秀的任务管理工具可以帮助我们有效地规划、执行和监控各项任务,提高工作效率。本文将探讨一款理…...

一文学会K8s集群搭建
环境准备 节点数量:2台虚拟机 centos7硬件配置:master节点内存至少3G(2G后面在master节点初始化集群时会报错,内存不够),node节点可以2G,CPU至少2个,硬盘至少30G网络要求࿱…...

Win10右键 nvidia rtx desktop manager 怎么删除(最新)
在更新了最新的 nvidia后原来的隐藏鼠标右键菜单后不行了,新方法如下: 步骤一:在键盘“WINR”键同时操作下,启动运行框,在框内输入“regedit”,打开深度系统win7 的注册表编辑器。 步骤二:为防…...

MySQL加密的几种常见方式
MySQL提供了多种加密方式来保护数据的安全性。下面是几种常见的MySQL加密方式: 密码加密: MySQL5.7及以上版本使用SHA-256算法对密码进行加密。这种加密方式更安全,可以防止密码泄露。 之前的MySQL版本使用SHA-1算法进行密码加密。这种加密方…...

Android文字识别-阿里云OCR调用
0,阿里云OCR有在线识别接口,直接用httpPOST调用就能实现,开发起来很快捷。识别率还蛮好,摄像头斜着拍也能识别出来。实测识别时间单次在2s左右,普通使用使能满足需求的。 1,在阿里云页面先注册申请免费试用…...

度矩阵、邻接矩阵
度矩阵(degree matrix) 度矩阵是对角阵,对角上的元素为各个顶点的度,顶点vi的度表示和该顶点相关联的变得数量。 在无向图中,顶点vi的度d(vi)N(i)(即与顶点相连的边的数目)有向图中࿰…...

20个经典巧妙电路合集
1、防反接保护(二极管) 在实际电子设计中,防反接保护电路非常重要,不要觉得自己肯定不会接错,实际上无论多么小心,还是会犯错误...... 最简单的就是利用二极管了,利用二极管的单向导电性&#…...

2023全国大学生数学建模ABCDE选题建议,思路模型,小白要怎么选?难度怎么样
首先最重要的,难度C<B<A,D、E题推荐选E题 大家可以查看我们的视频讲解,在这里:【2023全国大学生数学建模竞赛选题建议,难度分析,小白应该怎么选】 https://b23.tv/S6O26uc 选题建议视频播放b23.t…...

【力扣每日一题】2023.9.5 从两个数字数组里生成最小数字
目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目给我们两个数字数组,要我们用这两个数组里的元素组成一个数字,这个数字里需要同时拥有两个数组里的至少一个元…...

跳出Lambda表达式forEach()循环解决思路
背景 在一次需求开发时,发现使用Lambda的forEach()跳不出循环。如下示例代码,想在遍历满足条件时跳出循环。 public static void main(String[] args) {List<Integer> list Arrays.asList(1, 4, 5, 7, 9, 11);list.forEach(e -> {if (e % 2 …...
2023年度AWS SAP直冲云霄训练营学习分享
AWS在公有云市场一直处于行业领先地位,其培训认证体系也是非常的完善的。而且经常在国内组织一些技术论坛,技术分享,公开课,训练营等技术活动。 AWS训练营适合希望学习和考取AWS助理级架构师/专家级架构师(AWS SAA/AW…...

2023高教社杯 国赛数学建模E题思路 - 黄河水沙监测数据分析
1 赛题 E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响, 以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位…...
06_快速入门案例实战之电商网站商品管理:集群健康检查,文档CRUD
document数据格式电商网站商品管理案例:背景介绍简单的集群管理商品的CRUD操作(document CRUD (3) 集群的管理 1.快速检查集群的健康状态: cat api 可以查看es中各种各样的数据 GET /_cat/health?v epoch timestamp cluster status node…...

机车整备场数字孪生 | 图扑智慧铁路
机车整备场是铁路运输系统中的重要组成部分,它承担着机车的维修、保养和整备工作,对保障铁路运输的运维和安全起着至关重要的作用。 随着铁路运输的发展、机车技术的不断进步,以及数字化转型的不断推进,数字孪生技术在机车整备场…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
逻辑回归:给不确定性划界的分类大师
想象你是一名医生。面对患者的检查报告(肿瘤大小、血液指标),你需要做出一个**决定性判断**:恶性还是良性?这种“非黑即白”的抉择,正是**逻辑回归(Logistic Regression)** 的战场&a…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...

网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...