当前位置: 首页 > news >正文

vue3中使用viewerjs实现图片预览效果

vue3中使用viewerjs实现图片预览效果

  • 1、前言
  • 2、实现效果
  • 3、在vue3项目中使用viewer.js
    • 3.1 安装
    • 3.2 在main.js中引入
    • 3.3 组件中使用

1、前言

viewer.js是一款开源的图片预览插件,功能十分强大:

  1. 支持移动设备触摸事件
  2. 支持响应式
  3. 支持放大/缩小
  4. 支持旋转(类似微博的图片旋转)
  5. 支持水平/垂直翻转
  6. 支持图片移动
  7. 支持键盘
  8. 支持全屏幻灯片模式(可做屏保)
  9. 支持缩略图
  10. 支持标题显示
  11. 支持多种自定义事件

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是一款开源的图片预览插件&#xff0c;功能十分强大: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转&#xff08;类…...

Erlang:Linux下使用observer、debugger进行调试

之前写了一篇文章Erlang:使用observer连接远程服务器进行调试&#xff0c;内容是绕过Linux服务器缺失’wxe_driver.so’的wxWidgets环境&#xff0c;启动observer远程连接实现observer调试。 本文则讨论在Linux环境下通过编译安装的方式&#xff0c;保证wxWidgets环境可用性&am…...

2023 年高教社杯全国大学生数学建模竞赛-E 题 黄河水沙监测数据分析详解+思路+Python代码

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

一生一芯10——verilator v5.008环境搭建

搜索 verilator 官网&#xff0c;得到网址如下&#xff1a; https://www.veripool.org/verilator/ 点击download 找到 git quick install 可以看到git快捷安装所需命令行 可以看到&#xff0c;需要预先安装下面的包文件&#xff0c;去掉前面的#注释符号进行安装 直接进行下面…...

信息化发展27

关键技术一云安全技术 云安全研究主要包含&#xff1a; 一是云计算技术本身的安全保护工作&#xff0c; 涉及相应的数据完整性及可用性、隐私保护性以及服务可用性等方面的内容&#xff1b; 二是借助于云服务的方式来保障客户端用户的安全防护需求&#xff0c; 通过云计算技术…...

leetcode做题笔记129. 求根节点到叶节点数字之和

给你一个二叉树的根节点 root &#xff0c;树中每个节点都存放有一个 0 到 9 之间的数字。 每条从根节点到叶节点的路径都代表一个数字&#xff1a; 例如&#xff0c;从根节点到叶节点的路径 1 -> 2 -> 3 表示数字 123 。 计算从根节点到叶节点生成的 所有数字之和 。…...

任务管理系统所需功能概述

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

一文学会K8s集群搭建

环境准备 节点数量&#xff1a;2台虚拟机 centos7硬件配置&#xff1a;master节点内存至少3G&#xff08;2G后面在master节点初始化集群时会报错&#xff0c;内存不够&#xff09;&#xff0c;node节点可以2G&#xff0c;CPU至少2个&#xff0c;硬盘至少30G网络要求&#xff1…...

Win10右键 nvidia rtx desktop manager 怎么删除(最新)

在更新了最新的 nvidia后原来的隐藏鼠标右键菜单后不行了&#xff0c;新方法如下&#xff1a; 步骤一&#xff1a;在键盘“WINR”键同时操作下&#xff0c;启动运行框&#xff0c;在框内输入“regedit”&#xff0c;打开深度系统win7 的注册表编辑器。 步骤二&#xff1a;为防…...

MySQL加密的几种常见方式

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

Android文字识别-阿里云OCR调用

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

度矩阵、邻接矩阵

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

20个经典巧妙电路合集

1、防反接保护&#xff08;二极管&#xff09; 在实际电子设计中&#xff0c;防反接保护电路非常重要&#xff0c;不要觉得自己肯定不会接错&#xff0c;实际上无论多么小心&#xff0c;还是会犯错误...... 最简单的就是利用二极管了&#xff0c;利用二极管的单向导电性&#…...

2023全国大学生数学建模ABCDE选题建议,思路模型,小白要怎么选?难度怎么样

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

【力扣每日一题】2023.9.5 从两个数字数组里生成最小数字

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们两个数字数组&#xff0c;要我们用这两个数组里的元素组成一个数字&#xff0c;这个数字里需要同时拥有两个数组里的至少一个元…...

跳出Lambda表达式forEach()循环解决思路

背景 在一次需求开发时&#xff0c;发现使用Lambda的forEach()跳不出循环。如下示例代码&#xff0c;想在遍历满足条件时跳出循环。 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在公有云市场一直处于行业领先地位&#xff0c;其培训认证体系也是非常的完善的。而且经常在国内组织一些技术论坛&#xff0c;技术分享&#xff0c;公开课&#xff0c;训练营等技术活动。 AWS训练营适合希望学习和考取AWS助理级架构师/专家级架构师&#xff08;AWS SAA/AW…...

2023高教社杯 国赛数学建模E题思路 - 黄河水沙监测数据分析

1 赛题 E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响&#xff0c; 以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位…...

06_快速入门案例实战之电商网站商品管理:集群健康检查,文档CRUD

document数据格式电商网站商品管理案例&#xff1a;背景介绍简单的集群管理商品的CRUD操作&#xff08;document CRUD (3) 集群的管理 1.快速检查集群的健康状态: cat api 可以查看es中各种各样的数据 GET /_cat/health?v epoch timestamp cluster status node…...

机车整备场数字孪生 | 图扑智慧铁路

机车整备场是铁路运输系统中的重要组成部分&#xff0c;它承担着机车的维修、保养和整备工作&#xff0c;对保障铁路运输的运维和安全起着至关重要的作用。 随着铁路运输的发展、机车技术的不断进步&#xff0c;以及数字化转型的不断推进&#xff0c;数字孪生技术在机车整备场…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

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?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

网络编程(UDP编程)

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

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

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

Spring数据访问模块设计

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

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...