当前位置: 首页 > 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;数字孪生技术在机车整备场…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中&#xff0c;选择 环境 -> 常规 &#xff0c;将其中的颜色主题改成深色 点击确定&#xff0c;更改完成...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

服务器硬防的应用场景都有哪些?

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...