【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-carousel
        class="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-image
            draggable="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
        >
        <label
          class="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-button
        class="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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

线程和进程

参考链接&#xff1a; 1.基本概念 进程&#xff1a;Windows系统中&#xff0c;一个运行的xx.exe就是一个进程。例如打开浏览器就是一个进程 线程&#xff1a;进程中的一个执行任务&#xff08;控制单元&#xff09;&#xff0c;负责当前进程中程序的执行。一个进程至少有一个…

无人机|LQR控制算法及其无人机控制中的应用仿真

前言 LQR全称Linear Quadratic Regulator&#xff08;线性二次调节器&#xff09;&#xff0c;顾名思义用于解决形如 x ˙ A x B u y C x D u \begin{aligned}\dot{x}&AxBu\\y&CxDu\end{aligned} x˙y​AxBuCxDu​ 线性时不变系统的一种线性控制方法&#xff0c;…

初识REDHAWK

文章目录 前言一、什么是 REDHAWK?1、概述2、REDHAWK 的应用 二、REDHAWK 的流程管理和交互方法1、流程管理2、数据传输 三、入门1、安装 REDHAWK2、IDE 快速入门①、启动 REDHAWK IDE②、打开 Chalkboard③、创建信号发生器④、测试组件的输入/输出响应 前言 REDHAWK 是一个…

Opencv 绘制线段、矩形、圆形、多边形操作

1、前言 OpenCV提供了许多用于绘制图形的方法 包括绘制线段的line()方法、绘制矩形的 rectangle()方法、绘制圆形的 circle()方法、绘制多边形的 polylines()方法和绘制文字的 putText()方法 本章将依次对上述各个方法进行讲解&#xff0c;并作出相应实验。 因为 OpenCV 中的…

简洁的链式思维(CCoT)提示

原文地址&#xff1a;Concise Chain-of-Thought (CCoT) Prompting 传统的CoT导致了输出令牌使用的增加&#xff0c;而CCoT提示是一种旨在减少LLM响应的冗长性和推理时间的提示工程技术。 2024 年 1 月 24 日 Areas where Chain-Of-Thought-like methodology has been introd…

【C/C++ 学习笔记】函数

【C/C 学习笔记】函数 视频地址: Bilibili 函数结构 返回值类型函数名参数列表函数体语句return 表达式 返回值类型 函数名 (参数列表) {函数体语句;return 表达式; }声明 在函数定义之前声明函数&#xff0c;可以声明多次&#xff0c;但是只能定义依次 返回值类型 函数名…

计算机考研|保姆级择校+资料+全年规划

本科211&#xff0c;研究生上岸某985 计算机考研备考过程中走了不少弯路&#xff0c;希望我的经验能够帮助大家少走弯路 大家决定考研之前&#xff0c;一定要认真思考自己考研的目的是什么&#xff0c;有的人是随大流&#xff0c;别人考研&#xff0c;就跟风考研&#xff0c;有…

JDK 17:Java生态系统的最新巨擘

JDK 17&#xff1a;Java生态系统的最新巨擘 &#x1f680; JDK 17&#xff1a;Java生态系统的最新巨擘 &#x1f680;摘要 &#x1f31f;引言 &#x1f308;模块一&#xff1a;性能优化与提升 &#x1f527;垃圾回收器的改进&#xff1a;JIT编译器的优化&#xff1a;其他性能优…

Visual Basic6.0零基础教学(2)—vb中类的介绍和基本控件的属性

Visual Basic 6.0中类的介绍和基本控件的属性 文章目录 Visual Basic 6.0中类的介绍和基本控件的属性前言一、对象的有关概念1.类2.对象3.对象的三要素4.5. VB程序的执行步骤 二、基本控件属性1.修改控件属性的练习案例 总结 前言 大家好&#xff0c;昨天我们学习了vb的简单介…

python实现生成树

