【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片

特性:
- 支持设置初始索引值
- 支持显示标题、日期、大小、当前图片位置
- 支持无限循环切换轮播
- 支持鼠标滑轮滚动、左右键、上下键、PageUp、PageDown、Home、End操作切换图片
- 支持Esc关闭窗口
sgPhotoPlayer源码
<template><div :class="$options.name" v-if="visible"><div class="swiper-container"><el-carouselclass="image-swiper"ref="carousel":initial-index="currentIndex":autoplay="false":height="'100%'":indicator-position="swiperItems.length <= 1 ? 'none' : ''":arrow="swiperItems.length <= 1 ? 'never' : ''"@change="(idx) => (currentIndex = idx)"><el-carousel-item v-for="(a, $i) in swiperItems" :key="$i"><el-imagedraggable="false"style="width: 600px; height: 400px":src="a.sm":preview-src-list="swiperItems.map((v) => v.lg)":initial-index="$i":fit="'cover'"></el-image></el-carousel-item></el-carousel><div class="desc"><label class="number">当前位置:{{ currentIndex + 1 }}/{{ swiperItems.length }}</label><labelclass="title":title="`${swiperItems[currentIndex].title}(${swiperItems[currentIndex].size})`">{{ swiperItems[currentIndex].title }}({{ swiperItems[currentIndex].size }})</label><label class="date">{{ swiperItems[currentIndex].date }}</label></div></div><el-tooltip:content="`关闭`":effect="`light`":enterable="false":placement="`top-start`":popper-class="`sg-el-tooltip`":transition="`none`"><el-buttonclass="sg-closeModalBtn"type="primary"icon="el-icon-close"@click="visible = false"circle/></el-tooltip><div class="bg" @click="visible = false"></div></div>
</template><script>
export default {name: "sgPhotoPlayer",data() {return {currentIndex: 0,showBigImg: false,loading: false, //是否加载中visible: false, //是否显示swiperItems: [/* {title:`标题`,date:`时间`,size:`文件大小`,sm: "static/img/sm/1.jpg",//小图路径lg: "static/img/lg/1.jpg",//大图路径}, */],};},props: ["data","value", //是否显示],watch: {value: {handler(d) {this.visible = d;},deep: true,immediate: true,},visible(d) {this.$emit("input", d);},data: {handler(newValue, oldValue) {//console.log('深度监听:', newValue, oldValue);if (newValue && Object.keys(newValue).length) {this.currentIndex = newValue.currentIndex; //默认显示的图片索引this.swiperItems = newValue.photos;}},deep: true, //深度监听immediate: true, //立即执行},},mounted() {this.addEvents();},destroyed() {this.removeEvents();},methods: {addEvents(d) {this.removeEvents();addEventListener("mousewheel", this.mousewheel);addEventListener("keydown", this.keydown);addEventListener("keyup", this.keyup);},removeEvents(d) {removeEventListener("mousewheel", this.mousewheel);removeEventListener("keydown", this.keydown);removeEventListener("keyup", this.keyup);},mousewheel(e) {this.showBigImg = Boolean(document.querySelector(`.el-image-viewer__mask`));if (this.showBigImg) return;if (e.deltaY < 0) return this.$refs.carousel.prev();if (e.deltaY > 0) return this.$refs.carousel.next();},keydown(e) {let key = e.key.toLocaleLowerCase();if (["escape","home","end","pageup","arrowup","arrowleft","pagedown","arrowdown","arrowright",].includes(key)) {e.preventDefault();return false;}},keyup(e) {this.showBigImg = Boolean(document.querySelector(`.el-image-viewer__mask`));let key = e.key.toLocaleLowerCase();if (["escape", "home", "end", "pageup", "arrowup", "pagedown", "arrowdown"].includes(key) &&this.showBigImg)return;switch (key) {case "escape":this.visible = false;break;case "home":this.$refs.carousel.setActiveItem(0);break;case "end":this.$refs.carousel.setActiveItem(this.swiperItems.length - 1);break;case "pageup":case "arrowup":case "arrowleft":this.$refs.carousel.prev();break;case "pagedown":case "arrowdown":case "arrowright":this.$refs.carousel.next();break;}},},
};
</script><style lang="scss" scoped>
.sgPhotoPlayer {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 2000;display: flex;justify-content: center;align-items: center;.swiper-container {position: absolute;width: 600px;height: 450px;margin: auto;top: 0;left: 0;right: 0;bottom: 0;.image-swiper {width: 100%;height: 100%;overflow: hidden;>>> .el-carousel__container {.el-carousel__arrow,.el-carousel__item {transition: 0.382s !important;}.el-carousel__arrow {// transform: translateY(-40px);}.el-carousel__item {display: flex;justify-content: center;flex-direction: column;}}}.desc {width: 100%;display: flex;justify-content: space-between;align-items: center;flex-wrap: nowrap;box-sizing: border-box;margin: auto;/*文本阴影*/color: white;text-shadow: 1px 1px 1px black;line-height: 1.6;& > * {font-family: "Microsoft YaHei", "DIN-Light";font-weight: normal;font-size: 14px !important;white-space: nowrap;/*单行省略号*/overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.number {flex-shrink: 0;width: 140px;}.title {box-sizing: border-box;padding: 0 10px;}.date {flex-shrink: 0;width: 140px;}}}.bg {background-color: #000000cc;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: -1;}
}
</style>
应用
// 打开图片openPhoto(d) {this.photoData= {currentIndex: this.photos.findIndex((v) => v.ID == d.ID), //当前图片索引值photos: this.photos.map((v) => ({sm: v.smURL,//小图路径lg: v.lgURL,//大图路径title: this.$g.getFileFullName(v),//标题date: v.GXSJ,//时间size: this.$g.getFileSize(v),//文件大小})),};this.showPhotoPlayer = true;},
基于elment-UI的el-carousel和el-image组件el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果_el-carousel 配合el-image preview-src-list-CSDN博客文章浏览阅读970次。【代码】el-carousel和el-image组合实现swiper左右滑动图片,点击某张图片放大预览的效果。_el-carousel 配合el-image preview-src-listhttps://blog.csdn.net/qq_37860634/article/details/131516077
相关文章:
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
特性: 支持设置初始索引值支持显示标题、日期、大小、当前图片位置支持无限循环切换轮播支持鼠标滑轮滚动、左右键、上下键、PageUp、PageDown、Home、End操作切换图片支持Esc关闭窗口 sgPhotoPlayer源码 <template><div :class"$options.name"…...
cefsharp(winForm)调用js脚本,js脚本调用c#方法
本博文针对js-csharp交互(相互调用的应用) (一)、js调用c#方法 1.1 类名称:cs_js_obj public class cs_js_obj{//注意,js调用C#,不一定在主线程上调用的,需要用SynchronizationContext来切换到主线程//private System.Threading.SynchronizationContext context;//…...
Tensorflow实现手写数字识别
模型架构 具有10个神经元,对应10个类别(0-9的数字)。使用softmax激活函数,对多分类问题进行概率归一化。输出层 (Dense):具有64个神经元。激活函数为ReLU。全连接层 (Dense):将二维数据展平成一维,为全连接层做准备。展…...
谈谈杭州某小公司面试的经历
#面试#本人bg211本,一段实习,前几天面了杭州某小厂公司,直接给我干无语了! 1、先介绍介绍你自己,我说了我的一个情况。 2、没获奖和竞赛经历吗?我说确实没有呢,面试官叹气了一下,只是…...
如何使用WinSCP结合Cpolar实现公网远程访问内网Linux服务器
文章目录 1. 简介2. 软件下载安装:3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 Winscp是一个支持SSH(Secure SHell)的可视化SCP(Secure Copy)文件传输软件,它的主要功能是在本地与远程计…...
6. 互质
互质 互质 互质 每次测试的时间限制: 3 秒 每次测试的时间限制:3 秒 每次测试的时间限制:3秒 每次测试的内存限制: 256 兆字节 每次测试的内存限制:256 兆字节 每次测试的内存限制:256兆字节 题目描述 给定…...
微信小程序(五十一)页面背景(全屏)
注释很详细,直接上代码 上一篇 新增内容: 1.页面背景的基本写法 2.去除默认上标题实习全屏背景 3. 背景适配细节 源码: index.wxss page{/* 背景链接 */background-image: url(https://pic3.zhimg.com/v2-a76bafdecdacebcc89b5d4f351a53e6a_…...
MATLAB | MATLAB版玫瑰祝伟大女性节日快乐!!
妇女节到了,这里祝全体伟大的女性,节日快乐,事业有成,万事胜意。 作为MATLAB爱好者,这里还是老传统画朵花叭,不过感觉大部分样式的花都画过了,这里将一段很古老的2012年的html玫瑰花代码转成MA…...
LVS+Keepalived 高可用集群
目录 一.Keepalived工具介绍 1.用户空间核心组件: (1)vrrp stack:VIP消息通告 (2)checkers:监测real server(简单来说 就是监控后端真实服务器的服务) (…...
Linux:kubernetes(k8s)探针ReadinessProbe的使用(9)
本章yaml文件是根据之前文章迭代修改过来的 先将之前的pod删除,然后使用下面这个yaml进行生成pod apiVersion: v1 # api文档版本 kind: Pod # 资源对象类型 metadata: # pod相关的元数据,用于描述pod的数据name: nginx-po # pod名称labels: # pod的标…...
专题一 - 双指针 - leetcode 1089. 复写零 - 简单难度
leetcode 1089. 复写零 leetcode 1089. 复写零 | 简单难度1. 题目详情1. 原题链接2. 基础框架 2. 解题思路1. 题目分析2. 算法原理3. 时间复杂度 3. 代码实现4. 知识与收获 leetcode 1089. 复写零 | 简单难度 1. 题目详情 给你一个长度固定的整数数组 arr ,请你将…...
深入浅出(二)MVVM
MVVM 1. 简介2. 示例 1. 简介 2. 示例 示例下载地址:https://download.csdn.net/download/qq_43572400/88925141 创建C# WPF应用(.NET Framework)工程,WpfApp1 添加程序集 GalaSoft.MvvmLight 创建ViewModel文件夹,并创建MainWindowV…...
2023年第三届中国高校大数据挑战赛(第二场)A题思路
竞赛时间 (1)报名时间:即日起至2024年3月8日 (2)比赛时间:2024年3月9日8:00至2024年3月12日20:00 (3)成绩公布:2024年4月30日前 赛题方向:大数据统计分析 …...
数据挖掘:
一.数据仓库概述: 1.1数据仓库概述 1.1.1数据仓库定义 数据仓库是一个用于支持管理决策的、面向主题、集成、相对稳定且反映历史变化的数据集合。 1.1.2数据仓库四大特征 集成性(Integration): 数据仓库集成了来自多个不同来源…...
NDK,Jni
使用 NDK(Native Development Kit)意味着在 Android 应用程序中集成 C/C 代码。通常情况下,Android 应用程序主要使用 Java 或 Kotlin 编写,但有时候需要使用 C/C 来实现一些特定的功能或性能优化。 NDK 提供了一组工具和库&…...
Java实战:Spring Boot整合Canal与RabbitMQ实时监听数据库变更并高效处理
引言 在现代微服务架构中,数据的变化往往需要及时地传播给各个相关服务,以便于同步更新状态或触发业务逻辑。Canal作为一个开源的MySQL binlog订阅和消费组件,能够帮助我们实时捕获数据库的增删改操作。而RabbitMQ作为一款消息中间件&#x…...
机器学习:探索计算机的自我进化之路
当我们谈论机器学习时,我们在谈论什么呢?机器学习是一门跨学科的学科,它使用计算机模拟或实现人类学习行为,通过不断地获取新的知识和技能,重新组织已有的知识结构,从而提高自身的性能。简单来说࿰…...
【Flink网络数据传输(4)】RecordWriter(下)封装数据并发送到网络的过程
文章目录 一. RecordWriter封装数据并发送到网络1. 数据发送到网络的具体流程2. 源码层面2.1. Serializer的实现逻辑a. SpanningRecordSerializer的实现b. SpanningRecordSerializer中如何对数据元素进行序列化 2.2. 将ByteBuffer中间数据写入BufferBuilder 二. BufferBuilder申…...
【牛客】VL74 异步复位同步释放
描述 题目描述: 请使用异步复位同步释放来将输入数据a存储到寄存器中,并画图说明异步复位同步释放的机制原理 信号示意图: clk为时钟 rst_n为低电平复位 d信号输入 dout信号输出 波形示意图: 输入描述: clk为时…...
CSS3笔记
1.相同优先级的样式以写在后面的为主。 2.交集选择器,并且 条件挨在一起 p.rich{...} /*p元素class有rich的元素*/ 3.并集选择器,或者 逗号隔开 .class1,class2{...}/*满足其中一个类名都会使用该样式*/ 4.后代选择器 空格 隔开 所有符合的包括孙子及…...
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?
Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以? 在 Golang 的面试中,map 类型的使用是一个常见的考点,其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录,但是由于这个树组件的节点越来越多,导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多,导致的浏览器卡顿,这里很明显就需要用到虚拟列表的技术&…...
