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

图片预览 element-plus 带页码

vue3、element-plus项目中,点击预览图片,并显示页码效果如图

安装 | Element Plus

  <div class="image__preview"><el-imagestyle="width: 100px; height: 100px":src="imgListArr[0]":zoom-rate="1.2":max-scale="7":min-scale="0.2":preview-src-list="imgListArr":initial-index="0"fit="cover"@switch="onSwitch"@close="closePreview"><template #viewer ><div class="preview-page" >{{imgCur}}/{{imgListArr.length}}</div></template></el-image></div>
<script setup>
//预览图片的数组
const imgListArr = ref(['https://img1.baidu.com/it/u=1461245034,737626739&fm=253&fmt=auto&app=138&f=JPEG?w=751&h=500','https://img0.baidu.com/it/u=1272888261,2716721561&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500','https://img1.baidu.com/it/u=3390302890,2011160393&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500','https://img0.baidu.com/it/u=3944258063,3004524010&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
])//页码默认1开始
const imgCur = ref(1)//监听当前切换的图片
const onSwitch = (index) =>{imgCur.value = index+1
}
//监听预览的关闭
const closePreview = () =>{//关闭时需要把页码重置1,要不然切换到比如5、6时关闭预览,下次打开就是5、6imgCur.value = 1
}</script>
<style scoped lang="less">
.image__preview{float: left;.el-image {border:1px solid rgb(204 204 204 / .5);}.preview-page{position: absolute;background:rgb(0 0 0 / .5);text-align: center;color:#fff;left: 50%;bottom:80px;transform: translateX(-50%);width:50px;height:30px;padding: 0 23px;border-radius:15px;line-height:30px;}
}
.image__error{display: inline-block;.image-slot {font-size: 30px;.el-icon {font-size: 30px;}}.el-image {width: 100%;height: 200px;}
}
</style>

src 默认展示的图片地址

initial-index 默认点开查看的第几个大图的索引

preview-src-list 要预览的图片数组

switch 监听切换图片方法的回调,放回当前预览的图片索引

close 监听关闭预览图片事件

viewer 是官网提供的插槽,官网提供的预览没有页码,可以通过插槽和switch回调来写页码

预览图片官网API:Image 图片 | Element Plus

相关文章:

图片预览 element-plus 带页码

vue3、element-plus项目中&#xff0c;点击预览图片&#xff0c;并显示页码效果如图 安装 | Element Plus <div class"image__preview"><el-imagestyle"width: 100px; height: 100px":src"imgListArr[0]":zoom-rate"1.2":max…...

【小白专用】winform启动界面+登录窗口 更新2024.1.1

需求场景&#xff1a;先展示启动界面&#xff0c;然后打开登录界面&#xff0c;如果登录成功就跳转到主界面 首先在程序的入口路径加载启动界面&#xff0c;使用ShowDialog显示界面&#xff0c; 然后在启动界面中添加定时器&#xff0c;来实现显示一段时间的效果&#xff0c;等…...

自动化网络故障修复管理

什么是故障管理 故障管理是网络管理的组成部分&#xff0c;涉及检测、隔离和解决问题。如果实施得当&#xff0c;网络故障管理可以使连接、应用程序和服务保持在最佳水平&#xff0c;提供容错能力并最大限度地减少停机时间。专门为此目的设计的平台或工具称为故障管理系统。 …...

Git:常用命令(二)

查看提交历史 1 git log 撤消操作 任何时候&#xff0c;你都有可能需要撤消刚才所做的某些操作。接下来&#xff0c;我们会介绍一些基本的撤消操作相关的命令。请注意&#xff0c;有些操作并不总是可以撤消的&#xff0c;所以请务必谨慎小心&#xff0c;一旦失误&#xff0c…...

Oracle 12c rac 搭建 dg

环境 rac 环境 &#xff08;主&#xff09;byoradbrac 系统版本&#xff1a;Red Hat Enterprise Linux Server release 6.5 软件版本&#xff1a;Oracle Database 12c Enterprise Edition Release 12.1.0.2.0 - 64bit byoradb1&#xff1a;172.17.38.44 byoradb2&#xff1a;…...

Cisco模拟器-交换机端口的隔离

设计要求将某台交换机的端口划分在不同的VLAN。以实现连接在相同VLAN端口上的计算机可以通信&#xff0c;而连接在不同VLAN端口上的计算机无法通信的目的。 通过设计&#xff0c;一方面可以加强计算机网络的安全&#xff0c;另一方面通过隔绝不同VLAN间的广播包也可以提高网络…...

zdppy_api框架快速入门

概述 zdppy_api是一款为了快速开发而生的&#xff0c;基于异步的&#xff0c;使用简单的Python后端API接口开发框架。 本框架的目标是让Python后端开发变得越来越简单&#xff0c;直到发现原来还可以更简单&#xff01; 一切都是为了提高开发效率&#xff01;&#xff01;&…...

https证书配置过程

相关网址&#xff1a; FreeSSL首页 - FreeSSL.cn一个提供免费HTTPS证书申请的网站 ACME v2证书自动化快速入门 acme.sh简单教程-CSDN博客...

如何用C语言程序生成任意手性(即具有任意m和n值),任意长度的碳纳米管,并输出三维空间坐标呢?

如何用C语言程序生成任意手性&#xff08;即具有任意m和n值&#xff09;&#xff0c;任意长度的碳纳米管&#xff0c;并输出三维空间坐标呢&#xff1f; 生成任意手性、任意长度的碳纳米管可以使用 Chirality Vector 和 Unit Vector 的概念来表示。Chirality Vector (n, m) 描述…...

C++每日一练(8):图像相似度

题目描述 给出两幅相同大小的黑白图像&#xff08;用0-1矩阵&#xff09;表示&#xff0c;求它们的相似度。 说明&#xff1a;若两幅图像在相同位置上的像素点颜色相同&#xff0c;则称它们在该位置具有相同的像素点。两幅图像的相似度定义为相同像素点数占总像素点数的百分比。…...

C++面试宝典第12题:数组元素相除

题目 从控制台输入若干个整数作为数组,将数组中每一个元素除以第一个元素的结果,作为新的数组元素值。比如:可以先输入3,作为数组元素的个数;然后输入3个整数,作为数组元素的值。 解析 这道题本身并不复杂,但里面隐藏了不少“坑点”和“雷区”,主要考察应聘者全面思考问…...

oCPC实践录 | 目标ROI的出价与转化回传调控算法

这篇文章我们聊聊广告主在oCPC下&#xff0c;怎么调控自己的出价或者回传转化优化自己的ROI。 ROI是广告主最关心的指标了&#xff0c;根据oCPC出价的基本原理ocpc_bid pcvr * given_cpa * k, 广告主在整个出价中有两个可以控制的变量来影响出价&#xff0c;一个是直接的give…...

百倍量化之Dbcd-v2中性策略

Dbcd-v2中性策略 1. 指标含义 该指标主要是计算偏置的因子,并根据偏置的平均来分析这个股票的稳定性。相比于v1,策略是更换了dbcd的计算方式 第一步主要操作就是计算当前值和前段时间的平均值的偏置 ma = bt.indicators.SimpleMovingAverage(self.data, period=self.p.peri…...

系统学习Python——装饰器:函数装饰器-[装饰器状态保持方案:函数属性]

分类目录&#xff1a;《系统学习Python》总目录 如果我们没有在使用Python3.X并因此无法利用一条nonlocal语句&#xff0c;或者我们希望代码具有可移植性&#xff0c;能在Python3.X和Python2.X上同时工作一一我们仍然能够针对某些可改变的状态使用函数属性来避免使用全局变量和…...

逻辑卷学习后续----------缩容

一、缩容&#xff1a;缩减大小 ext4可以 &#xff0c; xfs无法缩减&#xff0c;缩减会影响业务 1.解挂载 2.检查文件系统完整性 3.缩减文件系统 4.缩减逻辑卷上下一致 5.再挂载回去 添加磁盘 文件系统只能装ext4 缩减文件系统 resize2fs 挂载失败需要重新安装文件系统…...

15-网络安全框架及模型-BLP机密性模型

目录 BLP机密性模型 1 背景概述 2 模型原理 3 主要特性 4 优势和局限性 5 困难和挑战 6 应用场景 7 应用案例 BLP机密性模型 1 背景概述 BLP模型&#xff0c;全称为Bell-LaPadula模型&#xff0c;是在1973年由D.Bell和J.LaPadula在《Mathematical foundations and mod…...

[C#]OpenCvSharp结合yolov8-face实现L2CS-Net眼睛注视方向估计或者人脸朝向估计

源码地址&#xff1a; github地址&#xff1a;https://github.com/Ahmednull/L2CS-Net L2CS-Net介绍&#xff1a; 眼睛注视&#xff08;eye gaze&#xff09; 是在各种应用中使用的基本线索之一。 它表示用户在人机交互和开放对话系统中的参与程度。此外&#xff0c;它还被用…...

[2024区块链开发入门指引] - 比特币与区块链诞生

一份为小白用户准备的免费区块链基础教程 工欲善其事,必先利其器 Web3开发中&#xff0c;各种工具、教程、社区、语言框架.。。。 种类繁多&#xff0c;是否有一个包罗万象的工具专注与Web3开发和相关资讯能毕其功于一役&#xff1f; 参见另一篇博文&#x1f449; 2024最全面…...

【大数据面试知识点】Spark中的累加器

Spark累加器 累加器用来把Executor端变量信息聚合到Driver端&#xff0c;在driver程序中定义的变量&#xff0c;在Executor端的每个task都会得到这个变量的一份新的副本&#xff0c;每个task更新这些副本的值后&#xff0c;传回driver端进行merge。 累加器一般是放在行动算子…...

深度学习核心技术与实践之深度学习基础篇

非书中全部内容&#xff0c;只是写了些自认为有收获的部分 神经网络 生物神经元的特点 &#xff08;1&#xff09;人体各种神经元本身的构成很相似 &#xff08;2&#xff09;早期的大脑损伤&#xff0c;其功能可能是以其他部位的神经元来代替实现的 &#xff08;3&#x…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...

从零开始了解数据采集(二十八)——制造业数字孪生

近年来&#xff0c;我国的工业领域正经历一场前所未有的数字化变革&#xff0c;从“双碳目标”到工业互联网平台的推广&#xff0c;国家政策和市场需求共同推动了制造业的升级。在这场变革中&#xff0c;数字孪生技术成为备受关注的关键工具&#xff0c;它不仅让企业“看见”设…...