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

特性:

  1. 支持设置初始索引值
  2. 支持显示标题、日期、大小、当前图片位置
  3. 支持无限循环切换轮播
  4. 支持鼠标滑轮滚动、左右键、上下键、PageUp、PageDown、Home、End操作切换图片
  5. 支持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);if (d) {this.$nextTick(() => {this.addEvents();});} else {this.removeEvents();}},data: {handler(newValue, oldValue) {if (newValue && Object.keys(newValue).length) {this.currentIndex = newValue.currentIndex; //默认显示的图片索引this.swiperItems = newValue.photos;}},deep: true, //深度监听immediate: true, //立即执行},},mounted() {},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__indicators {bottom: revert;top: 400px;margin-top: 10px;display: flex;justify-content: center;flex-wrap: wrap;width: 100%;li {padding: 2px;}}.el-carousel__container {margin-top: -30px;.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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/739529.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

革命性创新:聚道云软件连接器如何为企业重塑财务管理流程?

一、客户介绍 某科技股份有限公司是一家专注于高性能存储技术领域的创新型科技公司。自公司成立以来&#xff0c;该公司始终秉持创新发展的理念&#xff0c;致力于为客户提供卓越的存储解决方案&#xff0c;以满足不同行业对数据存储的需求。作为业界的佼佼者&#xff0c;该公…

SpringBoot(依赖管理和自动配置)

文章目录 1.基本介绍1.springboot是什么&#xff1f;2.快速入门1.需求分析2.环境配置1.确认开发环境2.创建一个maven项目3.依赖配置 pom.xml4.文件目录5.MainApp.java &#xff08;启动类&#xff0c;常规配置&#xff09;6.HelloController.java &#xff08;测试Controller&a…

数字证书在网络安全中的重要性与实际应用

数字证书作为一种“电子身份证”&#xff0c;在当今数字化的商业环境中有着广泛的实际应用。它主要用于身份认证、加密通信、电子签名和安全访问控制等方面&#xff0c;为各行各业提供了安全可靠的数字化解决方案。 网络安全领域 在网络通信中&#xff0c;数字证书被广泛应用…

String 底层是如何实现的?

1、典型回答 String 底层是基于数组实现的&#xff0c;并且数组使用了 final 修饰&#xff0c;不同版本中的数组类型也是不同的&#xff1a; JDK9 之前&#xff08;不含JDK9&#xff09; String 类是使用 char[ ]&#xff08;字符数组&#xff09;实现的但 JDK9 之后&#xf…

MySQl基础入门⑧

上一章的内容 练习&#xff01;上一章表的内容&#xff01;&#xff01;&#xff01;熟能生巧 先重新创建一个数据库 命令create database supermarket; 然后查看数据库、再切换到当前数据库。 查看数据库 : show databases; 切换到当前数据库: use supermarket;创建员工…

动态规划:4种遍历方向图解+Python实现

前言 动态规划类题型在遍历过程中&#xff0c;根据状态转移函数的不同&#xff0c;代码实现时遍历的方向也会有所差异。总的来说&#xff0c;一共可以总结为下图四种模式&#xff1a; 红色五角星表示当前要计算的状态值&#xff1b;白底箭头代表哪些状态要提前算出来&#xf…

【C++设计模式】UML图的介绍及其画法

文章目录 前言一、UML图的介绍1.1 UML图是什么1.2 UML图的作用 二、UML图的画法2.1 最简单的UML图2.2 继承的UML图2.3 关联关系2.4 聚合关系2.5 组合关系2.6 依赖关系 总结 前言 在软件开发过程中&#xff0c;设计模式是一种被广泛应用的方法&#xff0c;它为解决特定问题提供…

【C++】AVL树的插入、旋转

目录 一、AVL树介绍1.1 概念1.2 定义 二、AVL树的实现2.1 插入2.2 旋转2.2.1 左单旋2.2.2 右单旋2.2.3 左右双旋2.2.4 右左双旋 一、AVL树介绍 1.1 概念 AVL树是高度平衡的二叉搜索树&#xff0c;相比普通的二叉搜索树&#xff0c;它防止了变成单支树的情况。因为AVL树每插入…

云服务器2核4G配置,阿里云和腾讯云哪个便宜?性能更好?

租用2核4G服务器费用多少&#xff1f;2核4G云服务器多少钱一年&#xff1f;1个月费用多少&#xff1f;阿里云2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年&#xff1b;腾讯云轻量2核4G服务器5M带宽165元一年、252元15个月、540元三…

C语言快速入门之字符函数和字符串函数

一.字符分类函数和字符转换函数 C语言中有一系列的函数专门做字符分类的&#xff0c;就是区分一个字符是属于什么类型的&#xff0c;头文件是 #include <ctype.h> 以下是具体函数&#xff1a; 这些函数的使用方法类似&#xff0c;我们写出一些代码来举例。 例如&…

解决ChatGPT发送消息没有反应

ChatGPT发消息没反应 今天照常使用ChatGPT来帮忙码代码&#xff0c;结果发现发出去的消息完全没有反应&#xff0c;即不给我处理&#xff0c;也没有抱任何的错误&#xff0c;按浏览器刷新&#xff0c;看起来很正常&#xff0c;可以查看历史对话&#xff0c;但是再次尝试还是一…

基于springboot+vue的线上教育系统(源码+论文)

目录 前言 一、功能设计 二、功能实现 三、库表设计 四、论文 前言 现在大家的生活方式正在被计算机的发展慢慢改变着&#xff0c;学习方式也逐渐由书本走向荧幕,我认为这并不是不能避免的,但说实话,现在的生活方式与以往相比有太大的改变&#xff0c;人们的娱乐方式不仅仅…

2023年第三届中国高校大数据挑战赛第二场赛题C:用户对博物馆评论的情感分析(附上代码与详细视频讲解)

问题重述&#xff1a; 博物馆是公共文化服务体系的重要组成部分。国家文物局发布&#xff0c; 2021 年我国新增备案博物馆 395 家&#xff0c;备案博物馆总数达 6183 家&#xff0c;排名全球前列&#xff1b;5605 家博物馆实现免费开放&#xff0c;占比达 90%以上&#xff1b;…

Dynamic Wallpaper v17.4 mac版 动态视频壁纸 兼容 M1/M2

Dynamic Wallpaper Engine 是一款适用于 Mac 电脑的视频动态壁纸&#xff0c; 告别单调的静态壁纸&#xff0c;拥抱活泼的动态壁纸。内置在线视频素材库&#xff0c;一键下载应用&#xff0c;也可导入本地视频&#xff0c;同时可以将视频设置为您的电脑屏保。 应用介绍 Dynam…

mysql 事务 及 Spring事务 初论

1.事务概述 事务是一种机制&#xff0c;用以维护数据库确保数据的完整性和一致性。。事务是用户定义的一个数据库操作序列,这些操作要么全做要么全不做,是一个不可分割的工作单位。例如,在关系数据库中,一个事务可以是一条SQL语句、一组SQL语句或整个程序。MySQL中主要使用INN…

“遥感新纪元:GPT技术引领地球观测的智慧革新“

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力。本文重点介绍ChatGPT在遥感中的应用&#xff0c;人工智能…

设计模式八:观察者模式

文章目录 1、观察者模式2、示例3、spring中的观察者模式3.1 spring观察者模式的使用3.2 spring观察者模式原理解析 1、观察者模式 观察者模式&#xff08;Observer Design Pattern&#xff09;,也叫做发布订阅模式&#xff08;Publish-Subscribe Design Pattern&#xff09;、模…

适合上班族的副业:steam游戏搬砖1天3小时,月入8K

互联网新时代&#xff0c;做副业的人越来越多。如果能充分利用下班后的时间&#xff0c;还真能赚到不少钱。steam游戏搬砖项目就是这样一个非常适合上班的副业&#xff0c;只要用心去操作&#xff0c;一个月至少收入两三千&#xff0c;多的轻松上万。 steam游戏搬砖项目其实做的…

2.4 RK3399项目开发实录-使用 SD 卡升级固件(物联技术666)

通过百度网盘分享的文件&#xff1a;嵌入式物联网单片… 链接:https://pan.baidu.com/s/1Zi9hj41p_dSskPOhIUnu9Q?pwd8qo1 提取码:8qo1 复制这段内容打开「百度网盘APP 即可获取」 本文主要介绍了如何将实现使用MicroSD卡&#xff0c;更新主板上的固件。但也仅限于固件小于4G大…

RabbitMQ - 01 - 快速入门

目录 界面总览 创建队列 选择默认交换机 发布消息 查看消息 通过实现以下目标快速入门 界面总览 RabbitMQ Management 界面总览 通道: 传输消息的通道 路由: 接收和路由(分发)消息 队列: 存储消息 消息队列的流程: 生产者将消息发送给路由,路由分发消息到各个队列存储…