生成树 生成树&#xff08;Spanning Tree&#xff09;是一个连通图的生成树是图的极小连通子图&#xff0c;它包含图中的所有顶点&#xff0c;并且只含尽可能少的边。这意味着对于生成树来说&#xff0c;若砍去它的一条边&#xff0c;则会使生成树变成非连通图&#xff1b;若给…

【学习】pytorch框架的数据管理—— 理解Dataloader

参考&#xff1a;https://spite-triangle.github.io/artificial_intelligence/#/./README 1.标准数据集 使用&#xff1a;以 CIFAR10 数据集为例&#xff0c;其他数据集类似。 # root&#xff1a;数据存放路径 # train&#xff1a;区分训练集&#xff0c;还是测试集 # trans…

前端加密面面观:常见场景与方法解析

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

vue项目部署服务器,因为跨域设置nginx.config要修改的配置

下面是我在vue项目中vite.config.js设置的配置代理 对于部署项目需要使用nginx进行vue项目的话&#xff0c;需要对nginx的配置文件进行如下修改即可

Linux:线程互斥与同步

目录 线程互斥 锁的初始化 加锁 解锁 锁的初始化 锁的原理 死锁 线程同步 方案一&#xff1a;条件变量 条件变量初始化 等待 唤醒 条件变量的代码示例 基于阻塞队列的生产消费模型 方案二&#xff1a;POSIX信号量 初始化信号量&#xff1a; 销毁信号量 等待信…

动态规划|【路径问题】|174.地下城游戏

题目 174. 地下城游戏 恶魔们抓住了公主并将她关在了地下城 dungeon 的 右下角 。地下城是由 m x n 个房间组成的二维网格。我们英勇的骑士最初被安置在 左上角 的房间里&#xff0c;他必须穿过地下城并通过对抗恶魔来拯救公主。 骑士的初始健康点数为一个正整数。如果他的健…

map和set(二)——AVL树的简单实现

引入 二叉搜索树有其自身的缺陷&#xff0c;假如往树中 插入的元素有序或者接近有序&#xff0c;二叉搜索树就会退化成单支树&#xff0c;时间复杂度会退化成O(N)&#xff0c;因此 map、set等关联式容器的底层结构是对二叉树进行了平衡处理&#xff0c;即采用平衡树来实现。简…

可免费使用的AI平台汇总 + 常用赋能科研的AI工具推荐

赋能科研&#xff0c;AI工具助你飞跃学术巅峰&#xff01;(推荐收藏) 文章目录 赋能科研&#xff0c;AI工具助你飞跃学术巅峰&#xff01;(推荐收藏)一、可免费使用的AI平台汇总1. ChatGPT2. New Bing3. Slack4. POE5. Vercel6. 其他平台7. 特定功能平台8. 学术资源平台9. 中文…

14 OpenCv边缘处理

文章目录 卷积边界问题边缘处理copyMakeBorder 算子代码 卷积边界问题 图像卷积的时候边界像素&#xff0c;不能被卷积操作&#xff0c;原因在于边界像素没有完全跟kernel重叠&#xff0c;所以当3x3滤波时候有1个像素的边缘没有被处理&#xff0c;5x5滤波的时候有2个像素的边缘…

华为OD机试C卷“跳步-数组”Java解答

描述 示例 算法思路1 不断移动数组将元素删去&#xff08;并未彻底删除&#xff0c;而是将数字元素前移实现“伪删除”&#xff09;这样删除元素的位置就呈现一定规律&#xff0c;详细见下图&#xff08;潦草的画&#xff09; 答案1 import java.util.*;public class Main {…

蓝桥杯刷题5--GCD和LCM

目录 1. GCD 1.1 性质 1.2 代码实现 2. LCM 2.1 代码实现 3. 习题 3.1 等差数列 3.2 Hankson的趣味题 3.3 最大比例 3.4 GCD 1. GCD 整数a和b的最大公约数是能同时整除a和b的最大整数&#xff0c;记为gcd(a, b) 1.1 性质 GCD有关的题目一般会考核GCD的性质。   …